Sunday, November 22, 2015

CURD operations on list using RESTAPI and AngularJS in SharePoint 2013 - Part2

Hi, in my previous post we have seen how to get SharePoint list data and show in tabular format using REST API with AngularJS.

Now i want to show to create new form and add new list item to list using REST API and AngularJS.


Here i will add one button under list item details and name it as "Create New" and it's look like as below.




Now when we click on the button i will display a new form to insert new item.

It looks like as below.



In this new form, we have single line of text, multiline of text, date picker, hyperlink, true/false(checkbox), dropdown and people picker.

This example, i have covered most of the column types.

For people picker am using Clientpeoplepicker.

In this example, am using dropdown column and dropdown values are loaded while page loading as below script.

// Loading dropdown default values
$scope.items = [
    { id: 1, name: 'Action'},
    { id: 2, name: 'Drama'}];

And dropdown field design is


<div class="form-group">

  <label class="col-sm-2 control-label">Book type: </label>
  <div class="col-sm-10">
   <select ng-model="selectedItem"
          ng-options="item as item.name for item in items">
  </select>
 </div>
</div>

For date picker, am using third party control for better look i.e. KENDO

and date picker field look as below




First we need to include all the required js and css files

<link rel="stylesheet" href="<sitename>/SiteAssets/Kendo/kendo.common-material.min.css" />
<link rel="stylesheet" href="<sitename>/SiteAssets/Kendo/kendo.material.min.css" />
 <script src="<sitename>/SiteAssets/Kendo/jquery.min.js"></script>
 <script src="<sitename>/SiteAssets/Kendo/angular.min.js"></script>
 <script src="<sitename>/SiteAssets/Kendo/kendo.all.min.js"></script>

Now load kendo module as below

var myAngApp = angular.module('bookapp', ["kendo.directives"]);

For, people picker am using SPClientpeoplepicker.

For this, we need to load the below script.

$(document).ready(function () {

    // Specify the unique ID of the DOM element where the

    // picker will render.
     initializePeoplePicker('peoplePickerDiv');

});

function initializePeoplePicker(peoplePickerElementId) {


    // Create a schema to store picker properties, and set the properties.

    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = false;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';

    // Render and initialize the picker.

    // Pass the ID of the DOM element that contains the picker, an array of initial
    // PickerEntity objects to set the picker value, and a schema that defines
    // picker properties.
    SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}

People picker looks like as below and when users start typing can see search results as below.



Now when user enter all the details and click on add button all these details need to add to list and refresh the page with added item.

now we need to update control as below,

###############################################

$scope.Add = function() {
$scope.Booktype=$scope.selectedItem.name;
if($scope.HasPassport) 
{
$scope.isread=true;
}
else
{
$scope.isread=false;
}
    var d = new Date($scope.dateString);
    $scope.Bookreleasedate= d.toISOString();
    var userlanid="'"+$.parseJSON($('#peoplePickerDiv_TopSpan_HiddenInput').val())[0].Key+"'";
    var name=userlanid.replace(':', '%3A').replace('|', '%7C').replace('#', '%23').replace(/'/g, '%27');
var promisedata=bookService.getuserid(name,$scope);
promisedata.then(function(data) {
bookService.addBook('Bookshelf',$scope);
console.log('This ANOTHER success method was assigned AFTER calling to async()', data);
}, function(error) {
console.log('This ANOTHER failure method was assigned AFTER calling to async()', error);
});
    }

update service as below where actual item adding to list.

###############################################################

 //Create a book
this.addBook = function (listTitle,$scope) {
        var dfd = $q.defer();
       $http.defaults.headers.post['X-HTTP-Method'] = "";
       var restUrl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('" + listTitle + "')/items";
       $http.post(restUrl, {
       __metadata: {
           type: "SP.Data." + listTitle + "ListItem"
       },
       Title: $scope.BookTitle,
Booksummary: $scope.BookSummary,
Bookisread: $scope.isread,
ReleaseDate: $scope.Bookreleasedate,
Bookreleasedate:$scope.Bookreleasedate,
EmpId: $scope.emp,
Booktype:$scope.Booktype,
storeurl: {
                    __metadata: { type: 'SP.FieldUrlValue' },
                    Description: $scope.storedescr,
                    Url: $scope.storeurl
},
   }).success(function (data) {
       //resolve the new data
alert("Book has been added successfully.")
       dfd.resolve(data.d);
   }).error(function (data) {
       dfd.reject("failed to add book");
   });
   return dfd.promise;
}

// Completed add book

this.getuserid = function (username,$scope) {
   var dfd = $q.defer();
       $http.get(_spPageContextInfo.webAbsoluteUrl+"/_api/web/siteusers(@v)?@v="+username).success(function (data) {
       //resolve the new data
       dfd.resolve(data.d);
$scope.emp=data.d.Id;
   }).error(function (data) {
alert(data);
       dfd.reject("failed to get user id");
   });
   return dfd.promise;
}

while adding new item which is having peoplepicker field then we need selected user id so for that we have used getuserid function to get selected user id.




In my next post, will see how to update and delete item using REST API.

Here the complete source code.

Wednesday, November 11, 2015

Error Type: The name ‘InitializeControl’ does not exist in the current context

Hi, 

Today i want to explain how to resolve "The name ‘InitializeControl’ does not exist in the current context" error.

This error ever common when you try to build SharePoint solution from visual studio 2010/2013.

This error mainly comes when you do not have access to connect SharePoint site.

To confirm this, Try to create new SharePoint solution from visual studio, give site URL where you want to debug and click on connect. Then you will get the below error.

The local SharePoint server is not available. Check that the server is running and connected to the SharePoint farm.


It means that you do not have access to connect to SharePoint server from visual studio.

To resolve the above two issues  you should have content database access of config database and the web application.

Now, Go to SharePoint powershell management and execute the below script/queries

Add-SPShellAdmin -UserName <domain\username>

--This will add permissions to the config database in SharePoint 2010

$db = Get-SPContentDatabase -WebApplication <web application URL>

Add-SPShellAdmin -UserName <domain\username> -database $db.Id

Replace "<domain\username>" with the user who is going to work and <web application URL> with the web application.

Now you can happily start working on :).

Sunday, October 18, 2015

Carousel with content in SharePoint using AngularJS + REST API

Hi,

i was working AngularJS and REST API, i have thought to create dynamic carousel with the help of SharePoint list data.

1. I have created custom list with two extra columns namely a) ImgURL b) Caption both are single line of text column type.


2. Here am storing images in shared documents.

3. Now open the page and edit then add script editor web part to the page.

4. Add the below script to script editor

<script src="https://<site URL>/SiteAssets/Kendo/jquery.min.js"></script>
<script src="https://<site URL>/SiteAssets/Kendo/angular.min.js"></script>

<script data-require="angular-ui-bootstrap@*" data-semver="0.6.0" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script>
       
var myApp=angular.module('plunker', ['ui.bootstrap']);

        myApp.service('bookService', ['$http', '$q', function ($http, $q) {

    //Define the http headers
$http.defaults.headers.common.Accept = "application/json;odata=verbose";
$http.defaults.headers.post['Content-Type'] = 'application/json;odata=verbose';
$http.defaults.headers.post['X-RequestDigest'] = $("#__REQUESTDIGEST").val();
$http.defaults.headers.post['If-Match'] = "*";
this.GetDetails= function(listTitle,$scope)
{
var restUrl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('" + listTitle + "')/items";
$http({
method: 'GET',
url: restUrl,
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data) {
$scope.slides=data.d.results;
$scope.myInterval = 3000;
}). error(function (data) {
});
}
}]);
myApp.controller('CarouselDemoCtrl', function($scope, bookService) {
$scope.Getdetails=function() {
var getdata=bookService.GetDetails('carousel',$scope);
}
});
</script>
<style>
      .carousel-indicators{left:50%; display:none;}
      .carousel-indicators li {
        background-size : 42px 22px;
        width : 42px;
        height: 22px;
        border-radius : 0px;
        text-indent : 0px;
        background-repeat : no-repeat;
        background-position : center;
        cursor : pointer;
      }
      .carousel-indicators{left:50%;}
 .carousel-caption p{align:"center";}
</style>
    
<div ng-app="plunker">
    <div ng-controller="CarouselDemoCtrl" data-ng-init="Getdetails()">
      <carousel interval="myInterval">
        <slide ng-repeat="slide in slides" active="slide.active">
          <img ng-src="{{slide.ImgURL}}" style="margin:auto;width:835px;height:445px;" />
          <div class="carousel-caption">
            <p align="center">{{slide.Caption}}</p>
          </div>
        </slide>
      </carousel>
    </div>
</div>

5. Here the output:



CURD operations on list using RESTAPI and AngularJS in SharePoint 2013

Hi,

After long time i got time to write something about RESTAPI and AngularJS.

In this article, will try to explain about how to use RESTAPI and AngularJS for basic operation on a list i.e. Create, Update, Read, and Delete items in a list.

First we will get list item details

Here we go...

1. I have create a list named it as "Bookshelf"
2. Created with following columns ( Here i want to use most of the data types for this example)
     Title (its actually Book name) -- Single line of text
     BookSummary  -- Multiline of text
     Bookreleasedate  -- datetime
     Bookisready  -- Yes/No
     BookType -- Dropdown
     Emp(actually its author) -- People picker
     storeurl -- Hyperlink
3. I have entered few rows for testing purpose and list looks like this

4. Now i have written script to get list details using REST API and displaying data using AngularJS

AngularJS is a MVC based framework. So here i will use same pattern.

Here view is table which will display data which is coming from Model

The Controller in AngularJS is ng-controller.

Model in AngularJS is service which actually call REST API service and get the data.

                                             AngularJS MVC


5. Now create one page to display list data and named it as "GetListData.aspx"

6. Edit the page and add script editor.

7. Now add script to script editor as shown below

In angularJS first first we need to add angularJS script references (you can refer JS files either from online url or files which are download and upload to your sharepoint site)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://<server>/site/UK/SiteAssets/Kendo/jquery.min.js"></script>
<script src="https://<server>/site/UK/SiteAssets/Kendo/angular.min.js"></script>
<script>

Now i have designed layout to display data as below

<div ng-app="bookapp">
<div id="maincontroler" ng-controller="bookctrl" class="form-horizontal" data-ng-init="Get()">
<div id="AngularJSexample" class="table-responsive">
 <table class="table table-bordered" id="AngularJSexample">
<tr>
  <th>Id</th>
  <th>Title</th>
  <th>Booksummary</th>
  <th>ReleaseDate</th>
  <th>Booktype</th>
  <th>URL</th>
 </tr>
 <tr ng-repeat="book in books">
  <td>{{book.Id}}</td>
 <td>{{book.Title }}</td>
 <td>{{book.Booksummary | makeUppercase}}</td>
 <td>{{book.ReleaseDate | date  }}</td>
 <td>{{book.Booktype}}</td>
 <td><a href={{book.storeurl.Url}}>{{book.storeurl.Description}}</a></td>
</tr>
</table>
</div>
</div>

now we need to load AngularJS app on page load as below

<script>
var myAngApp = angular.module('bookapp', []);
....
</script>

Now we need to load controller

<script>
var myAngApp = angular.module('bookapp', []);
myAngApp.controller('bookctrl', function($scope, bookService) {
.....
});
</script>

The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.

So, in view am calling Get() method with the help of ng-init it means that whenever page getting load ng-init will call the Get function.

this Get function triggered in the view and controller will respond to that call and get the data from model and send it back to view.

so now i need to declared Get function/method in the controller as below

<script>
var myAngApp = angular.module('bookapp', []); 
myAngApp.controller('bookctrl', function($scope, bookService) {
$scope.Get=function() {
var getdata=bookService.GetDetails('Bookshelf',$scope);
}
});
</script>

Here am using service as model which is responsible for managing application data.

Here i will show i declared my service.

myAngApp.service('bookService', ['$http', '$q', function ($http, $q) {
.............
}]);


In this service, i will call SharePoint REST API services to get list data.

Here the code to call REST API service to get list data.

myAngApp.service('bookService', ['$http', '$q', function ($http, $q) {

    //Define the http headers
$http.defaults.headers.common.Accept = "application/json;odata=verbose";
$http.defaults.headers.post['Content-Type'] = 'application/json;odata=verbose';
$http.defaults.headers.post['X-RequestDigest'] = $("#__REQUESTDIGEST").val();
$http.defaults.headers.post['If-Match'] = "*";
this.GetDetails= function(listTitle,$scope)
{
var restUrl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('" + listTitle + "')/items";
$http({
method: 'GET',
url: restUrl,
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data) {
$scope.books=data.d.results;
}). error(function (data) {
});
}
}]);


Now, whenever page getting load Get() function is called from view and controller will respond to that call from view and it will get the data from Model i.e. service and return the result to view.

In view, result is object which contains records. To display all the records we use ng-repeater as shown below

<tr ng-repeat="book in books">  
<td>{{book.Id}}</td>
<td>{{book.Title }}</td>
<td>{{book.Booksummary}}</td>
<td>{{book.ReleaseDate | date  }}</td>
<td>{{book.Booktype}}</td>
<td><a href={{book.storeurl.Url}}>{{book.storeurl.Description}}</a></td>
</tr>  


Now the final result will be as shown below




Here complete code




Part-2: How to add new item to SharePoint using REST API and AngularJS...





Thursday, October 15, 2015

How to download deployed solution in SharePoint

Hi,

Usually, we develop solution files and give it to admins for deployment.
Admin guys deploy the solution by adding it to central admin. 

If suppose, Admin wants to move SharePoint from one server to another server then they have to communicate to development team then they will collect all the solution files. Once they got all the solution files then only they can again deploy all the solution in the new server. By that time, developers may miss some solution or they take some time to collect all the solutions. To remove this extra step, admins can also collect all the solutions which are deployed by following the below steps.


1.       Create new folder in C drive and name it as “solutions”.
2.       Now open SharePoint 2013 management shell as administrator and run the below script

$FolderPath = "c:\FormSolutions" 
foreach ($solution in Get-SPSolution) 
   $id = $Solution.SolutionID 
   $title = $Solution.Name 
   $filename = $Solution.SolutionFile.Name 
   $solution.SolutionFile.SaveAs("$FolderPath\$filename"
}

Now all sharepoint solutions deployed from central admin are available at C:\FormSolutions folder.

Enjoy J

Saturday, May 9, 2015

How to show multiple web parts in accordion style in a single page

Hi,

Today i wanna share something related to design part in SharePoint.

I have a page and in that page i need to show multiple webparts. 

Each webpart having more number of records so when i show all the web parts in a single page then it's difficult to see the page and doesnot look good.

show now i want to show all the webparts in accordion style.

Here the steps to create accordion page with multiple webparts.

1. Download the below scripts and style sheet then upload in site assets library.

a. jquery-ui.css
b. jquery.min.js
c. jquery-ui.min.js



2. Now create or go to your page and add all your web parts on to the page and your page looks like this.





3. Now add script editor and add the below script

<link  type="text/css" rel="stylesheet" href="/SiteAssets/jquery-ui.css" />
<script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>
<script type="text/javascript" src="/SiteAssets/jquery-ui.min.js"></script>
<script type="text/javascript">
     jQuery(document).ready(function($) {
         //Add the Web part titles for the webparts that should be displayed in the accordion
        SharePointAccordian(["Holidays","Department","associate"]);
    });

    function SharePointAccordian(webPartTitles)
    {

        for(index in webPartTitles)
        {
            var title = webPartTitles[index];
         
            $("#accordian").append('<h3>'+title+'</h3>');
            $("h2.ms-webpart-titleText span:contains('"+title+"')").each(function(){
                                                             
                if ($(this).text() == title){
                                var outerDiv = $('<div></div>');
                                var outerP = $('<p></p>');
                    var innerItem = $(this).closest("span").hide().closest

("[id^='MSOZoneCell_WebPart']").contents();
                    outerP.append(innerItem);
                    outerDiv.append(outerP);
                                                                             

$("#accordian").append(outerDiv);
                }
            });
        }
       $("#accordian").accordion({ heightStyle: "content" });
    }


</script>
<div id="accordian"></div>


Here ["Holidays","Department","associate"] there are the my web parts' title. So, please change names as per your web parts' title and save the page.



4. Finally, your page looks like this.


Wednesday, May 6, 2015

How to download all deployed wsp solution files in SharePoint



Hi,

Usually SharePoint admin guys takes backup of content DB and all physical files if they want to create replica of existing SharePoint site when actual site is down.

But that will not complete solves the solution, if there are any custom solutions already deployed.

So, admin guys needs those solution files.
To get those solution files which are deployed in SharePoint use the following power shell command to get all deployed solution files.

$pathName = "<PATH to Save files>"
foreach ($solution in Get-SPSolution)  
{
     $solid = $Solution.SolutionID
     $title = $Solution.Name
     $filename = $Solution.SolutionFile.Name
     $solution.SolutionFile.SaveAs("$pathName\$filename")
}

How to check in all checked out files in a SharePoint list using Power shell

Hi,

I have a SharePoint list which has having more than 10 folder and many sub folder in side each folder.

Again each have subfolders and document. Most of the documents are checked out.

Now i need to check in all the checked out files its big task for me to going to each document and checkin and it will takes me days.

I was searching for any other alternatives, so using content structure i can check in multiple documents at a time but i can do it at folder level. Again it will takes more time to check in all the files.

Now, again started searching for another alternative and came up with powershell script.

I got the script and am sharing that script.

*****************************Start of  Script **********************************

[system.reflection.assembly]::LoadWithPartialName("Microsoft.Sharepoint")

$site = New-Object Microsoft.SharePoint.SPSite("http://uday:43662")

$root = $site.allwebs[0]

$folder = $root.GetFolder("Shared Documents")

#============================================================

# Function Set-CheckInFolderItems is a recursive function

# that will CheckIn all items in a list recursively

#============================================================

function Set-CheckInFolderItems([Microsoft.SharePoint.SPFolder]$folder)

{

    # Create query object

    $query = New-Object Microsoft.SharePoint.SPQuery

     $query.Folder = $folder
  
    # Get SPWeb object

    $web = $folder.ParentWeb
  
    # Get SPList

    $list = $web.Lists[$folder.ParentListId]

    # Get a collection of items in the specified $folder

    $itemCollection = $list.GetItems($query)

    # If the folder is the root of the list, display information

    if ($folder.ParentListID -ne $folder.ParentFolder.ParentListID)

    {
         Write-Host("Recursively checking in all files in " + $folder.Name)
     }

    # Iterate through each item in the $folder

    foreach ($item in $itemCollection)

    {

        # If the item is a folder

        if ($item.Folder -ne $null)

        {

            # Write the Subfolder information

            Write-Host("Folder: " + $item.Name + " Parent Folder: " + $folder.Name)

            # Call the Get-Items function recursively for the found sub-solder

            Set-CheckInFolderItems $item.Folder

        }

        # If the item is not a folder

        if ($item.Folder -eq $null)

        {

            if ($item.File.CheckOutType -ne "None")

            {

                if ($item.File.Versions.Count -eq 0)

                {

                    # Check in the file

Write-Host "Check in File: "$item.Name" Version count " $item.File.Versions.Count -foregroundcolor Green

                    $item.File.CheckIn("Bulk check in By Administrator")

                }

            }

        }

    }

    $web.dispose()

    $web = $null

}

Set-CheckInFolderItems $folder

******************************  End of Script *************************************