How to programmatically add a ClientSide Web Part to a SharePoint page

In this post, we will see how to add a client side web part programmatically to a page. Here in the example, I have used the javascript (from msdn) and modified to use the client side web part manifest details.

ClientSideWebPart Manifest:

<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <type name="Microsoft.SharePoint.WebPartPages.ClientSideWebPart, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
      <importErrorMessage>Cannot import this Web Part</importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="Description" type="string">Quick Links</property>
        <property name="HelpUrl" type="string" />
        <property name="Hidden" type="bool">False</property>
        <property name="MissingAssembly" type="string">Cannot import this Web Part</property>
        <property name="CatalogIconImageUrl" type="string" />
        <property name="Title" type="string">Quick Links Title</property>
        <property name="AllowHide" type="bool">True</property>
        <property name="AllowMinimize" type="bool">True</property>
        <property name="ExportMode" type="exportmode">All</property>
        <property name="AllowZoneChange" type="bool">True</property>
        <property name="TitleUrl" type="string" />
        <property name="ClientSideWebPartData" type="string" />
        <property name="ChromeType" type="chrometype">Default</property>
        <property name="AllowConnect" type="bool">True</property>
        <property name="Width" type="string" />
        <property name="Height" type="string" />
        <property name="HelpMode" type="helpmode">Modeless</property>
        <property name="ClientSideWebPartId" type="System.Guid, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">c70391ea-0b10-4ee9-b2b4-006d3fcad0cd</property>
        <property name="AllowEdit" type="bool">True</property>
        <property name="TitleIconImageUrl" type="string" />
        <property name="Direction" type="direction">NotSet</property>
        <property name="AllowClose" type="bool">True</property>
        <property name="ChromeState" type="chromestate">Normal</property>
      </properties>
    </data>
  </webPart>
</webParts>

We can get the above manifest when we export the client side web part from the page. All the ClientSideWebpart is of type “Microsoft.SharePoint.WebPartPages.ClientSideWebPart” and contains the unique “ClientSideWebPartId” – c70391ea-0b10-4ee9-b2b4-006d3fcad0cd for Quick links.

Javascript: Here I have used the Javascript to add a web part to a page using the above manifest.

var siteUrl = '/';
var serverRelativeUrl = '/sitepages/devhome.aspx';
 
function addWebPart() {
 
    var clientContext = new SP.ClientContext(siteUrl);
    var oFile = clientContext.get_web().getFileByServerRelativeUrl(serverRelativeUrl);
 
    var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
 
    var webPartXml = '<webParts>' +
  '<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">' +
    '<metaData>' +
      '<type name="Microsoft.SharePoint.WebPartPages.ClientSideWebPart, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />' +
      '<importErrorMessage>Cannot import this Web Part</importErrorMessage>' +
    '</metaData>' +
    '<data>' +
      '<properties>' +
        '<property name="Description" type="string">Quick links description</property>' +
        '<property name="HelpUrl" type="string" />' +
        '<property name="Hidden" type="bool">False</property>' +
        '<property name="MissingAssembly" type="string">Cannot import this Web Part</property>' +
        '<property name="CatalogIconImageUrl" type="string" />' +
        '<property name="Title" type="string">QuickLinks</property>' +
        '<property name="AllowHide" type="bool">True</property>' +
        '<property name="AllowMinimize" type="bool">True</property>' +
        '<property name="ExportMode" type="exportmode">All</property>' +
        '<property name="AllowZoneChange" type="bool">True</property>' +
        '<property name="TitleUrl" type="string" />' +
        '<property name="ClientSideWebPartData" type="string" />' +
        '<property name="ChromeType" type="chrometype">Default</property>' +
        '<property name="AllowConnect" type="bool">True</property>' +
        '<property name="Width" type="string" />' +
        '<property name="Height" type="string" />' +
        '<property name="HelpMode" type="helpmode">Modeless</property>' +
        '<property name="ClientSideWebPartId" type="System.Guid, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">c70391ea-0b10-4ee9-b2b4-006d3fcad0cd</property>' +
        '<property name="AllowEdit" type="bool">True</property>' +
        '<property name="TitleIconImageUrl" type="string" />' +
        '<property name="Direction" type="direction">NotSet</property>' +
        '<property name="AllowClose" type="bool">True</property>' +
        '<property name="ChromeState" type="chromestate">Normal</property>' +
      '</properties>' +
    '</data>' +
  '</webPart>' +
'</webParts>';
 
    var oWebPartDefinition = limitedWebPartManager.importWebPart(webPartXml);
    this.oWebPart = oWebPartDefinition.get_webPart();
 
    limitedWebPartManager.addWebPart(oWebPart, 'Left', 1);
 
    clientContext.load(oWebPart);
 
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
 
function onQuerySucceeded() {
 
    alert('Web Part added: ' + oWebPart.get_title());
}
 
function onQueryFailed(sender, args) {
 
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

The above code adds one of the O365 – QuickLinks ClientSideWebPart (Dev version).

The list of other ClientSideWebParts can be retrieved using the “_api/web/GetClientSideWebParts” api. The custom web part unique Id can be retrieved from your feature xml within the *.spapp package.