Introduction

This article will help you generate an automatic UI page according to your SharePoint list using Angular and jQuery. Also, you can customize your UI color by giving an input with a specified color.

To whom

It will be useful for everyone. Even a person without any coding knowledge can generate the code and create a new record to SharePoint list with the help of the UI.

Objective

Generally, we take so much time to build a nice UI with its functionality for a SharePoint list as per the column properties. But using this article, we can reduce the time to some seconds. Hence, the main objective of this article is to save time and everyone can generate a UI with its functionality easily.

Overview
Procedure
Step 1

Create a web page for giving the inputs like list name and desired color.

SharePoint
Code for the above UI

  1. <table id="TableForListName" class="table-condensed">
  2. <thead>
  3. </thead>
  4. <tbody>
  5. <tr>
  6. <td><label>UI for which List?</label></td>
  7. <td><input class="form-control" ng-model="NameOflist" type="text"></td>
  8. </tr>
  9. <tr>
  10. <td><label>Give a color for UI</label></td>
  11. <td><input class="form-control" ng-model="Clr" type="text"></td>
  12. </tr>
  13. <tr>
  14. <td></td>
  15. <td><input type="button" value="Generate UI" ng-click="GenerateUI()"></td>
  16. </tr>
  17. </tbody>
  18. </table>
Step 2

Fill the inputs with your list name and color as below.

SharePoint
Here, “ListForGenerateUI” is my list.

Let’s see the list columns below.

SharePoint

Step 3

Click on “Generate UI” button. It generates UI as per columns in the list.

SharePoint
Code for the “Generate UI” button

  1. $scope.GenerateUI = function() {
  2. $("#TableForListName").hide();
  3. $("#UITable").show();
  4. PrimeColor = $scope.Clr;/*Setting color input to a global variable*/
  5. listName = $scope.NameOflist;/*Setting ListName input to another global variable*/
  6. $.ajax({
  7. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/fields?$filter= substringof('SourceID=\"{',SchemaXml)",/*URL to Get all custom fileds*/
  8. method: "GET",
  9. async: false,
  10. headers: {
  11. "Accept": "application/json;odata=verbose"
  12. },
  13. success: function(data) {
  14. $scope.Properties = data.d.results; ;/*Setting all column properties to a scope*/
  15. $(data.d.results).each(function(listName, currentRow) {/*generating HTML code as per properties*/
  16. var innerRow = " <
  17. tr >
  18. <
  19. td > " + checkForColProp(currentRow.Title,currentRow.TypeAsString)+ " < /td> <
  20. td > " + checkForColumnType($http,$scope,currentRow.TypeDisplayName,currentRow.Title,currentRow.Choices,currentRow.LookupList,currentRow.LookupField,currentRow.TypeAsString,currentRow.InternalName)+ " < /td> <
  21. /tr>
  22. ";
  23. var updatedinnerRow = $compile(innerRow)($scope);
  24. $(".tbldata tbody").append(updatedinnerRow);/*Binding the generated code to a table*/
  25. });
  26. var Btns = " <
  27. div class = \"col-lg-offset-8 col-lg-2\"><input class=\"cls-savecancel\" style=\"background-color: " + PrimeColor + ";color:white\" id=\"btnsave\" type=\"button\" ng-click=\"AddItem(databind)\" value=\"Submit\"></div> <
  28. div class = \"col-lg-2\"><input class=\"cls-savecancel\" style=\"background-color: " + PrimeColor + ";color:white\" type=\"reset\" value=\"Cancel\" id=\"btnCancel\" data-dismiss=\"modal\"></div>
  29. ";
  30. var UpdatedBtns = $compile(Btns)($scope);
  31. $("#FormBody").append(UpdatedBtns);/*Adding buttons for submit data to the list*/
  32. var HdrText = " <
  33. tr style = \"font-size:x-large\"><th class=\"TblTh\" style=\"background-color: " + PrimeColor + ";\" colspan=\"2\"><strong>Submit Form</strong></th></tr>
  34. ";
  35. var UpdatedHdrText = $compile(HdrText)($scope);
  36. $(".tbldata thead").append(UpdatedHdrText);
  37. },
  38. error: function(sender, args) {
  39. console.log(args.get_message());
  40. }
  41. });
  42. }
Step 4

Add your data in the generated form and click on the “Submit” button. Then, a new record will be added to the SharePoint list.

See the result on the screen below.

Fill in the data.

SharePoint

Then, click on “Submit”.

SharePoint

So, the new record has been added to the list.

Let’s see the result in list here.

SharePoint
Code for “Submit”

  1. $scope.AddItem = function(FormData) {
  2. var datas = JSON.stringify(FormData);
  3. datas = datas.replace(/[{]/, '');
  4. datas = datas.slice(0,-1);
  5. datavalue = "{'__metadata':{'type':'SP.Data."+listName+"ListItem'},"+datas+"}";
  6. $.ajax
  7. ({
  8. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('"+listName+"')/items",
  9. type: "POST",
  10. headers:
  11. {
  12. "Accept": "application/json;odata=verbose",
  13. "Content-Type": "application/json;odata=verbose",
  14. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  15. "X-HTTP-Method": "POST"
  16. },
  17. data: datavalue,
  18. success: function(data)
  19. {
  20. console.log(data);
  21. alert("Success");
  22. },
  23. error: function(error)
  24. {
  25. alert(JSON.stringify(error));
  26. }
  27. });
  28. }

Hence, we have created a new record through the generated UI.

Conclusion

This article helps you to save time in terms of designing and automatically generating a nice UI according to the list, even when you have no coding knowledge.