Introduction

This article contains the remaining activities of our SharePoint with an Angular project and it is a continuation of my previous article SharePoint With Angular - Part One.
Prerequisites
  • Visual Studio Code. You can download and install from Visual Studio Code
  • Node.js. You can download and install from Node.js
  • Basic knowledge of SharePoint
  • Knowledge of TypeScript
Note
The remaining activities of our Sharepoint projects using Angular are:
  • Create an angular project and write the code for CRUD operation in SharePoint.
  • Integrate third-party library (PrimeNg) for showing records.
  • Build and add an Angular project to the SharePoint site.

Create an Angular project and write the code for a CRUD operation in Sharepoint

To demonstrate the CRUD operation in SharePoint online, I have created the Employee list with following the columns.
Let's create an Angular project using Angular CLI. You can install angular CLI using npm install -g @angular/cli
Step 1
Open the command prompt and type below command to create an Angular project where SharepointWithAngular is the project name.
ng new SharepointWithAngular
Step 2
Select the following options.
Would you like to add Angular routing? - y (Type y, as we are using routing for SharepointWithAngular).
Which stylesheet format would you like to use? CSS (You can choose any option, As I am using CSS for this project).
Now it will install the necessary packages and files. Once done, open the proxy-server project in Visual Studio code.
Step 3
Now install the proxy library by using the following command.
npm install sp-rest-proxy --save-dev - To install sp-rest-proxy library.
Step 4
Create a proxy.conf.json file and write the below code.
  1. {
  2. "/sites/*": {
  3. "target": "http://localhost:8080",
  4. "secure": false,
  5. "changeOrigin": true,
  6. "logLevel": "debug",
  7. "pathRewrite": {
  8. "^/sites": "http://localhost:8080/sites"
  9. }
  10. }
  11. }
Modify the start tag with this line in package.json file under the scripts tag.
"start": "ng serve --proxy-config proxy.conf.json"
Note
Step(3 and 4) are required so that we can use SharePoint services(like REST API, Groups, list, etc) locally or on localhost by running the command.
npm run start
Step 5
In order to perform actions like create, view, update, and delete in Sharepoint list item. Create the following services with these commands.
ng g s services/Constant - where (g - generate and s - service)
It will generate two files constant.service.ts and constant.service.spec.ts(It is used for testing). Open constant.services.ts file and paste the following code in it.
  1. import { Injectable } from '@angular/core';
  3. @Injectable({
  4. providedIn: 'root'
  5. })
  6. export class ConstantService {
  8. constructor() { }
  9. // Define constant for list names
  10. public listNames = {
  11. Employee: {
  12. name: 'Employee',
  13. type: 'SP.Data.EmployeeListItem'
  14. }
  15. }
  16. // Define REST API Query in Constant file.
  17. public QUERY = {
  18. GET_CHOICEFIELD: {
  19. filter: 'EntityPropertyName eq \'{{choiceField}}\''
  20. },
  21. GET_EMPLOYEE: {
  22. select: 'ID,Title,FirstName,LastName,Address,Role,IsActive,PhoneNo,Created,Modified,Editor/ID,Editor/Title',
  23. expand: 'Editor',
  24. filter: 'IsActive eq \'{{isActive}}\''
  26. }
  27. }
  28. }
ng g s services/Common
It will generate two files common.service.ts and common.service.spec.ts(It is used for testing). Opencommon.services.tsfile and paste the following code in it.
  1. import { Injectable } from '@angular/core';
  2. import { DatePipe } from '@angular/common';
  4. @Injectable({
  5. providedIn: 'root'
  6. })
  7. export class CommonService {
  8. constructor(
  9. private datePipe: DatePipe
  10. ) { }
  11. /**
  12. * construct a request to filter the array data into unique records.
  13. *
  14. * @description
  15. *
  16. * It will filter the array with unique records and return the filter array.
  17. *
  18. * @param array The array parameters contains an array which is required to filter the data.
  19. *
  20. * @return array It will returns an array having a unique value into the array.
  21. */
  22. uniqueArrayObj(array: any) {
  23. let sts: any = '';
  24. return sts = Array.from(new Set(array.map(s => s.label))).map(label1 => {
  25. return {
  26. label: label1,
  27. value: array.find(s => s.label === label1).value
  28. };
  29. });
  30. }
  31. // Sort array with property as label & value
  33. sortData(array: any) {
  34. return array.sort((a, b) => {
  35. if (a.label && a.label !== null && b.label && b.label !== null) {
  36. if (a.label.toLowerCase() < b.label.toLowerCase()) {
  37. return -1;
  38. }
  39. if (a.label.toLowerCase() > b.label.toLowerCase()) {
  40. return 1;
  41. }
  42. }
  43. return 0;
  44. })
  45. }
  46. /**
  47. * This method is used to sort number.
  48. * @param array Pass the array as parameter.
  49. */
  50. sortNumberArray(array: any) {
  51. return array.sort((a, b) => {
  52. if (parseFloat(a.label) && parseFloat(b.label)) {
  53. return a.label - b.label;
  54. }
  55. return 0;
  56. })
  57. }
  58. /**
  59. * This method is used to sort the DateArray;
  60. * @param array Pass the array as parameter.
  61. */
  62. sortDateArray(array: any) {
  63. const reverseDateRepresentation = date => {
  64. if (date) {
  65. let d1 = this.datePipe.transform(date.label ? date.label : date, 'dd-MM-yyyy');
  66. let parts = d1.split('-');
  67. let sortedDate = `${parts[2]}-${parts[1]}-${parts[0]}`;
  68. return sortedDate;
  69. } else {
  70. return null;
  71. }
  72. };
  73. const sortedDates = array
  74. .map(reverseDateRepresentation)
  75. .sort()
  76. .map(reverseDateRepresentation);
  77. return sortedDates;
  78. }
  79. }
ng g s services/SPOperation
It will generate two files spoperation.service.ts and spoperation.service.spec.ts(It is used for testing). Openspoperation.services.tsfile and paste the following code in it.
  1. import { Injectable } from '@angular/core';
  2. import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
  3. import { ConstantService } from './constant.service';
  4. import { GlobalObjectService } from './global-object.service';
  5. @Injectable({
  6. providedIn: 'root'
  7. })
  8. export class SPOperationService {
  9. // declare the variable to define header
  10. jsonHeader = 'application/json; odata=verbose';
  11. headers = { 'Content-Type': this.jsonHeader, Accept: this.jsonHeader };
  12. //declare the apiUrl
  13. apiUrl: string;
  14. baseUrl: string;
  15. constructor(
  16. private httpClient: HttpClient,
  17. private constants: ConstantService,
  18. private globalObj: GlobalObjectService
  19. ) { this.setBaseUrl(null); }
  20. /**
  21. * This method is used to set the default base url
  22. * @param webUrl
  23. */
  24. setBaseUrl(webUrl?: string) {
  25. const ctx = window['_spPageContextInfo'];
  26. if (ctx) {
  27. // If user is on SharePoint page use _spPageContextInfo.webAbsoluteUrl
  28. this.baseUrl = ctx.webAbsoluteUrl;
  29. } else {
  30. // Use the local variable value
  31. this.baseUrl = this.globalObj.sharePointPageObject.webAbsoluteUrl;
  32. }
  33. // Default to local web URL
  34. this.apiUrl = this.baseUrl + '/_api/web/lists/GetByTitle(\'{0}\')/items';
  35. }
  36. /**
  37. * This method is used to get the headers.
  38. * @param bAddContext
  39. * @param returnOp
  40. */
  41. getHeaders(bAddContext, returnOp) {
  42. const headerCopy: any = Object.assign({}, this.headers);
  43. if (bAddContext) {
  44. const context: any = document.getElementById('__REQUESTDIGEST');
  45. if (context) {
  46. headerCopy['X-RequestDigest'] = context.value;
  47. }
  48. }
  49. if (returnOp) {
  50. const httpOptions = {
  51. headers: new HttpHeaders(headerCopy)
  52. };
  53. return httpOptions;
  54. } else {
  55. return headerCopy;
  56. }
  58. }
  59. /**
  60. * This method is used to read the ODATA properties of sharepoint url and bind them.
  61. * @param url pass the url as parameters
  62. * @param options pass the options
  63. */
  64. readBuilder(url: string, options: any): string {
  65. if (options) {
  66. if (options.select) {
  67. url += ((url.indexOf('?') === -1) ? '?' : '&') + '$select=' + options.select;
  68. }
  69. if (options.filter) {
  70. url += ((url.indexOf('?') === -1) ? '?' : '&') + '$filter=' + options.filter;
  71. }
  72. if (options.expand) {
  73. url += ((url.indexOf('?') === -1) ? '?' : '&') + '$expand=' + options.expand;
  74. }
  75. if (options.orderby) {
  76. url += ((url.indexOf('?') === -1) ? '?' : '&') + '$orderby=' + options.orderby;
  77. }
  78. if (options.top) {
  79. url += ((url.indexOf('?') === -1) ? '?' : '&') + '$top=' + options.top;
  80. }
  81. if (options.skip) {
  82. url += ((url.indexOf('?') === -1) ? '?' : '&') + '$skip=' + options.skip;
  83. }
  84. }
  85. return url;
  86. }
  87. /**
  88. * This method is used to get the Item url for sharepoint
  89. * @param listName pass the listname as parameter
  90. * @param id pass the id for update and delete operation
  91. * @param options pass data in options parameter if you want to update else donot pass.
  92. */
  93. getItemURL(listName: string, id: any, options?: any) {
  94. let url = this.apiUrl.replace('{0}', listName) + '(' + id + ')';
  95. url = this.readBuilder(url, options);
  96. return url;
  97. }
  98. /**
  99. * This method is used to build the get items url
  100. * @param listName Pass the listname as parameter
  101. * @param options Pass the options as parameter.
  102. */
  103. getReadURL(listName: string, options?: any) {
  104. let url = this.apiUrl.replace('{0}', listName);
  105. url = this.readBuilder(url, options);
  106. return url;
  107. }
  108. /**
  109. * This method will create the new item in sharepoint list
  110. * @param listName pass the listname
  111. * @param jsonBody pass the body
  112. * @param type pass the type
  113. */
  114. async createItem(listName: string, jsonBody: any, type: string) {
  115. const url = this.getReadURL(listName, null);
  116. // append metadata
  117. if (!jsonBody.__metadata) {
  118. jsonBody.__metadata = {
  119. // tslint:disable-next-line:object-literal-key-quotes
  120. 'type': type
  121. };
  122. }
  123. // Call the http post method
  124. const data = JSON.stringify(jsonBody);
  125. const res = await this.httpClient.post(url, data, this.getHeaders(true, true)).toPromise().catch((err: HttpErrorResponse) => {
  126. const error = err.error;
  127. return error;
  128. });
  129. return res.d.results;
  130. }
  131. /**
  132. * This method is used to update the item in sharepoint list
  133. * @param listName pass the list name as parameter
  134. * @param id pass the id of the item.
  135. * @param jsonBody pass the data which you want to update
  136. * @param type pass the type of list.
  137. */
  138. async updateItem(listName: string, id: any, jsonBody: any, type?: string) {
  139. // Append HTTP header MERGE for UPDATE scenario
  140. const localOptions = this.getHeaders(true, false);
  141. localOptions['X-HTTP-Method'] = 'MERGE';
  142. localOptions['If-Match'] = '*';
  143. // Append metadata
  144. if (!jsonBody.__metadata) {
  145. jsonBody.__metadata = {
  146. // tslint:disable-next-line:object-literal-key-quotes
  147. 'type': type
  148. };
  149. }
  150. // stringify the data
  151. const data = JSON.stringify(jsonBody);
  152. const url = this.getItemURL(listName, id);
  153. const httpOptions = {
  154. headers: new HttpHeaders(localOptions)
  155. };
  156. // Call the http post method
  157. await this.httpClient.post(url, data, httpOptions).toPromise().catch((err: HttpErrorResponse) => {
  158. const error = err.error;
  159. return error;
  160. });
  161. }
  162. /**
  163. * This method is used to read items from sharepoint list based on REST query.
  164. * @param listName Pass the listname as a parameter
  165. * @param options pass the query
  166. */
  167. async readItems(listName: string, options?: any) {
  168. // build the read url
  169. const url = this.getReadURL(listName, options);
  170. let res;
  171. // Call the http get method
  172. res = await this.httpClient.get(url, this.getHeaders(true, true)).toPromise().catch((err: HttpErrorResponse) => {
  173. const error = err.error;
  174. return error;
  175. });
  176. return res.d.results;
  177. }
  178. /**
  179. * This method is used to delete items from sharepoint list based on REST query.
  180. * @param listName Pass the listName as a parameter.
  181. * @param id pass the list item Id
  182. */
  183. async deleteItem(listName: string, id: number) {
  184. // Append HTTP header Delete for Delete scenario
  185. const localOptions = this.getHeaders(true, false);
  186. localOptions['X-HTTP-Method'] = 'DELETE'; // set the delete header for post call.
  187. localOptions['If-Match'] = '*';
  188. const url = this.getItemURL(listName, id);
  189. const httpOptions = {
  190. headers: new HttpHeaders(localOptions)
  191. };
  192. // build the delete url
  193. let res;
  194. // Call the http delete method
  195. res = await this.httpClient.post(url, null, httpOptions).toPromise().catch((err: HttpErrorResponse) => {
  196. const error = err.error;
  197. return error;
  198. });
  199. return res;
  200. }
  201. /**
  202. * This method is used to get the choice field value from list
  203. * @param listName Pass the list name as parameter
  204. * @param options Pass the optiosn as parameter
  205. */
  206. async getChoiceFieldItems(listName: string, options?: any) {
  207. const url = this.getChoiceFieldUrl(listName, options);
  208. let res;
  209. res = await this.httpClient.get(url, this.getHeaders(true, true)).toPromise().catch((err: HttpErrorResponse) => {
  210. const error = err.error;
  211. return error;
  212. });
  213. return res.d.results;
  214. }
  216. /**
  217. * This method is used to build the url for choice columns.
  218. * @param listName Pass the list name as parameter
  219. * @param options Pass the options as parameter.
  220. */
  221. getChoiceFieldUrl(listName: string, options?: any) {
  222. const choiceUrl = this.baseUrl + '/_api/web/lists/GetByTitle(\'{listName}\')/fields';
  223. let url = choiceUrl.replace('{listName}', listName);
  224. url = this.readBuilder(url, options);
  225. return url;
  226. }
  227. }
ng g s services/GlobalObject
It will generate two files global-object.service.ts and global-object.service.spec.ts (It is used for testing). Openglobal-object.services.tsfile and paste the following code in it.
  1. import { Injectable } from '@angular/core';
  3. @Injectable({
  4. providedIn: 'root'
  5. })
  6. export class GlobalObjectService {
  7. constructor() { }
  8. //Define the SharePoint Object.
  9. public sharePointPageObject = {
  10. webAbsoluteUrl: '',
  11. webRelativeUrl: '',
  12. userId: 0
  13. };
  14. }
Step 6
Write this code in the following files which are required for our projects.
app.component.ts
  1. import { Component, ViewEncapsulation, NgZone } from '@angular/core';
  2. import { GlobalObjectService } from './services/global-object.service';
  3. import { Router } from '@angular/router';
  4. declare const _spPageContextInfo;
  6. @Component({
  7. selector: 'app-root',
  8. templateUrl: './app.component.html',
  9. styleUrls: ['./app.component.css'],
  10. encapsulation: ViewEncapsulation.None
  11. })
  12. export class AppComponent {
  13. constructor(
  14. private globalService: GlobalObjectService,
  15. private router: Router,
  16. private _ngZone: NgZone
  17. ) { }
  18. /**
  19. * This method will initialize the required variable for project
  20. */
  21. ngOnInit() {
  22. // Set the webAbsoluteUrl for localhost and sharepoint page
  23. this.globalService.sharePointPageObject.webAbsoluteUrl = window.location.href.indexOf('localhost') > -1 ? '/sites/Your Site Name'
  24. : _spPageContextInfo.webAbsoluteUrl;
  25. this.globalService.sharePointPageObject.webRelativeUrl = window.location.href.indexOf('localhost') > -1 ? '/sites/Your Site Name'
  26. : _spPageContextInfo.webRelativeUrl;
  27. this.globalService.sharePointPageObject.userId = window.location.href.indexOf('localhost') > -1 ? 'Your User Id': _spPageContextInfo.userId;
  28. // This will call first when employee page loads
  29. window['employeeComponentReference'] = {
  30. component: this, zone: this._ngZone,
  31. loadEmployeeDashboard: () => this.goToEmployeeDashboard(),
  32. };
  33. }
  34. // This method set the routing first time.
  35. goToEmployeeDashboard() {
  36. if (window.location.href.includes('employee') || !window.location.href.includes('#')) {
  37. this.router.navigate(['/employee']);
  38. }
  39. }
  40. }
app.component.html
  1. <div>
  2. <a routerLink="/employee">open employee section</a>
  3. </div>
  4. <router-outlet></router-outlet>
app.component.css
  1. @import '~primeicons/primeicons.css';
  2. body {
  3. font-family: Helvetica;
  4. font-size: 14px;
  5. }
  6. .empTable div.ui-table-wrapper {
  7. overflow: visible!important;
  8. }
  10. .empTable .ui-table-wrapper tbody.ui-table-tbody>tr>td:last-child {
  11. overflow: visible;
  12. }
  14. .empTable .ui-table-wrapper tbody.ui-table-tbody>tr>td:last-child>div {
  15. position: relative;
  16. }
  18. .empTable .ui-table-wrapper tbody.ui-table-tbody>tr>td:last-child>div>i {
  19. top: 0px !important;
  20. }
  22. .empTable .ui-table-wrapper tbody.ui-table-tbody>tr>td:last-child>div div.ui-menu {
  23. top: 0px !important;
  24. left: inherit !important;
  25. right: 40px !important;
  26. }
  27. .minFirstLastCol5Per .ui-table .ui-table-thead > tr> th:first-child,
  28. .minFirstLastCol5Per .ui-table .ui-table-thead > tr> th:last-child,
  29. .minFirstLastCol5Per .ui-table .ui-table-tbody > tr> td:first-child,
  30. .minFirstLastCol5Per .ui-table .ui-table-tbody > tr> td:last-child {
  31. width: 5% !important;
  32. }
  33. .minFirstLastCol5Per .ui-table .ui-table-tbody tr> td{
  34. word-break: break-all;
  35. }
  36. .clearBoth {
  37. clear: both;
  38. }
  39. .compulsory {
  40. display: inline;
  41. padding-right: 2px;
  42. color: #c53e3e;
  43. }
  44. .mr-5 {
  45. margin-right: 5px;
  46. }
  48. .mt-20 {
  49. margin-top: 20px;
  50. }
  51. input,
  52. optgroup,
  53. select,
  54. textarea {
  55. padding: 6px 20px 6px 6px !important;
  56. }
  57. .error {
  58. color: red !important;
  59. }
  61. .spanner {
  62. position: absolute;
  63. /* top: calc( 100vh - 35vh); */
  64. padding: 50% 0% 35% 0%;
  65. left: 0;
  66. background: #2a2a2a55;
  67. width: 100%;
  68. display: block;
  69. text-align: center;
  70. color: #FFF;
  71. transform: translateY(-50%);
  72. z-index: 1000;
  73. visibility: hidden;
  74. }
  76. .overlay {
  77. position: fixed;
  78. width: 100%;
  79. height: 100%;
  80. visibility: hidden;
  81. }
  83. .spanner,
  84. .overlay {
  85. opacity: 0;
  86. -webkit-transition: all 0.3s;
  87. -moz-transition: all 0.3s;
  88. transition: all 0.3s;
  89. }
  91. .spanner.show,
  92. .overlay.show {
  93. opacity: 1
  94. }
  95. .show {
  96. visibility: visible;
  97. }
  99. .loader,
  100. .loader:before,
  101. .loader:after {
  102. border-radius: 50%;
  103. width: 2.5em;
  104. height: 2.5em;
  105. -webkit-animation-fill-mode: both;
  106. animation-fill-mode: both;
  107. -webkit-animation: load7 1.8s infinite ease-in-out;
  108. animation: load7 1.8s infinite ease-in-out;
  109. }
  111. .loader {
  112. color: #ffffff;
  113. font-size: 10px;
  114. margin: 30px auto;
  115. position: relative;
  116. text-indent: -9999em;
  117. -webkit-transform: translateZ(0);
  118. -ms-transform: translateZ(0);
  119. transform: translateZ(0);
  120. -webkit-animation-delay: -0.16s;
  121. animation-delay: -0.16s;
  122. margin-top: 20%;
  123. }
  125. .loader:before,
  126. .loader:after {
  127. content: '';
  128. position: absolute;
  129. top: 0;
  130. }
  132. .loader:before {
  133. left: -3.5em;
  134. -webkit-animation-delay: -0.32s;
  135. animation-delay: -0.32s;
  136. }
  138. .loader:after {
  139. left: 3.5em;
  140. }
  142. @-webkit-keyframes load7 {
  143. 0%,
  144. 80%,
  145. 100% {
  146. box-shadow: 0 2.5em 0 -1.3em;
  147. }
  148. 40% {
  149. box-shadow: 0 2.5em 0 0;
  150. }
  151. }
  153. @keyframes load7 {
  154. 0%,
  155. 80%,
  156. 100% {
  157. box-shadow: 0 2.5em 0 -1.3em;
  158. }
  159. 40% {
  160. box-shadow: 0 2.5em 0 0;
  161. }
  162. }
app-routing.module.ts
  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
  3. import { EmployeeComponent } from './employee/employee.component';
  5. // Declare the route with following code
  6. const routes: Routes = [
  7. { path: '', redirectTo: 'employee', pathMatch: 'full' },
  8. { path: 'employee', component: EmployeeComponent, pathMatch: 'full' }
  9. ];
  11. @NgModule({
  12. imports: [RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' })],
  13. exports: [RouterModule]
  14. })
  16. // export the AppRouting module.
  17. export class AppRoutingModule { }

Integrate third party library (PrimeNg) for showing records

We can easily add a third-party module or framework using npm commands.
Step 1
To add third party (primeng) in our project use the following command at the project directory(D:/Arvind/Solution/SharePointWithAngular)
npm install primeng --save - To install primeng framework
npm install primeicons --save - To install primeng icons.
npm install @angular/cdk --save - Virtual Scrolling for NgPrime dropdown depends on this library.
After installing primeng successfully, add the following CSS in angular.json file under styles tag to use primeng, CSS and icons.
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeflex/primeflex.css",
"node_modules/primeicons/primeicons.css"
Step 2
Using Angular CLI, create the angular component(Employee) with this command.
ng g c Employee where (g - generate and c-component)
Create one interface folder at src/app level and create employeeInterfaces.ts file under interface folder with the below code.
  1. export interface IEmployee {
  2. ID: number;
  3. FullName: String;
  4. FirstName: String;
  5. LastName: String;
  6. PhoneNo: number;
  7. Address: String;
  8. Role: String;
  9. IsActive: String;
  10. Created: Date;
  11. Modified: Date;
  12. ModifiedID: number;
  13. ModifiedBy: String;
  14. }
Step 3
To use various ngprime component such as table(p-table), dropdown(p-dropdown), multiselect(p-multiselect), sidebar(p-sidebar) etc, import these files into app.module.ts files.
  1. import { MultiSelectModule } from 'primeng/multiselect';
  2. import {SidebarModule} from 'primeng/sidebar';
  3. import { DynamicDialogModule, DialogService } from 'primeng/dynamicdialog';
  4. import { ToastModule } from 'primeng/toast';
  5. import { DialogModule } from 'primeng/dialog';
  6. import { ButtonModule } from 'primeng/button';
  7. import {ConfirmDialogModule} from 'primeng/confirmdialog';
  8. import { MenuModule } from 'primeng/menu';
  9. import {TableModule} from 'primeng/table';
  10. import {DropdownModule} from 'primeng/dropdown';
  11. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  12. import { HttpClientModule } from '@angular/common/http';
  13. import { DatePipe } from '@angular/common';
  14. import { MessageService, ConfirmationService } from 'primeng/api';
Complete app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule, ReactiveFormsModule } from "@angular/forms"
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { EmployeeComponent } from './employee/employee.component';
  7. import { MultiSelectModule } from 'primeng/multiselect';
  8. import {SidebarModule} from 'primeng/sidebar';
  9. import { DynamicDialogModule, DialogService } from 'primeng/dynamicdialog';
  10. import { ToastModule } from 'primeng/toast';
  11. import { DialogModule } from 'primeng/dialog';
  12. import { ButtonModule } from 'primeng/button';
  13. import {ConfirmDialogModule} from 'primeng/confirmdialog';
  14. import { MenuModule } from 'primeng/menu';
  15. import {TableModule} from 'primeng/table';
  16. import {DropdownModule} from 'primeng/dropdown';
  17. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  18. import { HttpClientModule } from '@angular/common/http';
  19. import { DatePipe } from '@angular/common';
  20. import { MessageService, ConfirmationService } from 'primeng/api';
  21. @NgModule({
  22. declarations: [
  23. AppComponent,
  24. EmployeeComponent
  25. ],
  26. imports: [
  27. BrowserModule,
  28. AppRoutingModule,
  29. MultiSelectModule,
  30. DynamicDialogModule,
  31. ToastModule,
  32. DialogModule,
  33. ButtonModule,
  34. MenuModule,
  35. FormsModule,
  36. TableModule,
  37. SidebarModule,
  38. DropdownModule,
  39. ReactiveFormsModule,
  40. BrowserAnimationsModule,
  41. HttpClientModule,
  42. ConfirmDialogModule
  43. ],
  44. providers: [DialogService, DatePipe, MessageService, ConfirmationService],
  45. bootstrap: [AppComponent]
  46. })
  47. export class AppModule { }
Step 4
Add the below code in employee component (Employee component generates these four files).
employee.html
  1. <div class="mt-20">
  2. <button pButton icon="pi pi-plus-circle" label="Add New Employee" type="button"
  3. (click)="showAddEditEmployeeForm()"></button>
  4. </div>
  5. <div class="clearBoth"></div>
  6. <div #loader class="overlay"></div>
  7. <div #spanner class="spanner">
  8. <div class="loader"></div>
  9. <p>Please wait...</p>
  10. </div>
  11. <div class="empTable mt-20">
  12. <div *ngIf="showTable">
  13. <p-table #up [columns]="employeeColumns" [value]="employeeDataArray" [paginator]="true" [rows]="10"
  14. class="minFirstLastCol5Per">
  15. <ng-template pTemplate="header" let-columns>
  16. <tr>
  17. <th>Sr.No.</th>
  18. <th *ngFor="let col of columns" [pSortableColumn]="col.field" [hidden]="!col.visibility">
  19. {{col.header}}
  20. <p-sortIcon [field]="col.field" ariaLabel="Activate to sort"
  21. ariaLabelDesc="Activate to sort in descending order"
  22. ariaLabelAsc="Activate to sort in ascending order">
  23. </p-sortIcon>
  24. </th>
  25. <th></th>
  26. </tr>
  27. <tr>
  28. <th></th>
  29. <th *ngFor="let col of columns" [ngSwitch]="col.field" [hidden]="!col.visibility">
  30. <p-multiSelect *ngSwitchCase="'FirstName'" [style]="{'width':'100%'}"
  31. [options]="employeeMultiColArray.firstNameArray"
  32. (onChange)="up.filter($event.value, col.field, 'in')"
  33. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  34. (onPanelShow)="isOptionFilter=true;">
  35. </p-multiSelect>
  36. <p-multiSelect *ngSwitchCase="'LastName'" [style]="{'width':'100%'}"
  37. [options]="employeeMultiColArray.lastNameArray"
  38. (onChange)="up.filter($event.value, col.field, 'in')"
  39. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  40. (onPanelShow)="isOptionFilter=true;">
  41. </p-multiSelect>
  42. <p-multiSelect *ngSwitchCase="'FullName'" [style]="{'width':'100%'}"
  43. [options]="employeeMultiColArray.fullNameArray"
  44. (onChange)="up.filter($event.value, col.field, 'in')"
  45. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  46. (onPanelShow)="isOptionFilter=true;">
  47. </p-multiSelect>
  48. <p-multiSelect *ngSwitchCase="'PhoneNo'" [style]="{'width':'100%'}"
  49. [options]="employeeMultiColArray.phoneNoArray"
  50. (onChange)="up.filter($event.value, col.field, 'in')"
  51. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  52. (onPanelShow)="isOptionFilter=true;">
  53. </p-multiSelect>
  54. <p-multiSelect *ngSwitchCase="'Address'" [style]="{'width':'100%'}"
  55. [options]="employeeMultiColArray.addressArray"
  56. (onChange)="up.filter($event.value, col.field, 'in')"
  57. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  58. (onPanelShow)="isOptionFilter=true;">
  59. </p-multiSelect>
  60. <p-multiSelect *ngSwitchCase="'Role'" [style]="{'width':'100%'}"
  61. [options]="employeeMultiColArray.roleArray"
  62. (onChange)="up.filter($event.value, col.field, 'in')"
  63. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  64. (onPanelShow)="isOptionFilter=true;">
  65. </p-multiSelect>
  66. <p-multiSelect *ngSwitchCase="'IsActive'" [style]="{'width':'100%'}"
  67. [options]="employeeMultiColArray.isActiveArray"
  68. (onChange)="up.filter($event.value, col.field, 'in')"
  69. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  70. (onPanelShow)="isOptionFilter=true;">
  71. </p-multiSelect>
  72. <p-multiSelect *ngSwitchCase="'Modified'" [style]="{'width':'100%'}"
  73. [options]="employeeMultiColArray.lastUpdatedArray"
  74. (onChange)="up.filter($event.value, col.field, 'in')"
  75. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  76. (onPanelShow)="isOptionFilter=true;">
  77. </p-multiSelect>
  78. <p-multiSelect *ngSwitchCase="'ModifiedBy'" [style]="{'width':'100%'}"
  79. [options]="employeeMultiColArray.lastModifiedByArray"
  80. (onChange)="up.filter($event.value, col.field, 'in')"
  81. (keydown.enter)="$event.preventDefault()" filter="true" resetFilterOnHide="true"
  82. (onPanelShow)="isOptionFilter=true;">
  83. </p-multiSelect>
  84. </th>
  85. <th></th>
  86. </tr>
  87. </ng-template>
  88. <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
  89. <tr>
  90. <td>
  91. {{rowIndex+1}}
  92. </td>
  93. <td *ngFor="let col of columns" [hidden]="!col.visibility" class="ui-resizable-column">
  94. <ng-container *ngIf="col.field != 'Created' && col.field != 'Modified' && col.field != '' ">
  95. {{rowData[col.field]}}
  96. </ng-container>
  97. <ng-container *ngIf="col.field == 'Modified'">
  98. {{rowData[col.field] | date:'MMM dd, yyyy' }}
  99. </ng-container>
  100. </td>
  101. <td>
  102. <div>
  103. <p-menu #menu [popup]="true" [model]="pMenuItems" styleClass="borderMenu"></p-menu>
  104. <i class="pi pi-ellipsis-v" style="font-size:2em;top: 100px !important;cursor: pointer;"
  105. (click)="storeRowData(rowData); menu.toggle($event);"></i>
  106. </div>
  107. </td>
  108. </tr>
  109. </ng-template>
  110. <ng-template pTemplate="emptymessage" let-columns>
  111. <tr>
  112. <td [attr.colspan]="9">
  113. No Data found
  114. </td>
  115. </tr>
  116. </ng-template>
  117. </p-table>
  118. </div>
  119. <div *ngIf="!employeeDataArray.length">
  120. <span>No employee data found.</span>
  121. </div>
  122. </div>
  123. <div class="clearBoth"></div>
  124. <p-dialog [(visible)]="isEmployeeFormVisible" [modal]="true" appendTo="body" [style]="{width: '1000px'}">
  125. <p-header *ngIf="isAddEmployee">
  126. Add Employee
  127. </p-header>
  128. <p-header *ngIf="!isAddEmployee">
  129. Edit Employee
  130. </p-header>
  131. <form [formGroup]='employeeForm'>
  132. <div class="p-grid mt-20">
  133. <div class="p-col-2 "><span class="compulsory">*</span>First Name</div>
  134. <div class="p-col-4">
  135. <input class="mr-5" type="text" size="30" formControlName="firstName" placeholder="First Name"
  136. pInputText>
  137. <div class="error" *ngIf="isEmployeeFormSubmit && employeeForm.controls.firstName.errors">
  138. <div *ngIf="employeeForm.controls.firstName.errors.required">
  139. First Name is required</div>
  140. </div>
  141. </div>
  142. <div class="p-col-2 "><span class="compulsory">*</span>Last Name</div>
  143. <div class="p-col-4">
  144. <input class="mr-5" type="text" size="30" formControlName="lastName" placeholder="Last Name" pInputText>
  145. <div class="error" *ngIf="isEmployeeFormSubmit && employeeForm.controls.lastName.errors">
  146. <div *ngIf="employeeForm.controls.lastName.errors.required">
  147. Last Name is required</div>
  148. </div>
  149. </div>
  150. </div>
  151. <div class="p-grid mt-20">
  152. <div class="p-col-2 "><span class="compulsory">*</span>Phone Number</div>
  153. <div class="p-col-4">
  154. <input class="mr-5" type="number" size="30" formControlName="phoneNum" placeholder="Phone Number"
  155. pInputText>
  156. <div class="error" *ngIf="isEmployeeFormSubmit && employeeForm.controls.phoneNum.errors">
  157. <div *ngIf="employeeForm.controls.phoneNum.errors.required">Phone Number is required</div>
  158. </div>
  159. </div>
  160. <div class="p-col-2 "><span class="compulsory">*</span>Address</div>
  161. <div class="p-col-4">
  162. <textarea [rows]="5" [cols]="40" formControlName="address" pInputTextarea
  163. autoResize="autoResize"></textarea>
  164. <div class="error" *ngIf="isEmployeeFormSubmit && employeeForm.controls.address.errors">
  165. <div *ngIf="employeeForm.controls.address.errors.required">
  166. Address is required</div>
  167. </div>
  168. </div>
  169. </div>
  170. <div class="p-grid mt-20">
  171. <div class="p-col-2 "><span class="compulsory">*</span>Role</div>
  172. <div class="p-col-4">
  173. <p-dropdown [options]="roleDropArray" placeholder="Select Role" formControlName="role" filter="true"
  174. resetFilterOnHide="true" showIcon="true">
  175. </p-dropdown>
  176. <div class="error" *ngIf="isEmployeeFormSubmit && employeeForm.controls.role.errors">
  177. <div *ngIf="employeeForm.controls.role.errors.required">
  178. Role is required</div>
  179. </div>
  180. </div>
  181. <div class="p-col-2 "><span class="compulsory">*</span>Is Active</div>
  182. <div class="p-col-4">
  183. <p-dropdown [options]="isActiveDropArray" placeholder="Select Active" formControlName="isActive"
  184. filter="true" resetFilterOnHide="true" showIcon="true">
  185. </p-dropdown>
  186. <div class="error" *ngIf="isEmployeeFormSubmit && employeeForm.controls.isActive.errors">
  187. <div *ngIf="employeeForm.controls.isActive.errors.required">
  188. Is Active is required</div>
  189. </div>
  190. </div>
  191. </div>
  192. </form>
  193. <p-footer>
  194. <button pButton label="{{isAddEmployee ? 'Add Employee': 'Edit Empoyee'}}" type="button" class="adminBtn"
  195. (click)="saveEmployee()"></button>
  196. <button pButton label="Cancel" type="button" class="adminBtn" (click)="cancelEmployee()"></button>
  197. </p-footer>
  198. </p-dialog>
  199. <div *ngIf="isEmployeeSideVisible" class="ng-right-side-overlay">
  200. <p-sidebar [(visible)]="isEmployeeSideVisible" position="right" styleClass="ui-sidebar-md">
  201. <p-table [value]="employeeRightSideArray">
  202. <ng-template pTemplate="header">
  203. <tr>
  204. <th>Name</th>
  205. <th>Value</th>
  206. </tr>
  207. </ng-template>
  208. <ng-template pTemplate="body" let-rowData let-emp style="overflow: auto">
  209. <tr>
  210. <td [ngStyle]="{'color':'#d7181f'}">First Name</td>
  211. <td>{{emp.FirstName}}</td>
  212. </tr>
  213. <tr>
  214. <td [ngStyle]="{'color':'#d7181f'}">Last Name</td>
  215. <td>{{emp.LastName}}</td>
  216. </tr>
  217. <tr>
  218. <td [ngStyle]="{'color':'#d7181f'}">Full Name</td>
  219. <td>{{emp.FullName}}</td>
  220. </tr>
  221. <tr>
  222. <td [ngStyle]="{'color':'#d7181f'}">Phone Number</td>
  223. <td>{{emp.PhoneNo}}</td>
  224. </tr>
  225. <tr>
  226. <td [ngStyle]="{'color':'#d7181f'}">Address</td>
  227. <td>{{emp.Address}}</td>
  228. </tr>
  229. <tr>
  230. <td [ngStyle]="{'color':'#d7181f'}">Role</td>
  231. <td>{{emp.Role}}</td>
  232. </tr>
  233. <tr>
  234. <td [ngStyle]="{'color':'#d7181f'}">IsActive</td>
  235. <td>{{emp.IsActive}}</td>
  236. </tr>
  237. <tr>
  238. <td [ngStyle]="{'color':'#d7181f'}">Last Modified Date</td>
  239. <td>{{emp.Modified | date:'MMM dd, yyyy'}}</td>
  240. </tr>
  241. <tr>
  242. <td [ngStyle]="{'color':'#d7181f'}">Last Modified By</td>
  243. <td>{{emp.ModifiedBy}}</td>
  244. </tr>
  245. </ng-template>
  246. </p-table>
  247. </p-sidebar>
  248. </div>
  249. <p-toast position="bottom-center" key="employeeToast"></p-toast>
  250. <p-confirmDialog key="confirm"></p-confirmDialog>
employee.component.ts
  1. import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
  2. import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
  3. import { IEmployee } from '../interface/empoyeeInterfaces';
  4. import { ConstantService } from '../services/constant.service';
  5. import { SPOperationService } from '../services/spoperation.service';
  6. import { MessageService, ConfirmationService } from 'primeng/api';
  7. import { DatePipe } from '@angular/common';
  8. import { CommonService } from '../services/common.service';
  9. @Component({
  10. selector: 'app-employee',
  11. templateUrl: './employee.component.html',
  12. styleUrls: ['./employee.component.css'],
  13. encapsulation: ViewEncapsulation.None // it will apply the parent css to this component.
  14. })
  15. export class EmployeeComponent implements OnInit {
  16. // declare variable
  17. showTable: boolean;
  18. isOptionFilter: boolean;
  19. isEmployeeFormSubmit: boolean = false;
  20. isAddEmployee: boolean;
  21. isEmployeeFormVisible: boolean;
  22. currEmployeeObj: IEmployee;
  23. employeeRightSideArray = [];
  24. isEmployeeSideVisible: boolean = false;
  25. // declare pmenu item which show menu in table
  26. pMenuItems = [];
  27. // create different array for multiselect.
  28. employeeMultiColArray = {
  29. firstNameArray: [],
  30. lastNameArray: [],
  31. fullNameArray: [],
  32. phoneNoArray: [],
  33. addressArray: [],
  34. roleArray: [],
  35. isActiveArray: [],
  36. lastUpdatedArray: [],
  37. lastModifiedByArray: []
  38. };
  39. // create employee coloumn array
  40. employeeColumns = [];
  41. // create employee Array
  42. employeeDataArray = [];
  43. // create role dropdown array
  44. roleDropArray = [];
  45. // create Is Active dropdown array.
  46. isActiveDropArray = [];
  47. // create form variable.
  48. employeeForm: FormGroup;
  50. @ViewChild("loader", { static: false }) loaderView: ElementRef;
  51. @ViewChild("spanner", { static: false }) spannerView: ElementRef;
  52. /**
  53. * The constructor will create the object of following classes.
  54. * @param frmbuilder
  55. * @param constant
  56. * @param spServices
  57. */
  58. constructor(
  59. private frmbuilder: FormBuilder,
  60. private constant: ConstantService,
  61. private spServices: SPOperationService,
  62. private messageService: MessageService,
  63. private datepipe: DatePipe,
  64. private common: CommonService,
  65. private confirmationService: ConfirmationService
  66. ) { }
  68. ngOnInit(): void {
  69. this.showTable = false;
  70. this.isEmployeeFormVisible = false;
  71. // Initialize the employee form.
  72. this.initEmployeeForm();
  73. // put the value into employee column array.
  74. this.employeeColumns = [
  75. { field: 'FirstName', header: 'First Name', visibility: true },
  76. { field: 'LastName', header: 'Last Name', visibility: true },
  77. { field: 'FullName', header: 'Full Name', visibility: true },
  78. { field: 'PhoneNo', header: 'PhoneNo Number', visibility: true },
  79. { field: 'Address', header: 'Address', visibility: true },
  80. { field: 'Role', header: 'Role', visibility: true },
  81. { field: 'IsActive', header: 'IsActive', visibility: true },
  82. { field: 'Modified', header: 'Last Updated Date', visibility: true },
  83. { field: 'ModifiedBy', header: 'Last Updated By', visibility: true },
  84. ];
  85. this.loadEmployeeTable();
  86. }
  87. /**
  88. * This method is used to get the value from employee list.
  89. * and pass that store that value into employeeDataArray = [];
  90. */
  91. async loadEmployeeTable() {
  92. this.isEmployeeFormVisible = false;
  93. this.employeeDataArray = [];
  94. // Prepare the Get query
  95. const getEmployeeOptions = Object.assign({}, this.constant.QUERY.GET_EMPLOYEE);
  96. getEmployeeOptions.filter = getEmployeeOptions.filter.replace(/{{isActive}}/gi, 'Yes');
  97. // Call the SharePoint Rest GET
  98. const results = await this.spServices.readItems(this.constant.listNames.Employee.name, getEmployeeOptions);
  99. // Check the data in results
  100. if (results && results.length) {
  101. const tempArray = [];
  102. // loop through array and store into the employeeData Array.
  103. results.forEach(element => {
  104. const employeeObj: IEmployee = {
  105. ID: element.ID,
  106. FullName: element.Title,
  107. FirstName: element.FirstName,
  108. LastName: element.LastName,
  109. PhoneNo: element.PhoneNo,
  110. Role: element.Role,
  111. Address: element.Address,
  112. IsActive: element.IsActive,
  113. Created: element.Created,
  114. Modified: new Date(this.datepipe.transform(element.Modified, 'MMM dd, yyyy')),
  115. ModifiedID: element.Editor.ID,
  116. ModifiedBy: element.Editor.Title
  117. }
  118. tempArray.push(employeeObj);
  119. });
  120. this.employeeDataArray = tempArray;
  121. // Assign the value to multi-select
  122. this.colFilterData(tempArray);
  123. this.showTable = true;
  124. }
  125. }
  126. /**
  127. * This method is used to uniquely assign the value to multiselect dropdown
  128. * @param colData
  129. */
  130. colFilterData(colData) {
  131. // sort and unique data assign to multiselect firstNameArray
  132. this.employeeMultiColArray.firstNameArray = this.common.sortData(this.common.uniqueArrayObj(colData.map(a => {
  133. const b = {
  134. label: a.FirstName, value: a.FirstName
  135. };
  136. return b;
  137. })));
  138. // sort and unique data assign to multiselect lastNameArray
  139. this.employeeMultiColArray.lastNameArray = this.common.sortData(this.common.uniqueArrayObj(colData.map(a => {
  140. const b = {
  141. label: a.LastName, value: a.LastName
  142. };
  143. return b;
  144. })));
  145. // sort and unique data assign to multiselect fullNameArray
  146. this.employeeMultiColArray.fullNameArray = this.common.sortData(this.common.uniqueArrayObj(colData.map(a => {
  147. const b = {
  148. label: a.FullName, value: a.FullName
  149. };
  150. return b;
  151. })));
  152. // sort and unique data assign to multiselect phoneNoArray
  153. this.employeeMultiColArray.phoneNoArray = this.common.sortNumberArray(this.common.uniqueArrayObj(colData.map(a => {
  154. const b = {
  155. label: a.PhoneNo, value: a.PhoneNo
  156. };
  157. return b;
  158. })));
  159. // sort and unique data assign to multiselect roleArray
  160. this.employeeMultiColArray.roleArray = this.common.sortData(this.common.uniqueArrayObj(colData.map(a => {
  161. const b = {
  162. label: a.Role, value: a.Role
  163. };
  164. return b;
  165. })));
  166. // sort and unique data assign to multiselect addressArray
  167. this.employeeMultiColArray.addressArray = this.common.sortData(this.common.uniqueArrayObj(colData.map(a => {
  168. const b = {
  169. label: a.Address, value: a.Address
  170. };
  171. return b;
  172. })));
  173. // sort and unique data assign to multiselect isActiveArray
  174. this.employeeMultiColArray.isActiveArray = this.common.sortData(this.common.uniqueArrayObj(colData.map(a => {
  175. const b = {
  176. label: a.IsActive, value: a.IsActive
  177. };
  178. return b;
  179. })));
  181. // this.employeeMultiColArray.firstNameArray = this.common.sortData(this.common.uniqueArrayObj(colData.map(a => { const b = { label: a.FirstName, value: a.FirstName }; return b; }).filter((ele: { label: any; }) => ele.label)));
  182. const modified = this.common.sortDateArray(this.common.uniqueArrayObj(colData.map(a => { const b = { label: this.datepipe.transform(a.Modified, 'MMM dd, yyyy'), value: a.Modified }; return b; }).filter((ele: { label: any; }) => ele.label)));
  183. this.employeeMultiColArray.lastUpdatedArray = modified.map((a: any) => { const b = { label: this.datepipe.transform(a, 'MMM dd, yyyy'), value: new Date(this.datepipe.transform(a, 'MMM dd, yyyy')) }; return b; }).filter((ele: { label: any; }) => ele.label);
  185. // sort and unique data assign to multiselect lastModifiedArray
  186. this.employeeMultiColArray.lastModifiedByArray = this.common.sortData(this.common.uniqueArrayObj(colData.map(a => {
  187. const b = {
  188. label: a.ModifiedBy, value: a.ModifiedBy
  189. };
  190. return b;
  191. })));
  192. }
  193. optionFilter(event: any) {
  194. if (event.target.value) {
  195. this.isOptionFilter = false;
  196. }
  197. }
  198. storeRowData(rowData) {
  199. this.currEmployeeObj = rowData;
  200. // Add menu to pMenuItems Array
  201. this.pMenuItems = [
  202. { label: 'Edit', command: (e) => this.editEmployee(rowData) },
  203. { label: 'View', command: (e) => this.viewEmployee(rowData) },
  204. { label: 'Mark As InActive', command: (e) => this.markAsInactive() },
  205. { label: 'Delete', command: (e) => this.deleteEmployee() }
  206. ];
  207. console.log(rowData);
  208. }
  209. /**
  210. * This method is used to show the Add employee form.
  211. */
  212. showAddEditEmployeeForm() {
  213. // make isAddEmployee variable to true. So that add employee form will visible.
  214. this.loaderView.nativeElement.classList.add('show');
  215. this.spannerView.nativeElement.classList.add('show');
  216. this.employeeForm.reset();
  217. this.loadDropDown();
  218. setTimeout(() => {
  219. this.isAddEmployee = true;
  220. }, 500);
  221. this.isEmployeeFormVisible = true;
  222. this.spannerView.nativeElement.classList.remove('show');
  223. }
  224. async loadDropDown() {
  225. this.isActiveDropArray = [];
  226. this.roleDropArray = [];
  227. // Get the choice column role value form Employee list (Role is choice column);
  228. const getRoleInfo = Object.assign({}, this.constant.QUERY.GET_CHOICEFIELD);
  229. getRoleInfo.filter = getRoleInfo.filter.replace(/{{choiceField}}/gi, 'Role');
  230. // Get choice value
  231. const choiceResults = await this.spServices.getChoiceFieldItems(this.constant.listNames.Employee.name, getRoleInfo);
  232. console.log("Role Array value", choiceResults);
  233. if (choiceResults && choiceResults.length) {
  234. const tempArray = choiceResults[0].Choices.results;
  235. this.roleDropArray = [];
  236. // loop through each choice and add into roleDropdown array.
  237. tempArray.forEach(element => {
  238. this.roleDropArray.push({ label: element, value: element });
  239. });
  240. }
  241. // Here you can again make call to employee list to get the choice column value
  242. // But I have used the static value here.
  243. this.isActiveDropArray.push(
  244. { label: 'Yes', value: 'Yes' },
  245. { label: 'No', value: 'No' }
  246. );
  247. }
  248. /**
  249. * This method is used to edit the employee
  250. * @param currObj
  251. */
  252. async editEmployee(currObj) {
  253. this.spannerView.nativeElement.classList.add('show');
  254. await this.loadDropDown();
  255. this.employeeForm.get('firstName').setValue(currObj.FirstName);
  256. this.employeeForm.get('lastName').setValue(currObj.LastName);
  257. this.employeeForm.get('role').setValue(currObj.Role);
  258. this.employeeForm.get('address').setValue(currObj.Address);
  259. this.employeeForm.get('phoneNum').setValue(currObj.PhoneNo);
  260. this.employeeForm.get('isActive').setValue(currObj.IsActive);
  261. this.isAddEmployee = false;
  262. this.isEmployeeFormVisible = true;
  263. this.spannerView.nativeElement.classList.remove('show');
  264. }
  265. /**
  266. * This method is used to show the employee on right side.
  267. * @param currObj
  268. */
  269. viewEmployee(currObj) {
  270. this.isEmployeeSideVisible = true;
  271. this.spannerView.nativeElement.classList.add('show');
  272. this.employeeRightSideArray = [currObj]
  273. this.spannerView.nativeElement.classList.remove('show');
  274. }
  275. /**
  276. * This method is used to mark the current employee as Inactive
  277. * @param currObj Pass the current employee obj
  278. */
  279. async markAsInactive() {
  280. // Pop messages.
  281. this.confirmationService.confirm({
  282. message: 'Do you want to mark this record as Inactive?',
  283. header: 'Delete Confirmation',
  284. icon: 'pi pi-info-circle',
  285. key: 'confirm',
  286. accept: () => {
  287. this.onSubmit('InActive');
  288. },
  289. });
  290. }
  291. /**
  292. * This method is used to perform action based on operation parameter
  293. *
  294. * If InActive - It will update the Inactive='No' in Employee List.
  295. * If delete - It will delete the record from list.
  296. * @param operation
  297. */
  298. async onSubmit(operation) {
  299. this.spannerView.nativeElement.classList.add('show');
  300. if (operation === 'InActive') {
  301. // prepare the Json body
  302. const data = {
  303. __metadata: { type: this.constant.listNames.Employee.type },
  304. IsActive: 'No'
  305. };
  306. // call the update function
  307. await this.spServices.updateItem(this.constant.listNames.Employee.name, this.currEmployeeObj.ID, data, this.constant.listNames.Employee.type);
  308. this.messageService.add({
  309. key: 'employeeToast', severity: 'success', summary: 'Success message',
  310. detail: 'This employee marked as InActive in the list.'
  311. });
  312. await this.loadEmployeeTable();
  313. this.spannerView.nativeElement.classList.remove('show');
  314. }
  315. if (operation === 'delete') {
  316. this.spannerView.nativeElement.classList.add('show');
  317. // it will delete the employee record from list.
  318. await this.spServices.deleteItem(this.constant.listNames.Employee.name, this.currEmployeeObj.ID);
  319. this.messageService.add({
  320. key: 'employeeToast', severity: 'success', summary: 'Success message',
  321. detail: 'This employee deleted from list.'
  322. });
  323. await this.loadEmployeeTable();
  324. this.spannerView.nativeElement.classList.remove('show');
  325. }
  326. }
  327. /**
  328. * This method get called when delete option is selected form menu.
  329. * @param currObj pass the current employee object.
  330. */
  331. async deleteEmployee() {
  332. this.confirmationService.confirm({
  333. message: 'Do you want to delete this record?',
  334. header: 'Delete Confirmation',
  335. icon: 'pi pi-info-circle',
  336. key: 'confirm',
  337. accept: () => {
  338. this.onSubmit('delete');
  339. },
  340. });
  341. }
  342. /**
  343. * This method is used to add/update the employee information into sharepoint list.
  344. * If variable contains the value as per following
  345. *
  346. * isAddEmployee = true - It will add item to list.
  347. * isAddEmployee = false - It will update item to list.
  348. *
  349. */
  350. async saveEmployee() {
  351. // hide the spanner.
  352. // this.spannerView.nativeElement.classList.remove('show');
  353. // Allow the form to be able to submit it.
  354. this.loaderView.nativeElement.classList.add('show');
  355. this.isEmployeeFormSubmit = true;
  356. //check if isAddEmployee is true or not
  357. if (this.isAddEmployee) { // add employee
  358. if (this.employeeForm.valid) {
  359. this.spannerView.nativeElement.classList.add('show');
  360. const empData = this.getEmployeeData();
  361. const result = this.spServices.createItem(this.constant.listNames.Employee.name, empData, this.constant.listNames.Employee.type);
  362. this.messageService.add({
  363. key: 'employeeToast', severity: 'success', summary: 'Success message',
  364. detail: 'Employee added into the list.'
  365. });
  366. this.isAddEmployee = false;
  367. await this.loadEmployeeTable();
  368. //this.loaderView.nativeElement.classList.remove('show');
  369. this.spannerView.nativeElement.classList.remove('show');
  370. }
  371. } else { // update employee
  372. this.spannerView.nativeElement.classList.add('show');
  373. const data = this.getEmployeeData();
  374. await this.spServices.updateItem(this.constant.listNames.Employee.name, this.currEmployeeObj.ID, data, this.constant.listNames.Employee.type);
  375. this.messageService.add({
  376. key: 'employeeToast', severity: 'success', summary: 'Success message',
  377. detail: 'Employee updated Successfully.'
  378. });
  379. this.isAddEmployee = false;
  380. await this.loadEmployeeTable();
  381. this.spannerView.nativeElement.classList.remove('show');
  382. }
  383. }
  384. cancelEmployee() {
  385. this.isEmployeeFormVisible = false;
  386. //reset the form value.
  387. this.employeeForm.reset();
  388. }
  389. /**
  390. * This method is used to get the form value and prepare the body data for creating new item in employee list
  391. *
  392. */
  393. getEmployeeData() {
  394. // Assingn the form value to local variable
  395. const employeeForm = this.employeeForm.value;
  396. // prepare the body data for post call
  397. const data: any = {
  398. __metadata: { type: this.constant.listNames.Employee.type },
  399. Title: employeeForm.firstName + ' ' + employeeForm.lastName,
  400. FirstName: employeeForm.firstName,
  401. LastName: employeeForm.lastName,
  402. PhoneNo: employeeForm.phoneNum,
  403. Address: employeeForm.address,
  404. Role: employeeForm.role,
  405. IsActive: employeeForm.isActive
  406. };
  407. // return the data.
  408. return data;
  409. }
  410. /**
  411. * This method is used to initialize the employee form.
  412. */
  413. initEmployeeForm() {
  414. this.employeeForm = this.frmbuilder.group({
  415. firstName: ['', [Validators.required]],
  416. lastName: ['', [Validators.required]],
  417. phoneNum: ['', Validators.required],
  418. address: ['', Validators.required],
  419. role: ['', Validators.required],
  420. isActive: ['', Validators.required]
  421. });
  422. }
  423. }
employee.component.css - I have added all the css in app.component.css file for demonstration purposes, but you can add employee specific CSS in
this file and common CSS in app.component.css.
employee.component.spec.ts - This file is used for unit testing.
Note
Now we can run and check that our code is working properly on the development environment by running these two commands in two separate command prompt windows
OR
Both commands can run on the Visual Studio code terminal by opening the respective project in Visual Studio code.
npm run serve - To start the server
npm run start - To send and get a request from the Sharepoint server.
Additionally, we can debug our code in QA and Production environment (or any environment) by using the proxy setting with following changes in app.component.ts file
Depending upon your environment replace the following line and run the above two commands.
'Your Site Name' with your actual site name
'Your User Id' with your actual Id.
  1. this.globalService.sharePointPageObject.webAbsoluteUrl = window.location.href.indexOf('localhost') > -1 ? '/sites/Your Site Name'
  2. : _spPageContextInfo.webAbsoluteUrl;
  3. this.globalService.sharePointPageObject.webRelativeUrl = window.location.href.indexOf('localhost') > -1 ? '/sites/Your Site Name'
  4. : _spPageContextInfo.webRelativeUrl;
  5. this.globalService.sharePointPageObject.userId = window.location.href.indexOf('localhost') > -1 ? 'Your User Id': _spPageContextInfo.userId;
Build and add angular project to SharePoint site
Once we have satisfied that our code is working properly then we can build and upload the code on different environments of Sharepoint sites.
Step 1
Write these codes in angular.json file for building the code in different environments under configuration tag
Change the 'Your Angular files location url' with actual file location URL (In my case: https://SiteCollectionUrl/sites/sitename/SiteAssets/AngularDocs/employee/)
Note
I have created only three environment(devEmployee, qaEmployee and prodEmployee), You can add more environments to it.
  1. "configurations": {
  2. "production": {
  3. "fileReplacements": [
  4. {
  5. "replace": "src/environments/environment.ts",
  6. "with": "src/environments/environment.prod.ts"
  7. }
  8. ],
  9. "optimization": true,
  10. "outputHashing": "all",
  11. "sourceMap": false,
  12. "extractCss": true,
  13. "namedChunks": false,
  14. "extractLicenses": true,
  15. "vendorChunk": false,
  16. "buildOptimizer": true,
  17. "budgets": [
  18. {
  19. "type": "initial",
  20. "maximumWarning": "2mb",
  21. "maximumError": "5mb"
  22. },
  23. {
  24. "type": "anyComponentStyle",
  25. "maximumWarning": "6kb",
  26. "maximumError": "10kb"
  27. }
  28. ]
  29. },
  30. "devEmployee": {
  31. "outputHashing": "none",
  32. "deployUrl": "Your Angular files location url"
  33. },
  34. "qaEmployee": {
  35. "optimization": true,
  36. "outputHashing": "bundles",
  37. "sourceMap": false,
  38. "extractCss": true,
  39. "namedChunks": false,
  40. "aot": true,
  41. "extractLicenses": true,
  42. "vendorChunk": false,
  43. "buildOptimizer": true,
  44. "deployUrl": "Your Angular files location url"
  45. },
  46. "prodEmployee": {
  47. "optimization": true,
  48. "outputHashing": "bundles",
  49. "sourceMap": false,
  50. "extractCss": true,
  51. "namedChunks": false,
  52. "aot": true,
  53. "extractLicenses": true,
  54. "vendorChunk": false,
  55. "buildOptimizer": true,
  56. "deployUrl": "Your Angular files location url"
  57. }
  58. }
Step 2
Now run the below code for a different environment:
ng build --configuration=devEmployee -- For Dev Environment (I have run this command for our project.)
ng build --configuration=qaEmployee -- For QA Environment
ng build --configuration=prodEmployee -- For Production Environment
Step 3
Once the build is completed, rename the following highlighted files by navigating to project directory/dist/projectname (Your files may differ from mine depending upon the angular version, for Angular 9, these files are generated after the build)
For devEmployee build
polyfills-es5.js to polyfills.js
vendor-es5.js to vendor.js
runtime-es5.js to runtime.js
styles-es5.js to styles.js
main-es5.js to main.js
For qaEmployee build
For prodEmployee build /
Step 4
After renaming the highlighted files, upload all the files from projectdirectory/dist/projectname (D:\Arvind\solution\SharepointWithAngular\dist\SharepointWithAngular) to Sharepoint library created in previous article (SiteAssets/AngularDocs/employee/).
Step 5
Create one page(employee.aspx) in Sharepoint and add contenteditor in it.
Step 6
Create one employee.html file, add all js and CSS file in it, then upload the file into SharePoint library(SiteAssets/AngularDocs/html/).
To use angular in SharePoint, add <app-root></app-root> in your HTML (employee.html)
  1. <!-- <link rel="stylesheet" href="/sites/Your Site Name/SiteAssets/AngularDocs/employee/styles.css?ver=1.0"> -->
  2. <!-- <base href="/sites/Your Site Name/employee"> -->
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <app-root></app-root>
  5. <script type="text/javascript">
  6. // call when dom loaded
  7. document.addEventListener('DOMContentLoaded', function () {
  8. executeDelayLoad();
  9. setInterval(reloadContextInfo, 1200000);
  10. }, false);
  11. // store all the angular js file into array.
  12. function executeDelayLoad() {
  13. var array = [
  14. "/sites/Your Site Name/SiteAssets/AngularDocs/employee/runtime.js?ver=1.0",
  15. "/sites/Your Site Name/SiteAssets/AngularDocs/employee/polyfills.js?ver=1.0",
  16. "/sites/Your Site Name/SiteAssets/AngularDocs/employee/vendor.js?ver=1.0",
  17. "/sites/Your Site Name/SiteAssets/AngularDocs/employee/main.js?ver=1.0",
  18. "/sites/Your Site Name/SiteAssets/AngularDocs/employee/styles.js?ver=1.0"
  19. ]
  20. loadJSFile(array);
  21. }
  22. // create script tag and add the angular js file to page.
  23. function loadJSFile(arrayJS) {
  24. var script = arrayJS.shift();
  25. var jsElm = document.createElement("script");
  26. // set the type attribute
  27. jsElm.type = "text/javascript";
  28. // make the script element load file
  29. jsElm.src = script;
  30. jsElm.async = false;
  31. jsElm.onload = function (script) {
  32. //console.log(script + ' loaded!');
  33. if (arrayJS.length) {
  34. loadJSFile(arrayJS);
  35. } else {
  36. window.employeeComponentReference.zone.run(() => { window.employeeComponentReference.loadEmployeeDashboard(); });
  37. }
  39. };
  40. // finally insert the element to the body element in order to load the script
  41. document.getElementById("contentBox").parentElement.parentElement.appendChild(jsElm);
  43. }
  44. // IF session expire reload the context of page.
  45. function reloadContextInfo() {
  46. $.ajax({
  47. url: _spPageContextInfo.webAbsoluteUrl + "/_api/contextinfo",
  48. method: "POST",
  49. headers: { "Accept": "application/json; odata=verbose" },
  50. success: function (data) {
  51. $('#__REQUESTDIGEST').val(data.d.GetContextWebInformation.FormDigestValue)
  52. },
  53. error: function (data, errorCode, errorMessage) {
  54. alert("Session timed out. Page will be refreshed.");
  55. window.location.reload();
  56. }
  57. });
  58. }
  59. </script>
Step 7
Finally, refer this html(employee.html) file in (Employee.aspx) file content editor.
Open Employee.aspx file in edit mode and edit the content editor to add employee.html in the Context link section.
Once done check-in and publish the Employee.aspx page, So that it be available for everyone who has permission.
Now browse employee.aspx page to perform the crud operation using angular and SharePoint online.
To Add Employee
Click on Add New Employee button and enter the values in fields.
To Edit
Click on the three dots of the last column in the table to perform the appropriate action (Edit) operation.
To View
To view the data in the right side layout, click the three dots, and select the View option.
To delete
To delete the employee, click on three dots and select the Delete option
Additionally, pagination, sorting, and ordering are also available in the demo.

Conclusion

Now we know how to create a SharePoint project with the latest angular without using the SharePoint framework.
Hope you have enjoyed it. Thank You
You can download the complete angular project from the attachment.