Archive for the ‘SharePoint2013’ Category

Scenario

I have a requirement wherein I will be using External Content Type (BCS) using a Stored Procedure.

  • The stored procedure has parameters.
  • I have to set up Read List and Read Item operations.

Objective

The objective of this exercise is to write a Stored Procedure that returns a list of SharePoint History from the SharePoint Test database and displays these results by using the Business Data List web part. We will also see how we can use various filters (ID for our example) to limit the result set returned by the stored procedure.

Steps:

Create External Content Type

In this step, we will use SharePoint Designer to create an External Content Type from the stored procedure created in the previous step.

  1. Browse to the “SharePoint – 80″ site in your development environment.
  2. On the Site Actions drop-down, click Edit in SharePoint Designer.
  3. In the Navigation pane, click External Content Types.
  4. In the New group of the ribbon, click External Content Type.
  5. In the External Content Type Information group, edit each of the parameters as below and leave the remaining to their default settings.
    Property Value
    Name SharePoint History
    Display Name SharePoint History
    Namespace SharePointTest
    Version 1.0.0.0
  6. Next to External System, click Click here to discover external data sources and

    info

  7. In the Data Source explorer, expand the SharePoint Test to find the stored procedure sp_Sharepoint_History under the Routines node.

    add

  8. Right click on sp_Sharepoint_History to open a pop-up menu and click New Read List Operation.
  9. Click the Next > button at the bottom of the Read List dialog.
  10. On the Input Parameters page, click @ID in the Data Source Elements pane.
  11. In the Properties pane, edit the values as below. Then, click Click to Add against the Filter property.

    property

  12. In the Filter Configuration dialog, select New Filter. Edit the properties as below leaving the rest to their default. Then click OK.
    Property Value
    New Filter ID
    Filter Type Comparison
    Operation Equals

    config

  13. Click the Next> button at the bottom of the Read List dialog.
  14. On the Return Parameters page, click ID in the Data Source Elements pane.
  15. In the Properties pane, check the box for Map to Identifier and Show In Picker.

    properties

  16. Click the Finish button.
  17. Click the Save button in the Quick Access Toolbar to commit the changes.
  18. Navigate to your SharePoint 2013 site.
  19. From this page select the Site Actions | Edit Page.
  20. Click on Add a Web Part, in the left web part zone.
  21. From the web parts selection menu, select Business Data in the Categories section and then from the list of web parts select Business Data List and click add.

    add

  22. From the web part’s action menu, click on Edit Web Part to open the tool pane for this web part.
  23. In the Business Data List section of the edit pane, click on the picker icon next to Type field to bring up the External Content Type Picker dialog form.

    datalist

  24. In the dialog form, select the content type created in the previous steps and click OK.

    picker

  25. For the View Property, select Default (SharePoint History Read List) in the drop down.

    history

  26. Then click OK in the web part’s tool pane.

    Final O/P:

    output

Summery:

Now we have seen how to configure the External Content Type and Business data List Web Part to make BCS looks like SharePoint List. Hope you enjoyed my article.

Advertisements

Introduction

This article explains how to filter and sort in SharePoint List data using Angular JS /REST-API. I used the REST API to talk to SharePoint and get the data from the list. I am not going to discuss much about the REST services since many folks have already done great work on explaining REST API services.

In this article we just see that we have first created an Angular Controler 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 the SharePoint list. $scope is a glue between a 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 }}.we’ll be looking at a way to sort and filter our tabular data. This is a common feature that is always useful so let’s look at what we’ll be building and dive right into the code

Solution

We will implement on a Sample Application and try to get the data from the SharePoint list, bind the table and apply sort and filter to our tabular data.

Our application will allow us to:

  • Show a table of data (ng-repeat)
  • Sort by ascending or descending columns (orderBy)
  • Filter by using a search field (filter)

These are three common functions in any application and Angular lets us implement these features in a very simple way. Let’s set up our sample application’s HTML and Angular parts and then look at how we can sort and filter.

list

Use the following procedure to create a sample:

  1. <h1> Filtering and sorting in SharePoint List using AngularJS-REST-API !!</h1>
  2. <br/><br/>
  3. “SharePointAngApp” class=“row”>
  4.     “spCustomerController”
  5.         class=“span10”>
  6.         
  7.             Sort by:
  8.             “sortExpression”>
  9.                 “Title”>Title
  10.                     “Employee”>Employee
  11.                         “Company”>Company
  12.                             
  13.         
  •         <br/> Search By Any:
  •         <inputtype=“text” ng-model=“search.$” />
  •         <br/>
  •         <br/>
  •         <tableclass=“table table-condensed table-hover”>
  •             <tr>
  •                 <th>Title</th>
  •                 <th>Employee</th>
  •                 <th>Company</th>
  •             </tr>
  •             <trng-repeat=“customer in customers | orderBy:mySortFunction | filter:search”>
  •                 <td>{{customer.Title}}</td>
  •                 <td>{{customer.Employee}}</td>
  •                 <td>{{customer.Company}}</td>
  •             </tr>
  •         </table>
  •     </div>
  • </div>
  • Step 1: Navigate to your SharePoint 2013 site.

    Step 2: From this page select the Site Actions | Edit Page.

    Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button“.

    Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:

    1. <style>
    2. th {
    3.     background-color: #778899;
    4.     color: white;
    5. }
    6. </style>
    7. https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js&#8221;>
    8.     
    9.     “http://code.jquery.com/ui/1.10.3/jquery-ui.min.js&#8221;>
    10.         
    11.         
    12. var myAngApp = angular.module(
    13.     ‘SharePointAngApp’, []);
    14. myAngApp.controller(
    15.     ‘spCustomerController’,
    16.     function($scope, $http)
    17.     {
    18.         $http(
    19.         {
    20.             method: ‘GET’,
    21.             url: _spPageContextInfo.webAbsoluteUrl +
    22.                 “/_api/web/lists/getByTitle(‘InfoList’)/items?$select=Title,Employee,Company”,
    23.             headers:
    24.             {
    25.                 “Accept”“application/json;odata=verbose”
    26.             }
    27.         }).success(function(data, status,
    28.             headers, config)
    29.         {
    30.             $scope.customers = data.d.results;
    31.             $scope.mySortFunction = function(
    32.                 customer)
    33.             { //Sorting Iteam
    34.                 if (isNaN(customer[$scope.sortExpression]))
    35.                     return customer[$scope.sortExpression];
    36.                 return parseInt(customer[$scope
    37.                     .sortExpression]);
    38.             }
    39.         }).error(function(data, status,
    40.             headers, config) {
    41.         });
    42.     });
    43.         
    44.         <h1> Filtering and sorting in SharePoint List using AngularJS-REST-API !!</h1>
    45.         <br/><br/>
    46.         “SharePointAngApp” class=“row”>
    47.             “spCustomerController”
    48.                 class=“span10”>
    49.                 
    50.                     Sort by:
    51.                     “sortExpression”>
    52.                         “Title”>Title
    53.                             “Employee”>Employee
    54.                                 “Company”>Company
    55.                                     
    56.                 
  •                 <br/> Search By Any:
  •                 <inputtype=“text” ng-model=“search.$” />
  •                 <br/>
  •                 <br/>
  •                 <tableclass=“table table-condensed table-hover”>
  •                     <tr>
  •                         <th>Title</th>
  •                         <th>Employee</th>
  •                         <th>Company</th>
  •                     </tr>
  •                     <trng-repeat=“customer in customers | orderBy:mySortFunction | filter:search”>
  •                         <td>{{customer.Title}}</td>
  •                         <td>{{customer.Employee}}</td>
  •                         <td>{{customer.Company}}</td>
  •                 </tr>
  •             </table>
  •          </div>
  •     </div>
  • run

    Filtering the Table:

    1. <tr ng-repeat=“customer in customers | filter:search”>

    You will need to bind whatever input you are using with ng-model=”search.$”. Now as we type into that input box, you should see that table changes

    Filtering the Table

    Sorting the Table:

    1. <trng-repeat=”customer in customers | orderBy:mySortFunction”>

    Sorting the Table
    That’s all we need to change the sort order of our ng-repeat. If you refresh your page, you’ll see that your list is sorted by Employee in normal order.