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…