How to add SharePoint Client WebPart (AppPart) to a page programmatically using JavaScript Object Model?

Question

Sometimes there is a requirement to add an AppPart (client webpart) programmatically to a SharePoint page (specially when we are working on SharePoint hosted app). So how to achieve this requirement using JSOM?

Answer 1

Here is the JavaScript code to achieve the above requirement:

Things you need to know before starting-

• WepPart Zone ID
• WebPart Zone Index

Now you need the XML of your client webpart (apppart) to add it programmatically.

• To get this webpart XML add your client webpart to any page manually.
• Edit webpart and allow exporting data.
• Export the webpart (you will be prompted to save *.wepbart file)

Copy the data in exported webpart XML and prepare a string variable like this:

var webPartXml = '<?xml version=\"1.0\" encoding=\"utf-8\"?>' +
        '<webParts>' +
  '<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">' +
    '<metaData>' +
      '<type name="Microsoft.SharePoint.WebPartPages.ClientWebPart, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />' +
      '<importErrorMessage>Cannot import this Web Part.</importErrorMessage>' +
    '</metaData>' +
    '<data>' +
      '<properties>' +

        '<property name="TitleIconImageUrl" type="string" />' +
        '<property name="Direction" type="direction">NotSet</property>' +
        ...
        ...
        ...
        '<property name="ChromeState" type="chromestate">Normal</property>' +
      '</properties>' +
    '</data>' +
  '</webPart>' +
'</webParts>';

Now use the following code to add client webpart programmatically using JavaScript object model:

function addClientWebPart(pageName,webPartZoneID,webPartZoneIndex) {
var site = context.get_site();
var rootWeb = site.get_rootWeb();
context.load(rootWeb, 'ServerRelativeUrl');
context.load(site);
context.executeQueryAsync(function () {

    var rootUrl = rootWeb.get_serverRelativeUrl();

    pageFile = rootWeb.getFileByServerRelativeUrl(rootUrl + "/Pages/" + pageName + '.aspx');
    ////////////
    var limitedWebPartManager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);

    var webPartXml = '<?xml version=\"1.0\" encoding=\"utf-8\"?>' +
        '<webParts>' +
  '<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">' +
    '<metaData>' +
      '<type name="Microsoft.SharePoint.WebPartPages.ClientWebPart, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />' +
      '<importErrorMessage>Cannot import this Web Part.</importErrorMessage>' +
    '</metaData>' +
    '<data>' +
      '<properties>' +

        '<property name="TitleIconImageUrl" type="string" />' +
        '<property name="Direction" type="direction">NotSet</property>' +
        ...
        ...
        ...
        '<property name="ChromeState" type="chromestate">Normal</property>' +
      '</properties>' +
    '</data>' +
  '</webPart>' +
'</webParts>';

    var webPartDefinition = limitedWebPartManager.importWebPart(webPartXml);
    var webPart = webPartDefinition.get_webPart();

    limitedWebPartManager.addWebPart(webPart, webPartZoneID, webPartZoneIndex);

    context.load(webPart);

    context.executeQueryAsync(onAddAppPartQuerySucceeded, onAddAppPartQueryFailed);
 });
}