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&#8221;",
	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