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 .