O365 - SPFX - JS - Programmatically Add a ClientSideWebPart to a 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://ift.tt/1fI5tWY">

    <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://ift.tt/1fI5tWY">' +

    '<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.

by Balamurugan Kailasam via Everyone's Blog Posts - SharePoint Community