Create Site Columns On Host Web From App Web Using JavaScript In SharePoint 2013

Implementation:

  1. Get Host Web Context using App Web Context
  2. Get Fields collection of Host Web
  3. Define new Fields schema
  4. Add these Fields schema in the Fields Collection

Get Started:

  1. Create a SharePoint –hosted ‘Apps for SharePoint 2013’ project using Visual Studio 2012/2013.

  2. Add a button on the page that creates Site Columns.
    1. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
    2.    <div>  
    3.       <input type="button" id="btnSiteColumns" value="Create Site Columns" onclick="createSiteColumns()" />  
    4.    </div>  
    5. </asp:Content>  
  3. Add the following code to App.js.
    1. 'use strict';  
    2.   
    3. var context = SP.ClientContext.get_current();  
    4. var hostWebUrl, hostWebContext, hostWeb;  
    5.   
    6. $(document).ready(function() {  
    7.     hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));  
    8.     //Get Host Web Context using App web  
    9.     hostWebContext = new SP.AppContextSite(context, hostWebUrl);  
    10.     hostWeb = hostWebContext.get_web();  
    11. });  
    12.   
    13. // Retrieve a query string value.  
    14. function getQueryStringParameter(paramToRetrieve) {  
    15.     var params = document.URL.split("?")[1].split("&");  
    16.     for (var i = 0; i < params.length; i = i + 1) {  
    17.         var singleParam = params[i].split("=");  
    18.         if (singleParam[0] == paramToRetrieve) return singleParam[1];  
    19.     }  
    20. }  
    21.   
    22. //Create Site Columns on Host Web  
    23. function createSiteColumns() {  
    24.     var fields;  
    25.     var createFields;  
    26.     //Get Host Web Fields Collection  
    27.     fields = hostWeb.get_fields();  
    28.     //Define the fields schema  
    29.     var fieldSchema = new Array(  
    30.         '<Field Name="EmployeeId" DisplayName="Employee ID" Type="Text" EnforceUniqueValues ="TRUE" Indexed="TRUE" Required="True" Group="EmployeeDetails"/>',  
    31.         '<Field Name="EmployeeName" DisplayName="Employee Name" Type="User" Required="FALSE" Group="EmployeeDetails"/>');  
    32.   
    33.     for (var iFieldsCounter = 0; iFieldsCounter < fieldSchema.length; iFieldsCounter++) {  
    34.         //Parameters to pass  
    35.         //fields.addFieldAsXml(string schemaXml,bool addToDefaultView, AddFieldOptions options)  
    36.         createFields = fields.addFieldAsXml(fieldSchema[iFieldsCounter], false, SP.AddFieldOptions.addFieldCheckDisplayName);  
    37.     }  
    38.     context.load(fields);  
    39.     context.load(createFields);  
    40.     context.executeQueryAsync(  
    41.         function() {  
    42.             alert('Site Columns Created Successfully.')  
    43.         },  
    44.         function(sender, args) {  
    45.             alert('Failed to create Site Columns. Error:' + args.get_message() + '\n' + args.get_stackTrace());  
    46.         });  
    47.   
    48. }  
  4. Build and Deploy the solution. Click ‘Create Site Columns’ button.

    Configuration Host Web

  5. Check Site Columns on Host Web; they have been created.

    Employee details

Conclusion

This creates site columns in Host Web. This code can be extended to create columns in List/Document Library. To create columns in Lists, get the Fields collection of List and add the schema of new column.

Up Next
    Ebook Download
    View all
    Learn
    View all