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 px 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. {          

  14. createcolumn();  

  15. event.preventDefault();      });      

  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. // Create a column in a list

  28. function createcolumn()  {      

  29. var columnname = document.getElementById("createcolumnname").value;      

  30. var play;      

  31. play = new SP.RequestExecutor(applink);  

  32. //DevData is the name of my list where I want to create a column     

  33. play.executeAsync({          

  34. url: applink + "/_api/SP.AppContextSite(@target)/web/Lists/getbytitle('DevData')/fields?@target='" + hostweblink + "'",          

  35. method: "POST",         

  36.  body: "{ '__metadata': { 'type': 'SP.Field' }, 'FieldTypeKind': 2, 'Title':'" + columnname + "'}",          

  37. headers:          

  38. {  

  39. "content-type": "application/json; odata=verbose",          

  40. },          

  41. success: createListcolumnsuccessful,          

  42. error: createListcolumnfailure      

  43. });  

  44. }  

  45. // Success Handler

  46. function createListcolumnsuccessful(data)  

  47. {      

  48. alert("Column Created Successfully")  

  49. }  

  50. // Error Handler

  51. function createListcolumnfailure(data, errorCode, errorMessage)   

  52. {      

  53. alert("Column coud not be created, view the error: " + errorMessage);  

  54. }  


  • 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!


Read more articles on SharePoint: