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 :

1. create sharepoint project "Demo.Employee".
2. add new list item "VacationType"
3. 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
  
  

• 
  
4. 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.
  
  
• create "VacationTypeService.js"
• get data from vacation type sharepoint list
  
  
• controllers folder will contains all angular employee controllers.
• create "AddEmployeeVacationController.js"
• functionality for add employee vacation request.
  
• create "AssignedEmployeeVacationController.js"
• controller to get all tasks assigned to current logged in user
  
  
• create "DetailsEmployeeVacationController.js"
• controller to show all details about selected vacation request.
  
  
• create "MyEmployeeVacationController.js"
• controller to get all vacations requested by current logged in user.
  
  
• create "ProcessEmployeeVacationController.js"
• controller to show the current process status of selected vacation.
  
  

• 
  
5. create visual webPart(farm solution) "EmployeeVacationWebPart" to render views
• open "EmployeeVacationWebPartUserControl.ascx"
• add all file references to webpart like below :
  
  
6.  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 :
  
  
• update Element.Xml with code below :
  
  

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

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

• 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 

• create "Messages.js":
• we will use it centralize out used messages accross system

• 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.

• create "UtilityService.js"
• if you have any common function you can add it in utility.

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

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

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

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

• create "process.html" to show current task status

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 :
  

Finally we finished CommonUI Structure, congratulations :D .

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

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;

1. Build Angularjs Structure.
2. Build Back end Structure of SharePoint and angular business layer
3. 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