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:
    

    3.         Create List Column
    5.         “text” id=“createcolumnname” />
    6.         “createcolumn”>Create Column

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!