How To Create Columns In A List Using REST API In SharePoint Online And Office 365

Welcome to an article on “How to create columns in a list using REST API in SharePoint Online and Office 365” where we will see the steps of creating an app using Napa Tool which will help us to create a column in a list using REST API.

• Open the “NAPA” Office 365 Development Tools through your SharePoint store.
  
  
• Click on Add New Project.
  
  
• It will ask you, what type of app do you want to build?
  
  
  
  
• Select SharePoint Add-in and provide a name to your app and click on Create.
  
  
  
  
• You will see the screen below on the app,
  
  
  
  
• Click on Default.aspx and paste the code below under the,
  
  1. “<asp:ContentContentPlaceHolderID="PlaceHolderMain" runat="server">”.
  Code:
  
  1. <div>
  2. <p>
  3. <b>Create List Column</b>
  4. <br />
  5. <input type="text" id="createcolumnname" />
  6. <button id="createcolumn">Create Column</button>
  7. </p>
  8. </div>
  Now on the navigation click on the App.js file and paste the code below removing the previous code completely.
  
  Code:
  
  1. 'use strict';
  2. var hostweblink;
  3. var applink;
  4. // get the links on app load
  5. $(document).ready(function()
  6. {
  7. hostweblink = decodeURIComponent(
  8. getQueryStringParameter("SPHostUrl"));
  9. applink = decodeURIComponent(
  10. getQueryStringParameter("SPAppWebUrl"));
  11. //Define click event
  12. $("#createcolumn").click(function(event) {
  13. createcolumn();
  14. event.preventDefault();
  15. });
  16. var scriptlink = hostweblink + "/_layouts/15/";
  17. $.getScript(scriptlink + "SP.RequestExecutor.js");
  18. });
  19. //get the data and clear it in a function
  20. function getQueryStringParameter(paramvalue)
  21. {
  22. var paramval = document.URL.split("?")[1].split("&");
  23. for (var i = 0; i < paramval.length; i = i + 1)
  24. {
  25. var paramval1 = paramval[i].split("=");
  26. if (paramval1[0] == paramvalue) return paramval1[1];
  27. }
  28. }
  29. // Create a column in a list
  30. function createcolumn()
  31. {
  32. var columnname = document.getElementById("createcolumnname").value;
  33. var play;
  34. play = new SP.RequestExecutor(applink);
  35. //DevData is the name of my list where I want to create a column
  36. play.executeAsync({
  37. url: applink + "/_api/SP.AppContextSite(@target)/web/Lists/getbytitle('DevData')/fields?@target='" + hostweblink + "'",
  38. method: "POST",
  39. body: "{ '__metadata': { 'type': 'SP.Field' }, 'FieldTypeKind': 2, 'Title':'" + columnname + "'}",
  40. headers:
  41. {
  42. "content-type": "application/json; odata=verbose",
  43. },
  44. success: createListcolumnsuccessful,
  45. error: createListcolumnfailure
  46. });
  47. }
  49. // Success Handler
  50. function createListcolumnsuccessful(data)
  51. {
  52. alert("Column Created Successfully")
  53. }
  55. // Error Handler
  56. function createListcolumnfailure(data, errorCode, errorMessage)
  57. {
  58. alert("Column coud not be created, view the error: " + errorMessage);
  59. }
• Click on the settings icon on the tool on the left.
  
  
  
  
• Under the properties, select Permissions and provide full control to the app on the Site Collection level.
  
  
  
  
• Click on the deploy button on the left and run the project.
  
  
  
  
• Click on the launch button.
  
  
  
  
• Accept the trust and click on ‘Trust It’.
  
  
  
  
• Your app will be deployed and open for you as per the following screenshot:
  
  
  
  
• Provide the name of the column you want to create and click on ‘Create Column’ button.
  
  
  
  
• Once you click on the button you will receive an alert that your column has been successfully created.
  
  
• Go to your list, you will see your created column.
  
  
  

Here we saw today how to create a column in a list using REST API in SharePoint Online and Office 365. You will love your app. Keep reading and keep learning!

Keep reading & keep learning!