Angular JS Code to read SharePoint list

Hi folks,

I did a learning POC to fetch items from a SharePoint list using REST API and then display them in HTML table using Angular JS. Here is the code below.

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

<script>

console.log(GetSiteUrl());


var spApp=angular.module('spApp',[]);
spApp.controller('spListCtrl',function($scope, $http){
$http(
{
method: "GET",
url: GetSiteUrl()+"/_api/web/lists/getByTitle('SAP Batch Jobs')/items?$select=Job%5Fx0020%5FName,Title,Client%5Fx0020%5FNumber,Location",
headers: { "Accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config){
$scope.SAP = data.d.results;
}).error(function (data, status, headers, config){
});
});

function GetSiteUrl(){
var urlParts = document.location.href.split("/");
return urlParts[0] + "//" + urlParts[2] + "/" + urlParts[3] + "/" + urlParts[4];
}
</script>

<div ng-app="spApp">
<div ng-controller="spListCtrl">
<table width="100%" cellpadding="10" cellspacing="2">
<thead>
<th>Job Name</th>
<th>Job Status</th>
<th>Client Number</th>
<th>Location</th>
</thead>
<tbody>
<tr ng-repeat="s in SAP">
<td>{{s.Job_x0020_Name}}</td>
<td>{{s.Title}}</td>
<td>{{s.Client_x0020_Number}}</td>
<td>{{s.Location}}</td>
</tr>
</tbody>
</table>
</div>
</div>


Preferred links:
https://saikiran78.wordpress.com/2014/01/16/first-move-towards-angularjs-with-sharepoint-2013/
http://www.dotnetcurry.com/sharepoint/1009/sharepoint-webpart-angularjs-knockoutjs

Understanding Managed Paths in SharePoint

When we create Site Collections in Sharepoint web applications, they are created with URL as

http://servername:port/sites/

To have a specific URL other than /sites we would have to create a Managed Path.

When we create a Managed Path, we have two options:   Explicit Inclusion
                                                                                           Wildcard Inclusion


Explicit Inclusion:
When we are not planning to create further site collections under a specified managed path, then we use this option. Explicit Inclusion Managed paths allows in creation of only one site collection at the exact given URL.
In our case fahadexplicit would be the only site collection that can be created. SharePoint will allow creating only one site collection within this Managed Path.

The URL would be: http://servername:port/fahadexplicit


Wildcard Inclusion:
When we want to create more than one site collection under a specific managed path, we use this option. Wildcard Inclusion Managed Paths allow unlimited site collection to be created under a given URL.
In our case under fahadwildcard, we can create any number of site collections.

The URL of these site collections would be as below:

http://servername:port/fahadwildcard/sitecollection1
http://servername:port/fahadwildcard/sitecollection2



Preferred links:
http://www.sharepointpitstop.com/2012/11/managedpath-explicit-wildcard-inclusions.html
http://sureshpydi.blogspot.in/2013/03/share-point-managed-paths.html

Configuring Forms Based Authentication in SharePoint

Hi Guys,

I had a requirement in my project to allow external users to access our on-premise SharePoint site. It is difficult and need to follow many steps.

We need to implement Forms Based Authentication to allow external users access the site.
I've followed the below steps to achieve the functionality.

Steps:
1. Creating a Membership Database.

2. Add Users to the Membership Database.

3. Editing the Web.Config files

4. Configuring SharePoint.


For full explanation follow the below link

http://blogs.visigo.com/chriscoulson/configuring-forms-based-authentication-in-sharepoint-2013-part-1-creating-the-membership-database/

Create a page layout in SharePoint 2013 (News Page Layout)

Hi Folks,

I created News Page layout for my project. For that, I've followed the below steps to achieve the functionality.

Create a Page layout based on your site content type

1. Create Site Columns >> Add them to the group.
2. Create Site content type, Select “Page Layout Content Type” and “Article Page” as parent.
3. Add the new site columns to the Site Content Type.
4. Create a Page layout (Design Manager >> Edit Page Layout >>Create Page Layout >> Provide name and select your site Content Type).
5. Create Page in Pages Library >> Select the new page layout you’ve created.
6. Edit Properties of the page and provide values for the fields.
7. Check-in the page.
8. Open the page. You’ll get all the values.
9. Edit the page layout in designer according to your design

Make different type SharePoint fields as Read-Only

Hi folks,

Please see the below function which is meant to make different type of SharePoint fields as Read-Only.

function SetReadOnlycolumn(){

$("input[title='FieldName1']").attr("readonly","true"); ////Single-line of text field

$("select[title='FieldName2']").attr("disabled","disabled"); //Choice field

$("input[title='FieldName3'], textarea").attr("readonly","readonly"); //Multiple-lines of text field

$("#ctl00_ctl40_g_46606705_ff1e_460d_8675_2f9815d404c6_ff61_ctl00_ctl00_BooleanField").attr("disabled", "disabled"); // Yes/No field----Field4

$("input[title='FieldName5']").attr("readonly","true"); // Number field

}

Also, find the below syntax to block/disable the fields of type input(textbox,  checkbox), select(dropdown / choice field) and textarea (Multiple Lines of text) in one step



$('#DivId').find('input, textarea, select').attr('disabled','disabled');

DivId is the ID of the div tag.

Note: Don't use <div> tag within <table> or <tr><td> tags. In that case, please use <tbody> within <table> or <tr><td> tags.

PeoplePicker Field knowledge

Hi folks,

Hope..all are doing good. Let me explain you the issues I faced in retrieving the value of PeoplePicker fields.

It is Office 365 site. I was working in SharePoint list edit form and trying to fetch the values from different list based on primary key. Well, text and choice fields are cool and I didn't face issues in getting those. But when it comes to "Person or group" fields, they were hitting my head like anything. I googled many things and tried methods like 'get_lookupValue()' and 'get_lookupId' but all resulted into an error. Even the method 'get_email()' thrown an error of "undefined function".

Later, I checked the peoplepicker field settings. Please check the image below.

In Person or Group field settings, I've selected 'No' in "Allow multiple selections" and tested with the same functions stated above. It worked!!!!!!!!!!!!!!!!!!
As per the system, only 1 name is allowed in the PeoplePicker fields so I preferred to do so.

I'll research from my side in future and continue adding to this post on how to read peoplepicker field if "Allow multiple selections" is selected as 'Yes'

Thanks for reading.

SharePoint Blogs: List view issues with lookup and workflow columns

SharePoint Blogs: List view issues with lookup and workflow columns: Hi, I found an issue in my project when the number of lookup and workflow columns exceeded the limit. Please see below. I reduced t...