SharePoint4us

Explore the Experience in SharePoint 2013

Thursday, December 18, 2014

How to Enable Sign in as Different User Option in SharePoint 2013 ?

No comments


Hi  Friends,

Thanks for visiting my blog .

Here in this article we will discuss about the steps to enable "Sign in as Different User" Option in SharePoint 2013.

In SharePoint 2013 there is no option for "Sign in as different user" default. So we need to follow certain steps to Enable this option manually.
     If you will go to the "System Account" drop down, You won't find any option as "Sign in as Different User".

                                                  
The below are the steps to enable "Sign in as Different User" Option in SharePoint 2013

Step-1:
Go to the following path, You will find one "Welcome.ascx" file there.We need to edit this file to enable this option.

C:\Program Files\Common Files\microsoft shared\Web ServerExtensions\15\TEMPLATE\CONTROLTEMPLATES

Step-2:
Open the file welcome.ascx in Visual studio and add the below part of the code above the tag that has "ID_RequestAcess" and save it.

<SharePoint:MenuItemTemplate runat="server" ID="ID_LoginAsDifferentUser"
  Text="<%$Resources:wss,personalactions_loginasdifferentuser%>"
  Description="<%$Resources:wss,personalactions_loginasdifferentuserdescription%>"
  MenuGroupId="100"
  Sequence="100"
  UseShortId="true"
  />
Note:You should add the above code above the tag that has ID_RequestAcess.
         

 Step-3:
Now Refresh your site and you will now find "Sign in as different user" will be enabled.You will find this option in "System Account" drop down.





Wednesday, December 17, 2014

What is Angular JS and How to Use it in SharePoint 2013 ?

No comments

Hi  Friends,

Thanks for visiting my blog .

In this Post  , I would like to describe about  Angular.Js and how w can use in SharePoint 2013 with Sample example.

With SharePoint 2010, developers were now able to use Client Side Object Model to develop Web parts.The Client Side Object Model is a subset of the SharePoint API which mimics a large portion of the server-side API.The advantage of the client-side API is it can be called from .NET apps, Silverlight or using JavaScript libraries.

In SharePoint 2013, the client-side API has been extended with REST/OData endpoints.

Web Programming world is now shifting its gears towards scripting and there are many frameworks evolved recently all focused on the Model – View * pattern.

I used REST API to talk to SharePoint and get the data from the list.

Lets start about angular JS.

AngularJS :

AngularJS is an open source MV* JavaScript framework maintained by Google and community, for building rich, interactive, single page applications (SPA). AngularJS uses HTML as your template language and lets you extends the HTML vocabulary for your application. The * in AngularJS represents MVC, MVVM or the MVP pattern which makes both development and testing of AngularJS applications easier. The main components of AngularJS are shown here –
angular-mvc
Controller – Controller is key to AngularJS. A Controller is a JavaScript constructor function that is used to create a scope. A controller is attached to the DOM via ng-controller directive. You can use controllers to initiate the state of the $scope object and add behaviours to $scope object. $scope – is a glue between a Controller and DOM and just watches the changes to models and also applies changes to the model. One thing to note about Controller is they do not perform DOM manipulations or maintain state. AngularJS uses Services to maintain state.
Services – Services are used to perform common tasks on the web applications which are consumed by Angular JS via Dependency Injection. Services are registered with a Module and are usually singular to the application.
Views – Views are complied DOM of Angular JS. A view is produced using $compile with HTML templates and $scope.
With clientside implementation, Angular can have integration with the server using REST and $http service.

 This is a breif  description about angular js.

Now lets start how to work with Angular js in SharePoint 2013  with Rest API.


Step 1:  Create a Sample Custom List in SharePoint 2013 . Name it as "EmployeeList"and
             create Columns as "Employee","Company","Department".                                   

Step 2:  Create a Site Page ,after creating the page Go to 
                Site Actions-->Edit Page--> Insert -->Web part-->
                 Media and Content (From         categories)-->Select Script Editor -->Add to Page.

Step 3 : Now Copy the below Script and   paste it in the script editor by clicking on
               the "Edit Snippet" button. 

 ********************************************************************                

<style>
table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<script>   

    var myAngApp = angular.module('SharePointAngApp', []);
    myAngApp.controller('spCustomerController', function ($scope, $http) {
        $http({
            method: 'GET',
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('EmployeeList')/items?$select=Title,Employee,Company,Department",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data, status, headers, config) {
            $scope.customers = data.d.results;
        }).error(function (data, status, headers, config) {
      
        });
    });
   
</script>

<h1> Visit SharePoint4us for more Posts.. !!</h1>

<div ng-app="SharePointAngApp" class="row">
    <div ng-controller="spCustomerController" class="span10">
        <table class="table table-condensed table-hover">
            <tr>
                <th>Title</th>
                <th>Employee</th>
                <th>Company</th>
                <th>Department</th>
              
            </tr>
            <tr ng-repeat="customer in customers">
                <td>{{customer.Title}}</td>
                <td>{{customer.Employee}}</td>
                <td>{{customer.Company}}</td>
               <td>{{customer.Department}}</td>
                </tr>
        </table>
    </div>
</div>
   ***************************************************************
               


 Now we can see the output for the above script.


This is how it looks like after we fetch the data from SharePoint List ("EmployeeList").

Here the points we have to note is 
 1. we  are not opened server or Connected to server.
 2. Not even opend the Visual Studio .
 3. Not even wrote a single line of SharePoint Server Side Code .

But we have acheived  " getting List items from list ". That is the power of Client Object model in SharePoint. Similarly we can acheive lot many  functionalities.

Now  we can go ahead and look into the script .

 ****************************************************************
<style>
table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}
</style>

///This section is for displaying the Table data in UI
 ******************************************************************

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

 //This section is to  Integrate angular JS file into the script (reference file ).

we can also save the files in Style library and also share the file paths here instead of fetching from online .
 ********************************************************************

 var myAngApp = angular.module('SharePointAngApp', []);

Now we will know about an Angular Module. You can think of a module as a container which wires the different parts of your application like controllers, services, directives, etc. To create an Angular Module, write the following code in our SharePointListModule.js file –

*******************************************************************

   myAngApp.controller('spCustomerController', function ($scope, $http) {
        $http({
            method: 'GET',
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('EmployeeList')/items?$select=Title,Employee,Company,Department",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data, status, headers, config) {
            $scope.customers = data.d.results;
        }).error(function (data, status, headers, config) {
           });
    });

We will know adding a Controller which will fetch the data from our SharePoint List using $http service. We will use the SharePoint OData query and bind the data in our user control. Let’s write some code in Customer Controller.js file as shown here 

 ***************************************************************************
In the script we just saw, we have first created an Angular Controller with the name ‘spCustomerController’. We have also injected $scope and $http service. The $http service will fetch the list data from the specific columns of SharePoint list. $scope is a glue between Controller and a View. It acts as execution context for Expressions. Angular expressions are code snippets that are usually placed in bindings such as {{ expression }}.
You might have observed that we are creating separate JavaScript files for creating Angular JS Module and Controller. As already mentioned, the AngularJS module acts as a container for Controllers, Services, Filters, and Directives etc. Modules declaratively specify how an application should be bootstrapped. It offers several advantages like –
  • The declarative process is easier to understand
  • Modules can be reusable
  • Modules can be loaded in any order or parallel
  • Unit testing and end-to-end testing is easier

 This is the detailed description about how to fetch data from sharePoint list using Angular Js in SharePoint Using Rest API.

Hope  you like this posts....

For More Posts Please visit... Sharepoint4us.blogspot.in