Sithik Blog's: 2015

Saturday, 14 March 2015

CSOM:- Programmatically Get SharePoint list person or group column value in SharePoint using CSOM

public static string GetUserFieldType(ClientContext ctx, FieldUserValue value)
{
var objList = ctx.Site.RootWeb.SiteUserInfoList;
var userInfo = objList.GetItemById(value.LookupId);
ctx.Load(userInfo, i => i.ContentType);
ctx.ExecuteQuery();
return userInfo.ContentType.Name;
}

public void Getpersonorgroupvalue()
{
using (ClientContext clientContext = new ClientContext("SiteCollectionUrl"))
{
clientContext.Credentials = new NetworkCredential("UserName", "Password", "DomainName");
Web web = clientContext.Web;
clientContext.Load(web);
clientContext.ExecuteQuery();
var list = web.Lists.GetByTitle("ListName");
CamlQuery camlQuery = new CamlQuery();
camlQuery.ViewXml = @"<View></View>";
Microsoft.SharePoint.Client.ListItemCollection lstCollection = list.GetItems(camlQuery);
clientContext.Load(lstCollection);
clientContext.ExecuteQuery();
FieldUserValue[] objfieldvalue = lstCollection[0]["PersonGroupColumnName"] as FieldUserValue[];

if (objfieldvalue != null && objfieldvalue.Length > 0)
{
for (int UserIndex = 0; UserIndex < objfieldvalue.Length; UserIndex++)
{
string type = GetUserFieldType(clientContext, objfieldvalue[UserIndex]);
break;
}
}
for (int UserIndex = 0; UserIndex < objfieldvalue.Length; UserIndex++)
{
string UserId =Convert.ToString(objfieldvalue[UserIndex].LookupValue);
break;
}

}
}

Sunday, 1 March 2015

SharePoint Angular Js :- Add items to SharePoint List using Angular js Example

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Create one Content Editor WebPart and paste the below code

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
function EmpCtrl($scope) {

$scope.emp = { firstName: "", lastName: "", location: "" };
$scope.addEmpInfo = function ($event) {
var x = $scope.emp;
$event.preventDefault();

var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('Emp');
var listItemInfo = new SP.ListItemCreationInformation();
var listItem = list.addItem(listItemInfo);
listItem.set_item('Title', 'Mr');
listItem.set_item('FirstName', x.firstName);
listItem.set_item('LastName', x.lastName);
listItem.set_item('Location', x.location);
listItem.update();
clientContext.executeQueryAsync(
Function.createDelegate(this, onQuerySucceeded),
Function.createDelegate(this, onQueryFailed)
);

};

onQuerySucceeded = function () {
alert('Item Added Successfully');
}

onQueryFailed = function (sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
}
</script>

<h1>Add item to sharepoint list using Angular Js</h1>
<br />
<div ng-app="">
<div ng-controller="EmpCtrl">

<table>
<tr>
<td>
<strong>First Name</strong>
</td>
<td>
<input type="text" ng-model="emp.firstName" />
</td>
</tr>

<tr>
<td>
<strong>Last Name</strong>
</td>
<td>
<input type="text" ng-model="emp.lastName" />
</td>
</tr>

<tr>
<td>
<strong>Location</strong>
</td>
<td>
<input type="text" ng-model="emp.location" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Save" ng-click="addEmpInfo($event)" />
</td>
</tr>
</table>

</div>
</div>

output:-

SharePoint Angular Js :- Get items from SharePoint List using Angular js Example

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Create one Content Editor WebPart and paste the below code

<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){

var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");

for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>

<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<script>

var myAngApp = angular.module('SharePointAngApp', []);
myAngApp.controller('spCustomerController', function ($scope, $http) {
$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Emp')/items?$select=FirstName,LastName,Location",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.customers = data.d.results;
}).error(function (data, status, headers, config) {

});
});

</script>

<h1>SharePoint with Angular js Example </h1>

<div ng-app="SharePointAngApp" class="row">
<div ng-controller="spCustomerController" class="span10">

<table class="altrowstable" id="alternatecolor">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Location</th>

</tr>
<tr ng-repeat="customer in customers">
<td>{{customer.FirstName}}</td>
<td>{{customer.LastName}}</td>
<td>{{customer.Location}}</td>
</tr>
</table>
</div>
</div>

output:-

SharePoint Knockout js :- Get items from SharePoint List using Knockout js

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Create one Content Editor WebPart and paste the below code

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://SiteCollectionUrl/sites/DevSite/Style%20Library/knockout-3.3.0.js"></script>
<script src="https://SiteCollectionUrl/sites/DevSite/Style%20Library/ko.sp-1.0.min.js"></script>

<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){

var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");

for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>

<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>

<script>

ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");
var completeEmployeeList = null;

function EmployeeList(title, firstname, lastname, location) {
var self = this;
self.Title = title;
self.FirstName = firstname;
self.LastName = lastname;
self.Location = location;
}


function EmployeeListViewModel() {
var self = this;

self.Employees = ko.observableArray([]);
self.AddEmployees = function (title, firstname, lastname, location) {
self.Employees.push(new EmployeeList(title, firstname, lastname, location));
}
}

function MainFunction() {
completeEmployeeList = new EmployeeListViewModel();
retrieveListItems();
ko.applyBindings(completeEmployeeList);
}

function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Emp');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var currentItem = listItemEnumerator.get_current();
completeEmployeeList.AddEmployees(currentItem.get_item("Title"), currentItem.get_item("FirstName"), currentItem.get_item("LastName"), currentItem.get_item("Location"));
}
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

<div id="divEmployeeList">

<h2>SharePoint with Knockout js Example</h2>
<br />

<table class="altrowstable" id="alternatecolor">
<thead>
<tr>
<th>Title</th>
<th>FirstName</th>
<th>LastName</th>
<th>Location</th>
</tr>
</thead>

<tbody data-bind="foreach: Employees">
<tr>
<td data-bind="text: Title"></td>
<td data-bind="text: FirstName"></td>
<td data-bind="text: LastName"></td>
<td data-bind="text: Location"></td>
</tr>
</tbody>
</table>

</div>

output:-

Saturday, 14 February 2015

Add item to sharepoint apps using napa office 365 clientWebPart

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Paste the below code in ClientWebpart.aspx

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" language="C#" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<WebPartPages:AllowFraming runat="server" />

<html>
<head>

<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>


<link rel="Stylesheet" type="text/css" href="../Content/App.css" />

<script type="text/javascript">
'use strict';

// Set the style of the client web part page to be consistent with the host web
(function () {
var hostUrl = '';
if (document.URL.indexOf('?') != -1) {
var params = document.URL.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var p = decodeURIComponent(params[i]);
if (/^SPHostUrl=/i.test(p)) {
hostUrl = p.split('=')[1];
document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
break;
}
}
}
if (hostUrl == '') {
document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
}
})();
</script>
</head>

<body>

<table align="center">
<tr>
<td>
<label>First Name</label>
</td>
<td>
<input id="firstname" type="text" />
</td>
</tr>
<tr>
<td>
<label>Last Name</label>
</td>
<td>
<input class="lastname type="text" />
</td>
</tr>
<tr>
<td>
<label>Location</label>
</td>
<td>
<input class="Location type="text" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Save" onclick="SetEmpData();" />

</td>
</tr>
</table>

</body>
<script type="text/javascript">
var context;
var web;
var list;
var listitem;


function SetEmpData()
{
context = SP.ClientContext.get_current();
var url = "https://sharepoint22.sharepoint.com/sites/DevSite";
var parentCtx = new SP.AppContextSite(context, url);
web = parentCtx.get_web();
context.load(web);
list = web.get_lists().getByTitle('Emp');
var itemCreateInfo = new SP.ListItemCreationInformation();
var listItem = list.addItem(itemCreateInfo);
listItem.set_item("Title","Mr");
listItem.set_item("FirstName", $('#firstname').val());
listItem.set_item("LastName", $('.lastname').val());
listItem.set_item("Location", $('.Location').val());
listItem.update();
context.load(listItem);
context.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded(sender, args) {
alert('Item Added SuccessFully');
}

function onQueryFailed(sender, args) {
alert(args.get_message());

}

</script>

</html>