SharePoint 2013 Hosting – HostForLIFE.eu :: How to Add Site Columns to Site Content Type on Host Web using JSOM?

This code snippet for add Site Columns to Site Content Type on Host Web using JSOM. JSOM is intended for accessing and manipulating SharePoint objects by using JavaScript (JavaScript) in an asynchronous fashion. It is very useful in situations where you want to access SharePoint data or make manipulations to the data after the page has been loaded on the client. JSOM is made up from a set of JavaScript files and can be easily used in any page or Web Part by simply referring to JSOM scripts. In some cases, you may not need to provide any references such as in the case of a page referencing the standard SharePoint 2010 master pages.

As an example, you can use an editor such as a content editor Web Part to access and manipulate SharePoint objects by using JSOM. For instance, SharePoint 2010 uses JSOM extensively for its own usage; an example of this is the new modal dialog introduced in SharePoint 2010. This modal dialog is actually a part of the client-side SP.UI namespace and leverages JSOM to perform common operations.

JSOM provides a comprehensive set of APIs that can be used to perform operations on most SharePoint objects such as Site, Web, List, ContentTypes, User Permission and so forth. The API is simple to use and allows the developer to focus on the business scenario with a minimum amount of infrastructure required. JSOM fully supports JQuery and both can be used in conjunction with the other.

'use strict';  
   
var context = SP.ClientContext.get_current();  
   
var hostWebUrl, hostWebContext;  
   
// This code runs when the DOM is ready and creates a context object which is   
  
// needed to use the SharePoint object model  
   
$(document).ready(function () {  
   
    hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));  
   
    hostWebContext = new SP.AppContextSite(context, hostWebUrl);  
   
});  
   
   
   
// Retrieve a query string value  
   
function getQueryStringParameter(paramToRetrieve) {  
   
    var params = document.URL.split("?")[1].split("&amp;");  
   
    for (var i = 0; i &lt; params.length; i = i + 1) {  
   
        var singleParam = params[i].split("=");  
   
        if (singleParam[0] == paramToRetrieve) return singleParam[1];  
   
    }  
   
}  
   
//Add Site Columns to Content Type  
   
var hostWebContentTypes;  
   
var contentTypeName = 'Employee'; // Name of the Content Type where Colums will be added  
   
var columnsInternalName = ["EmployeeId", "EmployeeName"]; //Internal Names of the Site Columns  
   
var createdColumns = new Array();  
   
function addColumnsToContentType() {  
   
    var hostWeb = hostWebContext.get_web();  
   
    //Get the columns that need to be added to Content type and store the objects in an Array.  
   
    for (var iCreatedFieldsCounter = 0; iCreatedFieldsCounter &lt; columnsInternalName.length; iCreatedFieldsCounter++) {  
   
        createdColumns[iCreatedFieldsCounter] = hostWeb.get_fields().getByInternalNameOrTitle(columnsInternalName[iCreatedFieldsCounter]);  
   
        context.load(createdColumns[iCreatedFieldsCounter]);  
   
    }  
   
    //Get Host Web Content type Collection  
   
    hostWebContentTypes = hostWeb.get_contentTypes();  
   
    context.load(hostWebContentTypes);  
   
    context.executeQueryAsync(  
   
  function () {  
   
      //Call function to add columns to Content Type  
   
      addColumns(contentTypeName, columnsInternalName, createdColumns);  
   
  },  
   
  function onItemsRefetchedFail(sender, args) {  
   
      alert('Failed to fetch columns and Content Type. Error:' + args.get_message() + '\n' + args.get_stackTrace());  
   
  });  
   
}  
   
// Add columns  
   
function addColumns(ctypeName, fieldsInternalName, createdFields) {  
   
    //Find the Content Type and then add Fields to it  
   
    var createdContentType;  
   
    var contentTypeEnumerator = hostWebContentTypes.getEnumerator();  
   
    while (contentTypeEnumerator.moveNext()) {  
   
        var contentType = contentTypeEnumerator.get_current();  
   
        if (contentType.get_name() === ctypeName) {  
   
            createdContentType = contentType;  
   
            var fieldRef = new Array();  
   
            for (var iAddFieldsCounter = 0; iAddFieldsCounter &lt; createdFields.length; iAddFieldsCounter++) {  
   
                fieldRef[iAddFieldsCounter] = new SP.FieldLinkCreationInformation();  
   
                fieldRef[iAddFieldsCounter].set_field(createdFields[iAddFieldsCounter]);  
   
                createdContentType.get_fieldLinks().add(fieldRef[iAddFieldsCounter]);  
   
                createdContentType.update(true);  
   
            }  
   
            context.load(createdContentType);  
   
            context.executeQueryAsync(onAddFieldToContentTypeSuccess, onAddFieldToContentTypeFail);  
   
        }  
   
    }  
   
}  
   
function onAddFieldToContentTypeSuccess() {  
   
    alert('Site Columns added to Content Type.');  
   
}  
   
function onAddFieldToContentTypeFail(sender, args) {  
   
    alert('Failed to add Site Columns to Content Type. Error:' + args.get_message() + '\n' + args.get_stackTrace());  
   
}  
   
//End

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

'use strict';

var context = SP.ClientContext.get_current();

var hostWebUrl, hostWebContext;

// This code runs when the DOM is ready and creates a context object which is

// needed to use the SharePoint object model

$(document).ready(function () {

hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));

hostWebContext = new SP.AppContextSite(context, hostWebUrl);

});

// Retrieve a query string value

function getQueryStringParameter(paramToRetrieve) {

var params = document.URL.split("?")[1].split("&");

for (var i = 0; i < params.length; i = i + 1) {

var singleParam = params[i].split("=");

if (singleParam[0] == paramToRetrieve) return singleParam[1];

}

//Add Site Columns to Content Type

var hostWebContentTypes;

var contentTypeName = 'Employee'; // Name of the Content Type where Colums will be added

var columnsInternalName = ["EmployeeId", "EmployeeName"]; //Internal Names of the Site Columns

var createdColumns = new Array();

function addColumnsToContentType() {

var hostWeb = hostWebContext.get_web();

//Get the columns that need to be added to Content type and store the objects in an Array.

for (var iCreatedFieldsCounter = 0; iCreatedFieldsCounter < columnsInternalName.length; iCreatedFieldsCounter++) {

createdColumns[iCreatedFieldsCounter] = hostWeb.get_fields().getByInternalNameOrTitle(columnsInternalName[iCreatedFieldsCounter]);

context.load(createdColumns[iCreatedFieldsCounter]);

}

//Get Host Web Content type Collection

hostWebContentTypes = hostWeb.get_contentTypes();

context.load(hostWebContentTypes);

context.executeQueryAsync(

function () {

//Call function to add columns to Content Type

addColumns(contentTypeName, columnsInternalName, createdColumns);

function onItemsRefetchedFail(sender, args) {

alert('Failed to fetch columns and Content Type. Error:' + args.get_message() + '\n' + args.get_stackTrace());

});

}

// Add columns

function addColumns(ctypeName, fieldsInternalName, createdFields) {

//Find the Content Type and then add Fields to it

var createdContentType;

var contentTypeEnumerator = hostWebContentTypes.getEnumerator();

while (contentTypeEnumerator.moveNext()) {

var contentType = contentTypeEnumerator.get_current();

if (contentType.get_name() === ctypeName) {

createdContentType = contentType;

var fieldRef = new Array();

for (var iAddFieldsCounter = 0; iAddFieldsCounter < createdFields.length; iAddFieldsCounter++) {

fieldRef[iAddFieldsCounter] = new SP.FieldLinkCreationInformation();

fieldRef[iAddFieldsCounter].set_field(createdFields[iAddFieldsCounter]);

createdContentType.get_fieldLinks().add(fieldRef[iAddFieldsCounter]);

createdContentType.update(true);

}

context.load(createdContentType);

context.executeQueryAsync(onAddFieldToContentTypeSuccess, onAddFieldToContentTypeFail);

}

function onAddFieldToContentTypeSuccess() {

alert('Site Columns added to Content Type.');

}

function onAddFieldToContentTypeFail(sender, args) {

alert('Failed to add Site Columns to Content Type. Error:' + args.get_message() + '\n' + args.get_stackTrace());

}

//End

SharePoint 2013 Hosting Recommendation

HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options.

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Add Site Columns to Site Content Type on Host Web using JSOM?

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Add Site Columns to Site Content Type on Host Web using JSOM?

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Tags