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';
   3. var context = SP.ClientContext.get_current();
   4. var hostWebUrl, hostWebContext, hostWeb;
   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. });
   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. }
   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"/>');
   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. });
   48. }
4. Build and Deploy the solution. Click ‘Create Site Columns’ button.
   
   
   
   
5. Check Site Columns on Host Web; they have been created.
   
   

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.