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.

                                             


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...

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…

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.

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 *************************************

Slide library missing in SharePoint 2013

As per Microsoft's, Slide library has been deprecated in SharePoint 2013.

Here the reference link.

Even if you try to search for template in add an app, it will show the below screen.

What to do next?? can not i create slide library in SharePoint 2013???

NO, we can create slide library in SharePoint 2013 by using the below URL

http://<SITE URL>/_layouts/15/slnew.aspx?FeatureId={0be49fe9-9bc9-409d-abf9-702753bd878d}&ListTemplate=2100

It will ask for list name and description. Once you have clicked on Create, it will create and it looks like as below.