Provider Hosted MVC App With AngularJS in SharePoint - Part 2

Let's start with Provider Hosted MVC App with AngularJS - Part 2. In this part we are going to perform CRUD operation's with SharePoint APP Model and AngularJS.

Please Reference below link to understand how to create Provider Hosted MVC App With AngularJS.

• Provider Hosted MVC App With AngularJS in SharePoint - Part 1

SharePoint HostWeb List Structure

The following is a list structure which we are referencing for our application.



We are going to create the following CRUD operation UI Design and final output format.



Lets start with user data entry form design. when we are saying user entry form, it means we need to have validation applied to controls.

AngularJS validation logic reside in specific JavaScript file named angular-messages.js, so we need to add reference of that file in our project first.



When we think about validation, <form></form> control comes in existence. When end user enter valid data and submits data to the server, other stay on same page till the user fill correct form entries.

Let's check the following code & try to understand which property is used for which purpose in code.

Step 1: Add form tag with unique name so we can reference that name to check state of form- Valid/InValid.

Step 2: Steps to apply AngularJS validation attributes and showing the error message

Add html control with unique name. If the form field is required, then add " required " attribute to it.

Error Message: The ngModel directive expose an $error object. We can integrate $errro object with ngMessages to display control error message in easy way.

• ng-message="required": It corresponds to attribute we added to HTML control.
  
  1. <input type="text" class="form-control" ng-model="Employee.EmpID" name="EmployeeID" required />
  3. <div ng-messages="EmployeeForm.EmployeeID.$error">
  4. <div ng-message="required" class="ErrorSymbol">*</div>
  5. </div>
• ng-message="pattern": It corresponds to error message if specified pattern is not matching with user input data.
  
  1. <input type="text" class="form-control" ng-model="Employee.EmpAge" name="EmployeeAge" ng-pattern="/^[0-9]+$/" required />
  4. <div ng-messages="EmployeeForm.EmployeeAge.$error">
  5. <div ng-message="required" class="ErrorSymbol">*</div>
  6. <div ng-message="pattern" class="ErrorText">Must be a digit</div>
  7. </div>

Save Button

In the starting save button is disabled. When user fills the form with valid data, save button gets activated.

JS code

The following code indicates how to check form state and return value as true or false.
When above method i.e " isSaveDisabled " returns true, control goes to save method with current employee details as input parameter.

Form control:
Table Control

We want to perform CRUD operation so need to add update & delete button. Therefore, I added that button to table via AngularJS.

Article Part-1 <table></table> control and this table control you notice some difference here.
Inside <tbody></tbody> control I added a row with two column , first for Update button & second for Delete button.

• Update button: ng-click="loadRecord(gridItem, $event)".
  
  
• Delete button: ng-click="DeleteItem(gridItem.ID, $event)".
  
  1. <table tr-ng-grid="" items="EmployeeMaster" locale="en">
  2. <thead>
  3. <tr>
  4. <th field-name="EmpID" display-name="Employee ID"></th>
  5. <th field-name="EmpName" display-name="Employee Name"></th>
  6. <th field-name="EmpAddress" display-name="Address"></th>
  7. <th field-name="EmpAge" display-name="Age"></th>
  8. <th field-name="EmpQualification" display-name="Qualification"></th>
  9. <th field-name="EmpDesignation" display-name="Designation"></th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr>
  14. <td>
  15. <input type="button" id="btnUpdatEmployee" class="btn btn-success"
  16. value="Update"
  17. ng-click="loadRecord(gridItem, $event)" />
  18. </td>
  19. <td>
  20. <input type="button" id="btnDeleteEmployee" class="btn btn-success"
  21. value="Delete"
  22. onclick="javascript: confirm('Do you want to delete record ??');"
  23. ng-click="DeleteItem(gridItem.ID, $event)" />
  24. </td>
  25. </tr>
  26. </tbody>
  27. </table>

Index.cshtml Source Code

Please check below the following source code changes like new script reference, <table> control change,<form> control integration in order to design above UI.

CRUD Operation JavaScript Code

In Part -1 , Read function has completed i.e Load() method. some new method need to added here.

Note - We loaded all out of box JS file in Load() function at start so no need to load same file again and again, otherwise it gives you error or nothing happens.

app-main.js:

We first need to modify Dependent module names, since we want to apply validation to html control, 'ngMessages' need to be added as dependent module.
app-home-controller.js:

I will explain all function of "app-home-controller.js" file first and then we move to DataLayer functions.

For better programming purpose, we are going to integrate Save() and Update() functionality in a single function based on flag value. IsUpdate flag set to false at start, when needed this flag value get changed.
When Save button is clicked, as per flag value, either of the function get called.
When Update button is clicked, loadRecord() function get called.
When Delete button is clicked, DeleteItem() function get called.
app-home-controller.js source code
app-data-service.js

When we want to save employee record, we need to call save() function of DataLayer.
When we want to update employee record, we need to call update() function of DataLayer.
When we want to update employee record, we need to call delete() function of DataLayer.
app-data-service.js source code
I hope you all liked this article as you liked the Part-1 of this series.