SharePoint & .Net quick samples & tricks

Tuesday, December 29, 2015

CRUD OPERATIONS USING SHAREPOINT 2013 RESTAPI & ANGULARJS (PART3)

First let's recap what we do in Part1 which we made an overview about technology used then we explain details about design then we finished Part2 by design all generic JavaScript we will use and layouts , all of these steps made to achieve the example below

i'm an employee in company and need to request vacation so i will log into sharepoint with my account and fill form then send vacation request , i need to see process flow where it located now or who is responsible for take an action for my task now, in other side if i'm employee who has this task now i need to respond on this task.

In this part we will implement lists that we will save data on it then we will implement both controllers.js and services.js for vacation module to finish our Demo :)

To implement our demo we will create sharepoint list "VacationType" to store all types of vacations and "EmployeeVacation" to store submitted employee vacation.

First we will create our sharepoint lists please follow following steps :

create sharepoint project "Demo.Employee".
add new list item "VacationType"
add new list item "EmployeeVacation"

add fields below to list :

DateFrom : date time field to store vacation start date.
DateTo: datetime field to store vacation end date.
VacationType: lookup field to "VacationType" list to set type of vacation.

add event receiver to list to show MyTasks functionality in our demo in this event receiver we will assign task to logged in user once item added , you can replace event receiver with your workflow process if you have.

code to assign task to logged in user

	public class EmployeeVacationEventReceiver : SPItemEventReceiver
	{
	/// <summary>
	/// An item was added.
	/// </summary>
	public override void ItemAdded(SPItemEventProperties properties)
	{
	SPWeb web = properties.Web;
	SPList list = web.Lists.TryGetList("Tasks");
	if (list != null)
	{
	// get the SharePoint group
	SPUser user = web.CurrentUser;

	// Create a new task item
	SPListItem task = list.Items.Add();
	SPFieldUserValue assignToGroup = new SPFieldUserValue(web, user.ID, user.Name);
	task["AssignedTo"] = assignToGroup;
	task["Title"] = properties.ListItem["Title"];
	task.Update();
	}

	base.ItemAdded(properties);
	}


	}

view raw EmployeeVacationEventReceiver.cs hosted with ❤ by GitHub

add mapped folder to sharepoint Style Folder then create folders like image below :

services folder will contains all angular employee services

create "EmployeeVacationService.js"

contain all angular controller functionality to add new vacation request.

	"use strict";
	(function () {
	angular.module("angularApp")
	.factory("EmployeeVacationService", ["baseSvc", function (baseService) {

	var listEndPoint = '/_api/web/lists';

	//get all employee vacation data
	var getAll = function () {
	var query = listEndPoint + "/GetByTitle('EmployeeVacation')/Items";
	return baseService.getRequest(query);
	};


	//get employee vacation data created by loggedin user
	var getEmployeeVacationRequestCreatedByLoggedinUser = function () {
	var query = listEndPoint + "/GetByTitle('EmployeeVacation')/Items/?$select=ID,Title,FromDate,ToDate,Created,VacationType/Id,VacationType/Title&$expand=VacationType";
	return baseService.getMyRequest(query);
	};


	//get employee vacation tasks assigned to loggedin user
	var getEmployeeVacationRequestAssignedToLoggedinUser = function () {
	return baseService.getAssignedToUserRequest('Workflow Tasks');
	};

	//add new employee vacation
	var addNew = function (EmployeeVacation) {
	var data = {
	__metadata: {
	'type': 'SP.Data.EmployeeVacationListItem'
	},
	Title: EmployeeVacation.Title,
	FromDate: EmployeeVacation.EmployeeVacationFromDate,
	ToDate: EmployeeVacation.EmployeeVacationToDate,
	VacationTypeId: EmployeeVacation.EmployeeVacationType.ID,
	};

	var url = listEndPoint + "/GetByTitle('EmployeeVacation')/Items";
	return baseService.postRequest(data, url);
	};

	//get employee vacation by ID
	var getById = function (EmployeeVacationRequestID) {

	var query = listEndPoint + "/GetByTitle('EmployeeVacation')/Items(" + EmployeeVacationRequestID + ")?$select=Title,FromDate,ToDate,VacationType/Id,VacationType/Title,*&$expand=VacationType";

	return baseService.getRequest(query);
	};

	//get employee vacation by ID
	var getEmployeeVacationTaskHistoryByItemId = function (EmployeeVacationRequestID) {

	var query = listEndPoint + "/GetByTitle('Workflow Tasks')/Items?$select=*,Modified,AssignedTo/Id,AssignedTo/Title&$expand=AssignedTo/Id";

	return baseService.getRequest(query);
	};

	//update employee vacation request
	var update = function (EmployeeVacationRequest) {
	var data = {
	__metadata: { 'type': 'SP.Data.EmployeeVacationListItem' },
	Title: EmployeeVacationRequest.Title
	};
	var url = listEndPoint + "/GetByTitle('EmployeeVacation')/GetItemById(" + EmployeeVacationRequest.ID + ")";
	return baseService.updateRequest(data, url);
	};

	//remove specific employee vacation
	var remove = function (EmployeeVacationRequestID) {
	var url = listEndPoint + "/GetByTitle('EmployeeVacation')/GetItemById(" + EmployeeVacationRequestID + ")";
	return baseService.deleteRequest(url);
	};

	return {
	getAll: getAll,
	getEmployeeVacationRequestCreatedByLoggedinUser: getEmployeeVacationRequestCreatedByLoggedinUser,
	getEmployeeVacationRequestAssignedToLoggedinUser: getEmployeeVacationRequestAssignedToLoggedinUser,
	addNew: addNew,
	getById: getById,
	getEmployeeVacationTaskHistoryByItemId: getEmployeeVacationTaskHistoryByItemId,
	update: update,
	remove: remove


	};
	}]);
	})();

view raw EmployeeVacationService.js hosted with ❤ by GitHub

create "VacationTypeService.js"

get data from vacation type sharepoint list

	"use strict";
	(function () {
	angular.module("angularApp")
	.factory("VacationTypeService", ["baseSvc", function (baseService) {

	var listEndPoint = '/_api/web/lists';

	//get all media types data
	var getAll = function () {
	var query = listEndPoint + "/GetByTitle('VacationType')/Items?$select=Title,ID";
	return baseService.getRequest(query);
	};

	return {
	getAll: getAll
	};
	}]);
	})();

view raw VacationTypeService.js hosted with ❤ by GitHub

controllers folder will contains all angular employee controllers.

create "AddEmployeeVacationController.js"

functionality for add employee vacation request.

	"use strict";
	(function () {
	angular.module("angularApp")
	.controller("AddEmployeeVacationContorller", ["$scope", "EmployeeVacationService", "VacationTypeService", "$location", "toaster", "$http", 'providedValue', 'UtilityService',
	function ($scope, employeeVacationService, vacationTypeService, $location, toaster, $http, providedValue, UtilityService) {


	/**** variables declaration *********/

	$scope.EmployeeVacationValidationMessage = {

	EmployeeVacationFieldRequired: providedValue.FieldRequired,
	EmployeeVacationCheckDate: providedValue.InvalidDateRange,
	};

	/**** end variables declaration *********/


	//get vacation types from list
	vacationTypeService.getAll()
	.then(function (response) {
	$scope.vacationTypeList = response.d.results;
	$scope.EmployeeVacationType = $scope.vacationTypeList[0];
	});

	$scope.addEmployeeVacation = function (EmployeeVacationRequest) {

	if ($scope.addVacationForm.$valid) {

	employeeVacationService.addNew(EmployeeVacationRequest)
	.then(function (EmployeeVacationRequest) {
	toaster.success({ body: providedValue.AddSuccessMessage })
	$location.path("/vacation/myRequests");
	}),
	function (err) {
	toaster.error({ body: providedValue.AddFailedMsg });
	};
	} else {
	toaster.error({ body: providedValue.ValidationFailed });
	}
	};

	$scope.CancelAddEmployeeVacation = function (EmployeeVacation) {
	toaster.info({ body: providedValue.CancelMessage });
	$scope.resetDDL(EmployeeVacation);
	$location.path("/vacation/new");
	}

	$scope.resetDDL = function (EmployeeVacation) {
	EmployeeVacation.EmployeeVacationSummary = null;
	EmployeeVacation.Title = null;
	EmployeeVacation.EmployeeVacationFromDate = null;
	EmployeeVacation.EmployeeVacationToDate = null;


	if (typeof (EmployeeVacation.EmployeeVacationType) != 'undefined')
	EmployeeVacation.EmployeeVacationType = $scope.vacationTypeList[0]


	}

	}]);
	})();

view raw AddEmployeeVacationController.js hosted with ❤ by GitHub

create "AssignedEmployeeVacationController.js"

controller to get all tasks assigned to current logged in user

	"use strict";
	(function () {
	angular.module("angularApp")
	.controller("AssignedEmployeeVacationController", ["$scope", "EmployeeVacationService", "UtilityService", "toaster", "providedValue", "NgTableParams", "$filter",
	function ($scope, employeeVacationService, UtilityService, toaster, providedValue, NgTableParams, $filter) {

	var baseUrl = _spPageContextInfo.webAbsoluteUrl;
	var taskListId;
	$scope.isopen = false;

	UtilityService.getListID("Workflow Tasks").then(function (response) {
	taskListId = response.d.Id;
	});


	var getAssignedEmployeeVacationRequestService = employeeVacationService.getEmployeeVacationRequestAssignedToLoggedinUser();

	getAssignedEmployeeVacationRequestService.then(function (response) {


	var assignedEmployeeVacationRequestResult = response.d.results;

	//check if taskid is valid and returned from server befor begin retrieve data
	if (typeof (taskListId) != 'undefined') {
	var formatedAssignedToEmployeeVacationResult = [];

	//add data to temp variable to prepare it for grouping
	$.each(assignedEmployeeVacationRequestResult, function (index, item) {

	var tmp = {
	AssignedTo: item.AssignedTo,
	CreatedBy: item.Author,
	Created: UtilityService.formateDate(item.Created),
	ID: item.ID,
	StartDate: UtilityService.formateDate(item.StartDate),
	Title: item.Title,
	EditFormUrl: baseUrl + "/" + item.ContentType.EditFormUrl + "?List=" + taskListId + "&ID=" + item.ID

	};
	formatedAssignedToEmployeeVacationResult.push(tmp);
	});


	if (formatedAssignedToEmployeeVacationResult.length != 0) {
	//group data by start date
	$scope.groupedEmployeeVacationResult = UtilityService.groupBy(formatedAssignedToEmployeeVacationResult, function (item) {
	return [item.StartDate];
	});

	//generate table for each grouped items
	$scope.tabledata = [];
	var counter = 0;
	for (var i = 0; i < $scope.groupedEmployeeVacationResult.length; i++) {

	$scope.tabledata[i] = {};

	$scope.tabledata[i].tableParams = new NgTableParams({
	page: 1,
	count: 5
	, sorting: {
	Title: 'asc',
	}
	}, {

	getData: function ($defer, params) {

	var orderedData;
	var resultData = [];
	//tableindex will be !=undefined once user click to accordion
	if (typeof ($scope.tableIndex) != 'undefined')
	resultData = $scope.groupedEmployeeVacationResult[$scope.tableIndex].Value;
	else
	resultData = $scope.groupedEmployeeVacationResult[counter++].Value

	params.total(resultData.length);


	//use build-in angular filter and sorting
	orderedData = params.sorting() ?
	$filter('orderBy')(resultData, params.orderBy()) :
	resultData;

	$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

	}
	});
	}
	}
	else {
	toaster.error({ body: providedValue.AssignedRequestNotFound });
	}
	} else {
	toaster.error({ body: providedValue.GeneralError });
	}
	});

	//function to get current clicked table index and grouped data to reload table
	$scope.GetSelectedDataGroup = function (dataGroup, index) {
	$scope.filteredKey = dataGroup.key;
	$scope.tableIndex = index;
	$scope.tabledata[index].tableParams.reload();
	}


	}]);
	})();

view raw AssignedEmployeeVacationController.js hosted with ❤ by GitHub

create "DetailsEmployeeVacationController.js"

controller to show all details about selected vacation request.

	"use strict";
	(function () {
	angular.module("angularApp")
	.controller("DetailsEmployeeVacationContorller", ["$scope", "$routeParams", "EmployeeVacationService", "$location", "toaster", "UtilityService",
	function ($scope, $routeParams, employeeVacationService, $location, toaster, UtilityService) {

	var EmployeeVacationId;

	if (typeof ($scope.selectedEmployeeVacationItemId) != 'undefined') {
	EmployeeVacationId = $scope.selectedEmployeeVacationItemId;
	}

	employeeVacationService.getById(EmployeeVacationId)
	.then(function (EmployeeVacationRequest) {
	var EmployeeVacationRequestResult = EmployeeVacationRequest.d;

	$scope.vacation = {
	Created: UtilityService.formateDate(EmployeeVacationRequestResult.Created),
	Title: EmployeeVacationRequestResult.Title,
	FromDate: UtilityService.formateDate(EmployeeVacationRequestResult.FromDate),
	ToDate: UtilityService.formateDate(EmployeeVacationRequestResult.ToDate),
	VacationType: EmployeeVacationRequestResult.VacationType.Title
	};
	}),
	function (err) {
	toaster.error({ body: providedValue.GeneralError });
	};
	}]);
	})();

view raw DetailsEmployeeVacationController.js hosted with ❤ by GitHub

create "MyEmployeeVacationController.js"

controller to get all vacations requested by current logged in user.

	"use strict";
	(function () {
	angular.module("angularApp")
	.controller("MyEmployeeVacationController", ["$scope", "EmployeeVacationService", "UtilityService", "toaster", "providedValue", "$modal", "NgTableParams", "$filter",
	function ($scope, employeeVacationService, UtilityService, toaster, providedValue, $modal, NgTableParams, $filter) {


	$scope.showAccordion = true;
	var getMyEmployeeVacationRequestService = employeeVacationService.getEmployeeVacationRequestCreatedByLoggedinUser();


	getMyEmployeeVacationRequestService.then(function (response) {

	var myEmployeeVacationRequestResult = response.d.results;

	var formatedMyEmployeeVacationResult = [];
	var i = 1;
	//add retrieved data in temp vatiable preparing it for grouping
	$.each(myEmployeeVacationRequestResult, function (index, item) {

	var tmp = {
	// Statues: item.employee,
	FromDate: item.FromDate,
	displayedFromDate: UtilityService.formateDate(item.FromDate),
	ID: item.ID,
	ToDate: item.ToDate,
	displayedToDate: UtilityService.formateDate(item.ToDate),
	Title:item.Title,
	VacationType: { Title: item.VacationType.Title, ID: item.VacationType.ID },
	itemIndex: i++
	};

	formatedMyEmployeeVacationResult.push(tmp);
	});

	//group retrieved data by media coverage type
	if (myEmployeeVacationRequestResult.length != 0) {

	$scope.groupedEmployeeVacationResult = UtilityService.groupBy(formatedMyEmployeeVacationResult, function (item) {
	return [item.VacationType.Title];
	});


	//generate table for each grouped items
	$scope.tabledata = [];
	var counter = 0;
	for (var i = 0; i < $scope.groupedEmployeeVacationResult.length; i++) {

	$scope.tabledata[i] = {};

	$scope.tabledata[i].tableParams = new NgTableParams({
	page: 1,
	count: 5
	, sorting: {
	ID: 'asc',
	EmployeeVacationFromDate: 'desc',
	EmployeeVacationToDate: 'desc'
	}
	}, {

	getData: function ($defer, params) {

	var orderedData;
	var resultData = [];
	//tableindex will be !=undefined once user click to accordion
	if (typeof ($scope.tableIndex) != 'undefined')
	resultData = $scope.groupedEmployeeVacationResult[$scope.tableIndex].Value;
	else
	resultData = $scope.groupedEmployeeVacationResult[counter++].Value

	params.total(resultData.length);

	//use build-in angular filter and sorting
	orderedData = params.sorting() ?
	$filter('orderBy')(resultData, params.orderBy()) :
	resultData;

	if (orderedData.length == 0)
	$scope.showAccordion = false;
	else
	$scope.showAccordion = true;

	$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

	}
	});
	}
	}
	else {
	toaster.error({ body: providedValue.MyRequestNotFound });
	}
	});

	$scope.OpenTaskStatus = function (size, itemId, htmlFile, controllerName) {
	$scope.selectedEmployeeVacationItemId = itemId;

	$scope.$taskStatusModalInstance = $modal.open({
	templateUrl: '../../_layouts/15/Demo.CommonUI/EmployeeVacation/' + htmlFile + '.html',
	controller: controllerName,
	size: size,
	keyboard: false,
	backdrop: 'static',
	scope: $scope
	});

	$scope.$taskStatusModalInstance.result.then(function (selectedItem) {
	console.log(selectedItem);
	}, function (err) {
	console.log(err);
	});
	}


	// close add user dialog on cancel
	$scope.CancelTaskStatus = function () {
	$scope.$taskStatusModalInstance.close();
	}

	//function to get current clicked table index and grouped data to reload table
	$scope.GetSelectedDataGroup = function (dataGroup, index) {
	$scope.filteredKey = dataGroup.key;
	$scope.tableIndex = index;
	$scope.tabledata[index].tableParams.reload();
	}


	}]);
	})();

view raw MyEmployeeVacationController.js hosted with ❤ by GitHub

create "ProcessEmployeeVacationController.js"

controller to show the current process status of selected vacation.

	"use strict";
	(function () {
	angular.module("angularApp")
	.controller("ProcessEmployeeVacationContorller", ["$scope", "$routeParams", "EmployeeVacationService", "$location", "toaster", "providedValue", "ngTableParams", "UtilityService",
	function ($scope, $routeParams, employeeVacationService, $location, toaster, providedValue, ngTableParams, UtilityService) {

	var EmployeeVacationId;

	if (typeof ($scope.selectedEmployeeVacationItemId) != 'undefined')
	EmployeeVacationId = $routeParams.selectedEmployeeVacationItemId;
	else {
	toaster.error({ body: providedValue.GeneralError });
	return;
	}

	$scope.ProcessEmployeeVacationRequestTableParams = new ngTableParams({
	page: 1,
	count: 10000
	}, {

	getData: function ($defer, params) {

	var ProcessEmployeeVacationRequestService = employeeVacationService.getEmployeeVacationTaskHistoryByItemId(EmployeeVacationId);


	ProcessEmployeeVacationRequestService.then(function (EmployeeVacationRequest) {

	var processEmployeeVacationRequestResult = EmployeeVacationRequest.d.results;
	params.total(processEmployeeVacationRequestResult.length);

	if (processEmployeeVacationRequestResult.length != 0) {

	var formatedProcessEmployeeVacationResult = [];
	$.each(processEmployeeVacationRequestResult, function (index, item) {
	if (item.Status != "Completed") item.Modified = item.DueDate;
	var tmp = {
	Title: item.Title,
	AssignedTo: item.AssignedTo.Title,
	StartDate: UtilityService.formateDate(item.StartDate),
	DueDate: UtilityService.formateDate(item.Modified),
	WorkflowOutcome: item.WorkflowOutcome,
	ApproverComments: item.ApproverComments
	};
	formatedProcessEmployeeVacationResult.push(tmp);
	});

	// use build-in angular filter
	var orderedData = formatedProcessEmployeeVacationResult;

	$defer.resolve(orderedData);
	}
	else {
	toaster.error({ body: providedValue.NoRecordFound });
	}
	});
	}
	});



	}]);
	})();

view raw ProcessEmployeeVacationController.js hosted with ❤ by GitHub

create visual webPart(farm solution) "EmployeeVacationWebPart" to render views

open "EmployeeVacationWebPartUserControl.ascx"

add all file references to webpart like below :

	<!-- Styles -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.css" rel="stylesheet" />
	<link href="../_layouts/15/STYLES/Demo/vendor/loader.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" runat="server" id="xlinkCSS" href="../_layouts/15/STYLES/Demo/vendor/jquery.datetimepicker.css" />
	<!-- end Styles -->


	<meta name="WebPartPageExpansion" content="full" />

	<!-- sharepoint -->
	<script type="text/javascript" src="../_layouts/15/sp.runtime.js"></script>
	<script type="text/javascript" src="../_layouts/15/sp.js"></script>
	<script type="text/javascript" src="../_layouts/15/SP.RequestExecutor.js"></script>
	<!--end sharepoint -->

	<!-- common scripts -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<script src="../_layouts/15/STYLES/Demo/vendor/httpLoader.js"></script>
	<script src="../_layouts/15/STYLES/Demo/vendor/httpMethodInterceptor.js"></script>
	<script src="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<!-- end common scripts -->

	<!-- general angular scripts -->
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script>
	<script src="../_layouts/15/STYLES/Demo/vendor/dialogs.js"></script>
	<script src="../_layouts/15/STYLES/Demo/app.js"></script>
	<script src="../_layouts/15/STYLES/Demo/Messages.js"></script>
	<script src="../_layouts/15/STYLES/Demo/Directives.js"></script>
	<script src="../_layouts/15/STYLES/Demo/services/baseSvc.js"></script>
	<script src="../_layouts/15/STYLES/Demo/services/UtilityService.js"></script>
	<script src="../_layouts/15/STYLES/Demo/services/GeneralSPServices.js"></script>
	<!-- end general angular scripts -->

	<!--Media coverage Request -->
	<script src="../_layouts/15/STYLES/Employee/Media/MediaCoverage/services/EmployeeVacationService.js"></script>
	<script src="../_layouts/15/STYLES/Employee/Media/MediaCoverage/services/VacationTypeService.js"></script>
	<script src="../_layouts/15/STYLES/Employee/Media/MediaCoverage/controllers/AddEmployeeVacationController.js"></script>
	<script src="../_layouts/15/STYLES/Employee/Media/MediaCoverage/controllers/AssignedEmployeeVacationController.js"></script>
	<script src="../_layouts/15/STYLES/Employee/Media/MediaCoverage/controllers/DetailsEmployeeVacationController.js"></script>
	<script src="../_layouts/15/STYLES/Employee/Media/MediaCoverage/controllers/MyEmployeeVacationController.js"></script>
	<script src="../_layouts/15/STYLES/Employee/Media/MediaCoverage/controllers/ProcessEmployeeVacationController.js"></script>
	<!-- end Media Coverage Request -->

	<div data-ng-app="angularApp">
	<toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'animation-class': 'toast-top-center'}"></toaster-container>
	<script type="text/ng-template" id="example-loader.tpl.html">
	<div class="flyover">
	<div class="mask"></div>
	<div class="alert alert-info">
	<strong>Loading</strong>
	</div>
	</div>
	</script>

	<div ng-http-loader methods="['POST']" template="example-loader.tpl.html"></div>
	<div data-ng-view class="angular-app"></div>

	</div>

view raw EmployeeVacationWebPartUserControl.ascx hosted with ❤ by GitHub

create "Pages" folder

add module "EmployeePagesModule"
this module consist of page that register webpart created before on it.

delete sample.txt
add "Management.aspx" page to module

open page and write our magic code :

	<%@ Page Inherits="Microsoft.SharePoint.Publishing.TemplateRedirectionPage,Microsoft.SharePoint.Publishing,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
	<%@ Reference VirtualPath="~TemplatePageUrl" %>
	<%@ Reference VirtualPath="~masterurl/custom.master" %>

view raw Management.aspx hosted with ❤ by GitHub

update Element.Xml with code below :

	<?xml version="1.0" encoding="utf-8"?>
	<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
	<Module Name="EmployeePagesModule" Url="Pages">
	<File Path="EmployeePagesModule\Management.aspx" Url="Management.aspx" Type="GhostableInLibrary" >
	<Property Name="Title" Value="Management Media" />
	<Property Name="PublishingPageLayout" Value="~SiteCollection/_catalogs/masterpage/DemoManagementPageLayout.aspx, DemoManagementPageLayout" />
	<AllUsersWebPart WebPartZoneID="bootstrapRow1Column2" WebPartOrder="1">

	<![CDATA[
	<webParts>
	<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
	<metaData>
	<type name="Demo.Employee.WebParts.EmployeeVacationWebPart.EmployeeVacationWebPart, Demo.Employee, Version=1.0.0.0, Culture=neutral, PublicKeyToken=2ea3a22c8ba33707" />
	<importErrorMessage>Cannot import this Web Part.</importErrorMessage>
	</metaData>
	<data>
	<properties>
	<property name="ExportMode" type="exportmode">All</property>
	<property name="HelpUrl" type="string" />
	<property name="Hidden" type="bool">False</property>
	<property name="Description" type="string">My Visual Web Part</property>
	<property name="CatalogIconImageUrl" type="string" />
	<property name="Title" type="string">Demo.Employee - EmployeeVacationWebPart</property>
	<property name="AllowHide" type="bool">True</property>
	<property name="AllowMinimize" type="bool">True</property>
	<property name="AllowZoneChange" type="bool">True</property>
	<property name="TitleUrl" type="string" />
	<property name="ChromeType" type="chrometype">Default</property>
	<property name="AllowConnect" type="bool">True</property>
	<property name="Width" type="unit" />
	<property name="Height" type="unit" />
	<property name="HelpMode" type="helpmode">Navigate</property>
	<property name="AllowEdit" type="bool">True</property>
	<property name="TitleIconImageUrl" type="string" />
	<property name="Direction" type="direction">NotSet</property>
	<property name="AllowClose" type="bool">True</property>
	<property name="ChromeState" type="chromestate">Normal</property>
	</properties>
	</data>
	</webPart>
	</webParts>
	]]>
	</AllUsersWebPart>
	</File>
	</Module>
	</Elements>

view raw Element.Xml hosted with ❤ by GitHub

Finally we Finished our demo with complete step by step implementation , if you have any question you're welcome anytime .

Friday, December 4, 2015

CRUD OPERATIONS USING SHAREPOINT 2013 RESTAPI & ANGULARJS (PART2)

As we discussed in Part1 we talked about why we going to use Angularjs with Sharepoint then we decided to explain our topic by demo

i'm an employee in company and need to request vacation so i will log into sharepoint with my account and fill form then send vacation request , i need to see process flow where it located now or who is responsible for take an action for my task now, in other side if i'm employee who has this task now i need to respond on this task.

Check Final result of Demo that we will do it now.

NO PAGE LOADING ANY MORE :)

now we will start with first point which is "Build Angularjs Structure" , actually we have many type of structure when we start to use Angularjs but i prefer to use following structure but feel free to use your own :

Example :

Demo "folder under Styles SharePoint mapped folder"

Employee "folder container"

controllers "folder container"

AddEmployeeController.js "controller file"

services "folder container"

EmployeeServices.js "services file"

App.js "main angularjs file"
Directives.js "common directive file"
Messages.js "file contain all common messages you will use in your project"
services "folder contain most common service over project"

utility.js " common service file can use over project"

Demo "folder under Layouts SharePoint mapped file"

add.html "view model"

and now we will start our demo , open your visual studio :D :D

we will create 2 projects one for common functions and other specific for employee functionality.

first step we will create general services that we will use it over sharepoint

1- create empty SharePoint project "Demo.CommonUI" as farm solution

2- create folder "Demo" under STYLES mapped SharePoint folder (Templates > Layouts > Styles)

3- create folder "Vendor" under demo folder

we will add add library will be used in our demo under this folder.

add Angularjs framework files under this folder you can download it through this link ,

actually i will use CDN links in my demo to save time., here is some prerequisite libraries we will use in our project :

jquery
Angularjs : for angularjs functionality
ng-table : for draw tables with full functionality (feel free to use your own library)
toaster : for show notification after api response.
loader : for show loader if request required time.
UIBootstrap : for boot strap controls

my current vendor now will contain only files for "loader" and i will use CDN for other libraries

so project now will look like:

4- create some common files under "Demo" folder :

create "app.js" :

in code below we will handle routing of views and it's mapped controllers also we will add configuration for loader and inject all libraries that we will use in our project

	"use strict";
	(function () {
	angular.module("angularApp", ['ngAnimate', 'ui.bootstrap', 'ng.httpLoader', 'ngTable', 'toaster', 'ngRoute', 'Messages', 'ngSanitize', 'dialogs.main'])
	.config(["$routeProvider", function ($routeProvider) {

	/**************** Employee Vacation ***************/
	$routeProvider.when("/vacation/new", {
	templateUrl: "../_layouts/15/Demo.CommonUI/EmployeeVacation/add.html",
	controller: "AddEmployeeVacationContorller",
	caseInsensitiveMatch: true
	}).when("/vacation/details/:EmployeeVacationId", {
	templateUrl: "../_layouts/15/Demo.CommonUI/EmployeeVacation/details.html",
	controller: "DetailsEmployeeVacationContorller",
	caseInsensitiveMatch: true
	}).when("/vacation/process/:EmployeeVacationId", {
	templateUrl: "../_layouts/15/Demo.CommonUI/EmployeeVacation/process.html",
	controller: "ProcessEmployeeVacationContorller",
	caseInsensitiveMatch: true
	}).when("/vacation/myRequests", {
	templateUrl: "../_layouts/15/Demo.CommonUI/EmployeeVacation/MyRequests.html",
	controller: "MyEmployeeVacationController",
	caseInsensitiveMatch: true
	}).when("/vacation/myTasks", {
	templateUrl: "../_layouts/15/Demo.CommonUI/EmployeeVacation/MyTasks.html",
	controller: "AssignedEmployeeVacationController",
	caseInsensitiveMatch: true
	})
	/**************** end Employee Vacation ***************/
	}])
	.config([
	'httpMethodInterceptorProvider',
	function (httpMethodInterceptorProvider) {
	httpMethodInterceptorProvider.whitelistDomain('/');
	}
	])

	})();

view raw app.js hosted with ❤ by GitHub

create "Directives.js":

we will use it to create our own directives to use it in views, in code below i will use my custom datepicker and validation to validate FromDate & ToDate when employee submit vacation

	(function () {

	'use strict';

	angular.module('angularApp')

	.directive("compareWithStartDate", compareWithStartDate)
	.directive("demoDatepicker", CreateDatePicker)

	function compareWithStartDate() {
	return {
	require: 'ngModel',
	link: function (scope, elem, $attrs, ngModel) {

	ngModel.$parsers.unshift(CheckDateValidation);
	ngModel.$formatters.unshift(CheckDateValidation);

	$attrs.$observe('checkDate', function (comparisonModel) {
	return CheckDateValidation(ngModel.$viewValue);
	});

	function CheckDateValidation(viewValue) {

	var comparisonModel = $attrs.compareWithStartDate.replace(/"/g, "");
	var splittedValue = [];
	if (typeof (viewValue) != 'undefined' && viewValue.indexOf('/') != -1) {
	var copiedViewValue = angular.copy(viewValue);
	splittedValue = String(copiedViewValue).split("/");
	//copiedViewValue = splitteValue[1] + "/" + splitteValue[0] + "/" + splitteValue[2];
	}

	var endDate;
	if (splittedValue.length != 0) {
	endDate = new Date(splittedValue[0], parseInt(splittedValue[1]) - 1, splittedValue[2]);
	}

	//var startDate = Date.parse(comparisonModel);
	var startDate = new Date(comparisonModel);
	// startDate.setDate(startDate.getDate()+1)


	if (typeof (endDate) != 'undefined' && typeof (startDate) != 'undefined') {

	if (startDate <= endDate) {
	ngModel.$setValidity('checkDate', true);
	}
	else {
	ngModel.$setValidity('checkDate', false);
	}
	return viewValue;
	}

	}
	}
	};
	}

	function CreateDatePicker() {
	return {
	restrict: 'A',
	require: 'ngModel',
	link: function (scope, element, attrs, ngModelCtrl) {

	element.datepicker({
	dateFormat: 'yy/mm/dd',
	changeMonth: true,
	onSelect: function (date) {
	ngModelCtrl.$setViewValue(date);
	ngModelCtrl.$render();
	}
	});
	}
	}
	}

	})();

view raw Directives.js hosted with ❤ by GitHub

create "Messages.js":

we will use it centralize out used messages accross system

	(function () {
	angular.module("Messages", [], ["$provide", function ($provide) {
	$provide.value("providedValue", {

	/******* Common Messages *************/
	FieldRequired: "Field is Required.",
	InvalidValue: "Please check data entered",
	GeneralError: "An Error occurred please contact administrator",
	NoRecordFound: "No Records Found",
	CancelMessage: "Request Canceled.",
	AddSuccessMessage: "Request Added Successfully",
	InvalidDateRange: "please check date range",
	AddFailedMsg: "Adding Request Failed"
	/******* end Common Messages *************/

	});
	}]);
	})();

view raw Messages.js hosted with ❤ by GitHub

create folder "services":

create "baseSvc.js"

this file one of the most important files in our project here we will add all method GET,POST that will call SharePoint RestApi.

	"use strict";
	(function () {
	angular.module("angularApp")
	.factory("baseSvc", ["$http", "$q", function ($http, $q) {
	var baseUrl = _spPageContextInfo.webAbsoluteUrl;
	var currentUserId = _spPageContextInfo.userId;

	var getRequest = function (query) {
	var deferred = $q.defer();
	$http({
	url: baseUrl + query,
	method: "GET",
	headers: {
	"accept": "application/json;odata=verbose",
	"content-Type": "application/json;odata=verbose"
	}
	})
	.success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	};

	var getRootRequest = function (query) {
	var deferred = $q.defer();
	$http({
	url: _spPageContextInfo.siteAbsoluteUrl + query,
	method: "GET",
	headers: {
	"accept": "application/json;odata=verbose",
	"content-Type": "application/json;odata=verbose"
	}
	})
	.success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	};


	var getMyRequest = function (query) {
	var deferred = $q.defer();
	$http({
	url: baseUrl + query + '&$filter=Author/Id eq ' + currentUserId,
	method: "GET",
	headers: {
	"accept": "application/json;odata=verbose",
	"content-Type": "application/json;odata=verbose"
	}
	})
	.success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	};

	var getByPeopleGroupFieldValue = function (query) {
	var deferred = $q.defer();
	$http({
	url: baseUrl + query + currentUserId,
	method: "GET",
	headers: {
	"accept": "application/json;odata=verbose",
	"content-Type": "application/json;odata=verbose"
	}
	})
	.success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	};



	var getAssignedToUserRequest = function (listTitle) {
	var deferred = $q.defer();

	var viewXml = "<View><Query><Where><And><Eq><FieldRef Name='Status' /><Value Type='Choice'>Not Started</Value></Eq><Or><Eq><FieldRef Name='AssignedTo' /><Value Type='Integer'><UserID/></Value></Eq><Membership Type='CurrentUserGroups'><FieldRef Name='AssignedTo' /> </Membership></Or></And></Where></Query></View>";

	$http({
	url: baseUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/getitems?$select=*,WorkflowItemId,Author/Id\,Author/Title\,AssignedTo/Id\,ContentType/EditFormUrl\&$expand=ContentType",
	method: "POST",
	data: "{ 'query' : {'__metadata': { 'type': 'SP.CamlQuery' }, \"ViewXml\": \""
	+ viewXml + "\" }}",
	headers: {
	"X-RequestDigest": $("#__REQUESTDIGEST").val(),
	"Accept": "application/json; odata=verbose",
	"content-type": "application/json; odata=verbose"
	}
	}).success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});

	return deferred.promise;
	};

	var GetFilteredListByPeopleGroup = function (query, peopleGroupFieldName) {
	var deferred = $q.defer();

	var viewXml = "<View><Query><Where><Or><Eq><FieldRef Name='" + peopleGroupFieldName + "' /><Value Type='Integer'><UserID/></Value></Eq><Membership Type='CurrentUserGroups'><FieldRef Name='" + peopleGroupFieldName + "' /></Membership></Or></Where></Query></View>";

	$http({
	url: query,
	method: "POST",
	data: "{ 'query' : {'__metadata': { 'type': 'SP.CamlQuery' }, \"ViewXml\": \""
	+ viewXml + "\" }}",
	headers: {
	"X-RequestDigest": $("#__REQUESTDIGEST").val(),
	"Accept": "application/json; odata=verbose",
	"content-type": "application/json; odata=verbose"
	}
	}).success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	};

	//To get the formdigestvalue, which is required to insert data to sharepoint
	//Define the service call
	var getFormDigest = function () {

	var deferred = $q.defer();
	$http({
	url: baseUrl + "/_api/contextinfo”",
	method: "POST",
	headers: {
	"accept": "application/json;odata=verbose",
	"X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
	"content-Type": "text/xml"
	},
	data: ''
	})
	.success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	}

	var postRequest = function (data, url) {
	var deferred = $q.defer();
	$http({
	url: baseUrl + url,
	method: "POST",
	headers: {
	"accept": "application/json;odata=verbose",
	"X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
	"content-Type": "application/json;odata=verbose"
	},
	data: JSON.stringify(data)
	})
	.success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	};


	var updateRequest = function (data, url) {
	var deferred = $q.defer();
	$http({
	url: baseUrl + url,
	method: "PATCH",
	headers: {
	"accept": "application/json;odata=verbose",
	"X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
	"content-Type": "application/json;odata=verbose",
	"X-Http-Method": "PATCH",
	"If-Match": "*"
	},
	data: JSON.stringify(data)
	})
	.success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	};


	var deleteRequest = function (url) {
	var deferred = $q.defer();
	$http({
	url: baseUrl + url,
	method: "DELETE",
	headers: {
	"accept": "application/json;odata=verbose",
	"X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
	"IF-MATCH": "*"
	}
	})
	.success(function (result) {
	deferred.resolve(result);
	})
	.error(function (result, status) {
	deferred.reject(status);
	});
	return deferred.promise;
	};

	var GetUserById = function (id) {
	var returnValue;
	var deferred = $q.defer();

	return $http({
	url: baseUrl + "/_api/Web/GetUserById(" + id + ")",
	method: "GET",
	headers: {
	"X-RequestDigest": $("#__REQUESTDIGEST").val(),
	"Accept": "application/json; odata=verbose",
	"content-type": "application/json; odata=verbose"
	}
	}).then(function (response) {
	if (typeof response.data === 'object') {
	return response.data.d.Title;
	} else {
	// invalid response
	return $q.reject(response.data);
	}

	}, function (response) {
	// something went wrong
	return $q.reject(response.data);
	});

	}


	return {
	getRequest: getRequest,
	getAssignedToUserRequest: getAssignedToUserRequest,
	GetFilteredListByPeopleGroup: GetFilteredListByPeopleGroup,
	getMyRequest: getMyRequest,
	getByPeopleGroupFieldValue: getByPeopleGroupFieldValue,
	postRequest: postRequest,
	updateRequest: updateRequest,
	deleteRequest: deleteRequest,
	getFormDigest: getFormDigest,
	getRootRequest: getRootRequest,
	GetUserById: GetUserById
	};
	}]);
	})();

view raw baseSvc.js hosted with ❤ by GitHub

create "UtilityService.js"

if you have any common function you can add it in utility.

	"use strict";
	(function () {
	angular.module("angularApp")
	.factory("UtilityService", ["baseSvc", "providedValue", function (baseService, providedValue) {

	var listEndPoint = '/_api/web/lists';

	//group by propertyName for collection of data
	var groupBy = function (array, f) {
	var groups = {};
	var result = [];

	//group all rows regarding to f input
	array.forEach(function (o) {
	var group = f(o)[0];
	groups[group] = groups[group] \|\| [];
	groups[group].push(o);
	});

	Object.keys(groups).map(function (group) {
	//get number of rows per group
	groups[group].Count = groups[group].length;
	return result.push({ key: group, Value: groups[group] });
	});
	var groupedRes = [];
	groupedRes = result;
	return groupedRes;
	};

	//formate date to yyyy/mm/dd
	var formateDate = function (date) {

	if (date == null)
	return "";

	var dateObj = new Date(date);

	var day = dateObj.getDate();
	var month = dateObj.getMonth();
	var year = dateObj.getFullYear();
	var formatedDate = year + "/" + (parseInt(month) + 1) + "/" + day;
	return formatedDate;
	};

	var getListID = function (listTitle) {
	var query = listEndPoint + "/GetByTitle('" + listTitle + "')/Id";

	return baseService.getRequest(query);
	};


	var GetCurrentUserInfo = function () {
	var query = "/_api/Web/CurrentUser";

	return baseService.getRequest(query);
	}

	//filter Array2 based with matched value in Array1
	var FilterArrayByAnotherArray = function (arr2, arr1) {

	var arr1Ids = {};
	_.each(arr1, function (arr1Item) { arr1Ids[arr1Item] = true; });

	var outFilteredArr = _.filter(arr2, function (val) {
	return arr1Ids[val.key];
	}, arr1);

	return outFilteredArr;
	}


	return {
	groupBy: groupBy,
	formateDate: formateDate,
	getListID: getListID,
	GetCurrentUserInfo: GetCurrentUserInfo,
	FilterArrayByAnotherArray: FilterArrayByAnotherArray
	};
	}]);
	})();

view raw UtilityService.js hosted with ❤ by GitHub

5- now we need to create our views for all CRUD operations.

Add "Layouts" SharePoint mapped folder

create folder "EmployeeVacation" under "Demo.commonUI" folder add following files :

create "add.html" that will appear when employee need to request vacation

	<ng-form name="addVacationForm">
	<div class=" col-sm-12 formheader">

	<h3 class="IR-Type" style="text-align: center; font-family: 'Amiri QuranWeb', normal;">ADD Vacation Request</h3>
	</div>
	<div class="inner-boxed-style clearfix">
	<br />
	<div class="form-group clearfix">
	<label class="requiredInput" ng-if="vacation.Title==null">*</label>
	<label class="control-label col-sm-3 lblSubject">Reason</label>
	<div class="col-sm-4">
	<input type="text" name="Title" class="form-control inputBox" ng-model="vacation.Title" required />

	<div class="row text-center" ng-messages="addVacationForm.Title.$error" ng-if="addVacationForm.$invalid && $submitted">
	<span class="validation-msg control-label" ng-show="addVacationForm.Title.$error.required">{{vacationValidationMessage.vacationFieldRequired}}</span>
	</div>
	</div>
	</div>
	</br>

	<div class="form-group clearfix">

	<label class="control-label col-sm-3 lblSubject">Date From </label>

	<div class="col-sm-5">
	<input type="text" name="vacationFromDate" class="form-control inputBox" ng-model="vacation.FromDate" demo-datepicker required>
	</div>
	<span class="input-group-btn col-sm-1">
	<label class="requiredInput" ng-if="vacation.vacationFromDate==null">*</label>
	</span>
	</div>

	</br>

	<div class="form-group clearfix">

	<label class="control-label col-sm-3 lblSubject">Date To</label>

	<div class="col-sm-5">
	<input type="text" name="vacationToDate" class="form-control inputBox"
	ng-model="vacation.ToDate" demo-datepicker compare-with-start-date="{{vacation.FromDate}}" required>
	</div>
	<span class="input-group-btn col-sm-1">
	<label class="requiredInput" ng-if="vacation.vacationToDate==null">*</label>
	</span>

	<div class="row text-center">
	<div class="row text-center" ng-messages="addVacationForm.vacationToDate.$error">
	<span class="validation-msg control-label requiredInput" ng-show="addVacationForm.vacationToDate.$error.checkDate">{{vacationValidationMessage.vacationCheckDate}}</span>
	</div>
	</div>
	</div>

	</br>

	<div class="form-group clearfix">
	<label class="requiredInput" ng-if="vacation.VacationType==null">*</label>
	<label class="control-label col-sm-3 lblSubject">Vacation Type </label>

	<div class="col-sm-8">
	<div class="drop-down no-padding">
	<select class="form-items-bg form-control" name="VacationType" ng-model="vacation.EmployeeVacationType"
	ng-options="r.Title for r in vacationTypeList track by r.Id\| orderBy:'Title'" required>
	<option value="">please select..</option>
	</select>
	</div>

	</div>
	</div>


	<div class="control-group col-sm-12">
	<input type="button" class="btn btn-primary post-btn" value="Send" ng-click="$submitted=true;addEmployeeVacation(vacation)" ng-disabled="buttonDisabled" />
	<input type="reset" class="btn btn-sm btn-info" value="Clear" ng-disabled="buttonDisabled" />
	<input type="button" class="btn btn-sm btn-danger" value="Cancel" ng-click="CancelAddVacation(vacation)" ng-disabled="buttonDisabled" />
	</div>
	</div>
	</ng-form>

view raw add.html hosted with ❤ by GitHub

create "details.html" to show details about request.

	<style>
	.label {
	color: black;
	}
	</style>
	<h5 class="header_title">
	<div>
	Vacation Request Details
	<a ng-click="CancelTaskStatus()" id="closeBtn"><img src="/_layouts/STYLES/Demo/vendor/dialog_x.png" /></i></a>
	</div>
	</h5>
	<div class="inner-boxed-style clearfix">
	<div class="form-group clearfix">
	<label class="label col-sm-3 lblSubject">Vacation Reason</label>
	<div class="col-sm-3">
	<label>{{vacation.Title}}</label>
	</div>

	<label class="label col-sm-2">vacation type</label>
	<div class="col-sm-4">
	<label>{{vacation.VacationType}}</label>
	</div>

	</div>
	<div class="form-group clearfix">
	</div>
	<div class="form-group clearfix">
	<label class="label col-sm-3 lblSubject">Date From </label>
	<div class="col-sm-3">
	<label>{{vacation.FromDate}}</label>
	</div>
	<label class="label col-sm-2">Date To</label>
	<div class="col-sm-4">
	<label>{{vacation.ToDate}}</label>
	</div>
	</div>
	</div>

view raw details.html hosted with ❤ by GitHub

create "MyRequests.html" to show all requests created by logged in user.

	<div id="myVacationRequest">
	<div class=" col-sm-12 formheader">
	<h3 class="IR-Type" style="text-align: center; font-family: 'Amiri QuranWeb', normal; padding-bottom:20px">My Vacation Requests</h3>
	</div>
	<div>
	<script type="text/ng-template" id="group-template.html">
	<div class="panel {{panelClass \|\| 'panel-default'}}">
	<div class=" accordion accordion-open">
	<h4 class="panel-title" style="color:#fa39c3">
	<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
	<span ng-class="{'text-muted': isDisabled}">
	{{heading}}
	</span>
	</a>
	</h4>
	</div>
	<div class="panel-collapse collapse" uib-collapse="!isOpen" style="background: #8cbadd;">
	<div class="panel-body" style="text-align: right" ng-transclude></div>
	</div>
	</div>
	</script>
	<uib-accordion close-others="true" ng-show="showAccordion">
	<uib-accordion-group heading="{{group.key}}" ng-repeat="group in groupedEmployeeVacationResult track by $index" ng-click=" GetSelectedDataGroup(group,$index);" template-url="group-template.html">
	<uib-accordion-heading ng-click="isopen=!isopen;">
	<div class="mymaterials-header mypendingtask-header " style="font-size: 70%;">
	<i class=" fa fa-plus-square fa-fw" ng-click="isopen=!isopen" ng-class="{'fa fa-minus-square fa-fw': isopen, 'fa fa-plus-square fa-fw': !isopen}">
	</i>
	<span class="taskDateHead control-label" style="color: blue;"> {{group.key}} </span>
	</div>
	</uib-accordion-heading>
	<table ng-table="tabledata[$index].tableParams" class="table ng-table-responsive table-condensed table-hover">
	<thead>
	<tr>
	<th>
	Vacation Reason
	</th>
	<th ng-class="{'sort-asc': tabledata[$index].tableParams.isSortBy('FromDate', 'desc')}"
	class="control-label text-center sortable"
	ng-click="tabledata[$index].tableParams.sorting('FromDate', tabledata[$index].tableParams.isSortBy('FromDate', 'asc') ? 'desc' : 'asc')">
	<div>Date From</div>
	<span ng-if="!template" ng-show="!template" ng-bind="parse('FromDate')" class="ng-scope ng-binding"></span>
	</th>
	<th ng-class="{'sort-asc': tabledata[$index].tableParams.isSortBy('ToDate', 'desc')}"
	class="control-label text-center sortable"
	ng-click="tabledata[$index].tableParams.sorting('ToDate', tabledata[$index].tableParams.isSortBy('ToDate', 'asc') ? 'desc' : 'asc')">
	<div>To Date</div>
	<span ng-if="!template" ng-show="!template" ng-bind="parse('ToDate')" class="ng-scope ng-binding"></span>
	</th>
	<th>

	</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="item in $data">
	<td><a href ng-click="OpenTaskStatus('sm',item.ID , 'process' , 'ProcessEmployeeVacationContorller')"> {{item.Title}}</a></td>
	<td sortable="'FromDate \| date'">{{item.displayedFromDate}}</td>
	<td sortable="'ToDate \| date'">{{item.displayedToDate}}</td>
	<td><a href ng-click="OpenTaskStatus('sm',item.ID ,'details' , 'DetailsEmployeeVacationContorller')">Details</a></td>
	</tr>
	</tbody>
	</table>
	</uib-accordion-group>
	</uib-accordion>
	</div>
	</div>

view raw MyRequests.html hosted with ❤ by GitHub

create "MyTasks.html" to show all tasks assigned to logged in user

	<div id="vacationTaskRequest">
	<div class=" col-sm-12 formheader">
	<h3 class="IR-Type" style="text-align: center; font-family: 'Amiri QuranWeb', normal;">Assigned Vacation Tasks</h3>
	</div>
	</br>
	<div>
	<script type="text/ng-template" id="group-template.html">
	<div class="panel {{panelClass \|\| 'panel-default'}}">
	<div class="accordion accordion-open">
	<h4 class="panel-title" style="color:#fa39c3">
	<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
	<span ng-class="{'text-muted': isDisabled}">
	{{heading}}
	</span>
	</a>
	</h4>
	</div>
	<div class="panel-collapse collapse" uib-collapse="!isOpen" style="background: #8cbadd;">
	<div class=" panel-body" style="text-align: right" ng-transclude></div>
	</div>
	</div>
	</script>
	<uib-accordion close-others="true">
	<uib-accordion-group template-url="group-template.html" ng-repeat="group in groupedEmployeeVacationResult track by $index" ng-click=" GetSelectedDataGroup(group,$index);">
	<uib-accordion-heading ng-click="isopen=!isopen;">
	<div class="mymaterials-header mypendingtask-header " style="font-size: 70%;">
	<i class=" fa fa-plus-square fa-fw" ng-click="isopen=!isopen" ng-class="{'fa fa-minus-square fa-fw': isopen, 'fa fa-plus-square fa-fw': !isopen}">
	</i>
	<span class="taskDateHead" style="color: black;">Task Due Date </span>
	<span class="Itemvalue" style="color: blue;">{{group.key}} </span>
	<span class="taskscount" style="color: red;">({{group.Value.Count}})</span>
	</div>
	</uib-accordion-heading>
	<table ng-table="tabledata[$index].tableParams" show-filter="true" class="table table-condensed table-bordered table-striped">
	<thead>
	<tr>
	<th ng-class="{'sort-asc': tabledata[$index].tableParams.isSortBy('Title', 'asc')}"
	class="control-label text-center sortable"
	ng-click="tabledata[$index].tableParams.sorting('Title', tabledata[$index].tableParams.isSortBy('Title', 'asc') ? 'desc' : 'asc')">
	<div>Task Name</div>
	<span ng-if="!template" ng-show="!template" ng-bind="parse('Title')" class="ng-scope ng-binding"></span>
	</th>
	<th class="control-label">
	Task Due Date
	</th>
	<th class="control-label">
	Assigned To
	</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="item in $data \| filter:{StartDate:filteredKey}">
	<td sortable="'Title'"><a href="{{item.EditFormUrl}}" target=" _blank">{{item.Title}}</a></td>
	<td>{{item.StartDate \|date}}</td>
	<td> {{item.Author}} </td>
	</tr>
	</tbody>
	</table>
	</uib-accordion-group>
	</uib-accordion>
	</div>
	</div>

view raw MyTask.html hosted with ❤ by GitHub

create "process.html" to show current task status

	<style>
	.label {
	color: black;
	}
	</style>
	<div id="ProcessVacationRequest" class="popup">
	<h5 class="header_title">
	<div>
	Vacation Task Status
	<a ng-click="CancelTaskStatus()" id="closeBtn"><img src="/_catalogs/masterpage/MOCIv2/img/dialog_x.png" /></i></a>
	</div>
	</h5>
	<div class="inner-boxed-style clearfix">
	<table ng-table="ProcessEmployeeVacationRequestTableParams" class="table ng-table-responsive table-condensed table-hover ">
	<thead>
	<th class="control-label">Title</th>
	<th class="control-label">Assigned To</th>
	<th class="control-label">Start Date</th>
	<th class="control-label">Due Date </th>
	<th class="control-label">Comment</th>
	</thead>
	<tr ng-repeat="vacation in $data">
	<td>{{vacation.Title}}</td>
	<td>{{vacation.AssignedTo}}</td>
	<td>{{vacation.StartDate}}</td>
	<td>{{vacation.DueDate}}</td>
	<td>{{vacation.WorkflowOutcome}}</td>
	<td>{{vacation.ApproverComments}}</td>
	</tr>
	</table>
	</div>
	</div>

view raw process.html hosted with ❤ by GitHub

6 - At last we are going to create our page layout

create folder "PageLayouts"

under folder create module "PageLayouts"

delete sample.txt
add text file "DemoManagementPageLayout.aspx" then add magic code below :

update file "Elements.xml" with code below :

	<?xml version="1.0" encoding="utf-8"?>
	<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
	<Module Name="PageLayouts" Url="_catalogs/masterpage">
	<File Path="PageLayouts\DemoManagementPageLayout.aspx" Url="DemoManagementPageLayout.aspx" Type="GhostableInLibrary" >
	<Property Name="ContentType"
	Value="$Resources:cmscore,contenttype_pagelayout_name;" />
	<Property Name="PublishingAssociatedContentType"
	Value=";#$Resources:cmscore,contenttype_welcomepage_name;;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF390064DEA0F50FC8C147B0B6EA0636C4A7D4;#"/>
	</File>
	</Module>
	</Elements>

view raw Elements.xml hosted with ❤ by GitHub

Finally we finished CommonUI Structure, congratulations :D .

in Part3 we will talk about Build Back end Structure of SharePoint and angular business layer

Tuesday, December 1, 2015

CRUD Operations using Sharepoint 2013 RestApi & Angularjs (Part1)

On first time joined my new job and client have only one issue with SharePoint which is staff decided to never use this portal until it come more faster, so we made a long meeting and finally we decided to use powerful of SharePoint functionality and on the same time use powerful of client side framework like Angularjs , from first time we knew that we will face some of challenges as when we start study and make a lot of search of how to implement Angularjs module with SharePoint RestAPI we have not a lot of references talk about it ,most of developers use knockout as client side with SharePoint so we need to take care while design our project in case that anytime we face some issues can't implemented with Angular we can use alternative way to do it even by CSOM "Client Side Object Model" and finally we made full designed structure you can use if you think to try use SharePoint and Angularjs.

I know it's long introduction but i have to explain to you what's reason that forced us to follow this strategy. And now it's time to begin ,for me the best way to learn something is to have full demo and here we are, this blog will divide into 3 parts;

Build Angularjs Structure.
Build Back end Structure of SharePoint and angular business layer
Build generic UI project as front end interface for our demo.

now lets explain our demo will be like that :

i'm an employee in company and need to request vacation so i will log into sharepoint with my account and fill form then send vacation request , i need to see process flow where it located now or who is responsible for take an action for my task now, in other side if i'm employee who has this task now i need to respond on this task.

That's it so simple example we will start step by step on this demo to cover all business process.

And here we go, stay tuned for Part2

Sunday, March 16, 2014

Exporting the XSLT List View Web Part in SharePoint 2010

you can’t export a XSL list view web part.

As you can see in the above screenshot the ability to export an XLV has been disabled by default – but that is something that you can pretty easily turn back on. Admittedly at some point here SPD has was used for the following technique – but once it’s been used (i.e. once only by me) there’s no reason that you’ll ever need it to use it again once you have the following few lines of mark-up (i.e. you don’t need it!).

So, my approach involved opening up a page with an XLV in SPD and saving the web part file locally. I then simply edited the resulting file in notepad until it looked like the below code:

<?xml version="1.0" encoding="utf-8" ?><webParts> <webPart xmlns="http://schemas.microsoft.com/WebPart/v3"> <metaData> <type name="Microsoft.SharePoint.WebPartPages.XsltListViewWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" /> <importErrorMessage>Cannot import this Web Part.</importErrorMessage> </metaData> <data> <properties> <property name="ListUrl" type="string">Lists/CustomList</property> <property name="ExportMode" type="exportmode">All</property> </properties> </data> </webPart></webParts>

With this code I can carry out the following steps to give me an XLV that can be exported:

Modify the ListUrl property to the site relative url of my list
E.g. note here that in my example it is lists/customlist not /subsite/lists/customlist
Save the file locally with an appropriate filename and the extension .webpart
Edit a page on the same site* as the list and upload this web part

4. Add the web part to the page – and note the option to export is now available!

5. You should now be able to edit this web part just like any other XLV, e.g. modifying the view etc.

Now that we have the ability to export an XLV it is the first step in opening up some of those great features that are available in SPD for those situations where it’s simply not possible to use SPD itself.

*As a final thought, this works for an XLV on the same site as the list you want to show – but what about if you wanted to show a list from a different site? Well, I think in this case you could replace the ListUrl property with the ListId and the WebId properties and that may work for you. When I get a moment I’ll confirm this.

SharePoint 2010 Breadcrumb not showing sub folders in document library

SharePoint 2010 Breadcrumb not working sub folders in document library

Solution
1. Open site in SharePoint designer 2010
2. Open “All Files” à Select Document Library from the list à Forms à AllItems.aspx
3. Open “AllItems.aspx” in SharePoint Designer ( select code view )
4. Find out “<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">”
5. Change the code
" <SharePoint:ListProperty Property="Title" runat="server"/> "
To

<SharePoint:ListProperty Property="TitleBreadcrumb" runat="server"/>
<SharePoint:UIVersionedContent UIVersion="4" runat="server">
<ContentTemplate>
<span class="ms-ltviewselectormenuheader" runat="server">
<SharePoint:ListTitleViewSelectorMenu AlignToParent="true" id="LTViewSelectorMenu" runat="server" />
</span>
</ContentTemplate>
</SharePoint:UIVersionedContent>
</asp:Content>
6. Save the file
7. Refresh the SharePoint page

Creating a custom Page Layout based on ContentType in SharePoint 2010

Creating a custom Page Layout in SharePoint 2010 is not too different than creating a custom Page Layout in SharePoint 2007. However, the process of creating a SharePoint Solution Package has changed in Visual Studio 2010. This article will walk you through the steps.

First, open Visual Studio and create a new C# project, using the "Empty SharePoint Project" template, listed under the SharePoint 2010 project templates. For this example, we'll name our project "MyCustomPageLayout".

For this example, we'll be deploying our solution as a "Farm solution".

Click "Finish" to wire up your solution to your particular SharePoint site.

Content Type

First thing to do is to define a content type.
I will call my Content Type: PicturePageContentType

To do this:
- Go to: Site Settings –> Site content types
- Next, click Create

In the following screen you insert information about the content type.
An import thing to do is let it inherit from the right parent content type.
This needs to be from the group: Publishing Content Types and the parent needs to be Page.

So far nothing special, next I added some non existing columns.
On the following page click Add from new site column.

Define in the screen the follows up the columns that you would like to add to the your content type (Page Layout in the end).

After you added all the columns you needed you can overview it when you’re looking at you content type. You’ll see that I added Page Content, this was one from the already existing site columns.

Note: If you added a from column to your page you cannot delete it:) If you want to get rid of it you need to delete the whole content type.

Create the Page Layout

As with SharePoint 2007, we'll need to provision our Page Layouts to our SharePoint Site Collection Master Page Gallery by using a "Module" element. To do this, right click on the Project and say you want to add a new item. Select "Module" from the list of SharePoint 2010 items.

We'll name the Module "masterpage". When you create the new module, you'll see something like this:

By default, the module contains a sample text file you, so you can see how the Module deploys a file to SharePoint. However, we don't need it, so we'll delete Sample.txt. Next, we need to wire up our module to point to the URL of the Master Page Gallery, so we'll add a "Url" attribute to the Module node. Our Elements.xml file should now contain this XML:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="masterpage" Url="_catalogs/masterpage">
</Module>
</Elements>

Next, we're going to drop our new Page Layout file into the Module. To do this, we'll right-click on the "masterpage" module in the Visual Studio explorer and select "Add new item". We're once again presented with the "Add New Item" dialog. If we were to select "Application Page" from the SharePoint 2010 menu, we'd get a code-behind page in addition to our ASPX page, which we don't want. Since all we want to provision is markup (and not code), we're going to use a shortcut. Select the "General" node and select "Text File" from the list of items. However, name the file "MyCustomPageLayout.aspx".

Add your Page Layout markup into your MyCustomPageLayout.aspx page. You can do it how I do it, which is to create a new Page Layout in SharePoint designer,

Now, we need to add the code for PageLayout1.aspx. It's easier to design for the page first in SharePoint designer and then cop the code over.

So let's open SharePoint designer to the site you are developing on. Select "Page Layouts" under Site Objects.

In the ribbon click "New Page Layout". In the dialog box select Custom Content Types and ContentType1. Enter a URL Name and Title

In the Toolbox, under SharePointControls, Server Controls, Content Fields you should see PageContent and PageImage. Drag these two fields onto the page in the "PlaceHolderMain" content area so it looks like this

Once again, the FieldName values most likely won't match yours since that's a guid generated by the system. We will make two changes before we copy the code over to our project. Instead of leaving the guid for the field names we will change the FieldName to the actual names of the fields -- PageContent and PageImage so the code will be

<PublishingWebControls:RichImageField FieldName="PageImage" runat="server"></PublishingWebControls:RichImageField>

<PublishingWebControls:RichHtmlField FieldName="PageContent" runat="server"></PublishingWebControls:RichHtmlField>

This makes it easier when deploying the solution to dev, staging, and production since the FieldName guids rarely match when moving to a different SharePoint 2010 environment.

Also, in the Page directive at the top of the page get rid of the following text: meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"

Take the code from the DesignPageLayout and copy it over to the PageLayout1.aspx page in your project.

then copying the code to Visual Studio. However, DO NOT FORGET to remove the attributes in the Page Directive at the top of the page that SharePoint Designer adds, that look like this:

meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"

If you don't forget to remove those items from the Page directive, SharePoint will think your pages have been customized, even though they were deployed via a Feature.

Next, we'll need to update the Module's Elements.xml file to tell SharePoint what to do with the new Page Layout.

The first thing we'll need to do is to update the "Url" property of the File element, by removing the "masterpage/" prefix fromt the Url. (Since we already specified in the Module element that we're deploying the Page Layout to the "masterpages" library, if we left the "masterpages/" part of the Url on the file, SharePoint would try to provision our Page Layout into a library called "masterpages" inside the existing "masterpages" library! We don't want that!) Your new File element should look like this:

<File Path="masterpage\MyCustomPageLayout.aspx" Url="MyCustomPageLayout.aspx" />

Now we need to specify some properties for the Page Layout. These properties are identical to the kind of properties you would specify for a Page Layout in SharePoint 2007:

The Title of the file in SharePoint
In our case, the file itself has a URL of MyCustomPageLayout.aspx, but we can also give the page a Title that will show up when the Page Layout is being selected by the content author, such as "My Custom Page Layout".
The Content Type
All Page Layouts must inherit from the "Page Layout" content type (which we add using a Resource file value.)
A Publishing Preview Image
The Publishing Preview Image is the image that shows up when a user picks that Page Layout from the Page Layout picker while they're creating a new page. In this example, we'll just point to the Article Page's preview image.
The Publishing Associated Content Type
This is the Content Type that the Page Layout is representing, such as an "Article Page", "Welcome Page", etc. The value is a string representing a Lookup value that's a combination of the name of the Content Type and its unique identifier.

Our new File node will look like this:

<File Path="masterpage\MyCustomPageLayout.aspx" Url="MyCustomPageLayout.aspx" Type="GhostableInLibrary">
      <Property Name="Title" Value="My Custom Page Layout" />
      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
      <Property Name="PublishingPreviewImage" Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/CustomPageLayout.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/CustomPageLayout.png" />
      <Property Name="PublishingAssociatedContentType" Value=";#ContentTypeName;
#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44D;#"
/>
</File>

Please note, there's no line break inside the PublishingAssociatedContentType value string; I needed to add a line break so you could see the whole value here.

That's it! We've built our Module.

Now, we're going to add a module for the Page Layout preview image. Right click on the project and add an additional Module element. Delete the "Sample.txt" file from it, and add your new preview image. (In our case, we'll call it CustomPageLayout.png".) Modify your module file so it looks like this:

<Module Name="Previews Images" Url="_catalogs/masterpage/$Resources:core,Culture;/Preview Images">
  <File Path="Preview Images\CustomPageLayout.png" Url="CustomPageLayout.png" Type="GhostableInLibrary">
      <Property Name="Title" Value="Custom Page Layout Preview Image" />
  </File>
</Module>

You might have noticed that a new Feature got created for you when you created a new Module. Let's rename the Feature itself MyCustomPageLayout in the project tree, like this:

We'll open up our MyCustomPageLayout feature, and give it a helpful name and description. Notice that you can graphically see that your Module is a part of this Feature, and you can even see which Module files will be provisioned when the Feature is activated.

The last thing we need to do is to make sure our Solution Package is getting configured correctly, to include our new Feature.

By default, the "Empty SharePoint Project" will create a DLL for you. If we just went ahead and deployed our Solution Package with the settings as-is, we would be deploying a DLL to the GAC. However, since our solution doesn't have any code in it, it would be a blank DLL. That's a bit messy, so let's avoid that. Click on the Project in your Solution Explorer, and look in the Properties Window. Change the "Include Assembly in Package" property to "False".

Important note: This value is in the Properties Window. I was originally looking for it in the Properties page of the Project (say that three times fast), and I couldn't find it there.

To deploy our new Solution Package to our Sandboxed Site, we'll go to the "Build" menu in Visual Studio, and select "Deploy MyCustomPageLayout".

This will assemble the Solution Package, deploy the Solution Package to the Sandbox, then activate the Sandboxed feature.

If we browse to our Master Page Library, we'll now see our new Page Layout. Note that, unlike SharePoint 2007, our Page Layout will appear checked out by default, if we haven't modified any of the approval or check-out settings of the out of the Master Page Gallery. We'll need to check it in and approve it for it to be available to us.

Refrences:

Links :

http://rburgundy.wordpress.com/2010/05/21/sharepoint-2010-create-page-layout-based-on-a-custom-content-type-in-visual-studio-2010/

http://www.rkinteractive.com/blogs/SoftwareDevelopment/post/2012/01/06/Creating-Custom-Content-Types-and-Page-Layouts-in-Visual-Studio-2010.aspx

http://www.c-sharpcorner.com/Forums/Thread/182458/how-to-create-page-layout-in-sharepoint-2010-using-visual-st.aspx

Error on start & end tag Page Directive ..SharePoint2010

if you face problem on tag page directive all what you need to do is Close & Open File :) , simple right ! :D

Fix for 'Load control template .. TaxonomyPicker.ascx"

if you face problem in TexonomyPicker.ascx , please follow link below have solution :

o http://gallery.technet.microsoft.com/office/32d06697-ab7f-447e-9d0e-b6d93bee3fda