We're working on a custom way of adding and deleting Web Parts and App Parts to a page in SharePoint 2013. We have to use the new App way of developing and all code has to be using the JavaScript CSOM.

Thanks to this handy MSDN article we already got this working. However, part of the process of adding a Web Part is a call to the importWebPart() method of the LimitedWebPartManager instance.

var siteUrl = '/sites/MySiteCollection';
var serverRelativeUrl = '/sites/MySiteCollection/Default.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 = '<?xml version=\"1.0\" encoding=\"utf-8\"?>' + 
        '<WebPart xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"' + 
        ' xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\"' + 
        ' xmlns=\"http://schemas.microsoft.com/WebPart/v2\">' + 
        '<Title>My Web Part</Title><FrameType>Default</FrameType>' + 
        '<Description>Use for formatted text, tables, and images.</Description>' + 
        '<IsIncluded>true</IsIncluded><ZoneID></ZoneID><PartOrder>0</PartOrder>' + 
        '<FrameState>Normal</FrameState><Height /><Width /><AllowRemove>true</AllowRemove>' + 
        '<AllowZoneChange>true</AllowZoneChange><AllowMinimize>true</AllowMinimize>' + 
        '<AllowConnect>true</AllowConnect><AllowEdit>true</AllowEdit>' + 
        '<AllowHide>true</AllowHide><IsVisible>true</IsVisible><DetailLink /><HelpLink />' + 
        '<HelpMode>Modeless</HelpMode><Dir>Default</Dir><PartImageSmall />' + 
        '<MissingAssembly>Cannot import this Web Part.</MissingAssembly>' + 
        '<PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge><IsIncludedFilter />' + 
        '<Assembly>Microsoft.SharePoint, Version=, Culture=neutral, ' + 
        'PublicKeyToken=94de0004b6e3fcc5</Assembly>' + 
        '<TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>' + 
        '<ContentLink xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\" />' + 
        '<Content xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\">' + 
        '<![CDATA[This is a first paragraph!<DIV>&nbsp;</DIV>And this is a second paragraph.]]></Content>' + 
        '<PartStorage xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\" /></WebPart>';

    var oWebPartDefinition = limitedWebPartManager.importWebPart(webPartXml);
    this.oWebPart = oWebPartDefinition.get_webPart();

    limitedWebPartManager.addWebPart(oWebPart, 'Left', 1);


    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());

As you can see this call needs the a Web Part's XML schema. For normal Web Parts you can retrieve them from the Web Part Gallery. However, it looks like the new Client Web Parts (App Parts) aren't listed in this gallery.

So my question is: how can we determine the XML needed for adding a Client Web Part to a page using the JavaScript CSOM (more specifically: LimitedWebPartManager's importWebPart() method).

  • did you find a solution for this? I'm working with the same functionality and I do not want to export each AppPart manually to get it's xml. Sorry for posting this as an answer. I didn't get to keep my reputation from StackOverflow when I created this account so I cannot just add a comment to your question...
    – Kamelkent
    Commented Oct 28, 2015 at 8:09

1 Answer 1


how can we determine the XML needed for adding a Client Web Part to a page using the JavaScript CSOM (more specifically: LimitedWebPartManager's importWebPart() method):

Just add a client webpart (App webpart) to a normal webpart zone. After adding the webpart you can export it to your local machine. (If the option is not on the right side dropdown of your webpart, make sure that under webpart-properties you allow the webpart to be exported). You now have something like:

  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
      <type name="Microsoft.SharePoint.WebPartPages.ClientWebPart, Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
      <importErrorMessage>Cannot import this Web Part.</importErrorMessage>
        <property name="TitleIconImageUrl" type="string" />
        <property name="HelpMode" type="helpmode">Navigate</property>
        <property name="AllowEdit" type="bool">True</property>
        <property name="AllowMinimize" type="bool">True</property>
        <property name="ProductId" type="System.Guid, mscorlib, Version=, Culture=neutral, PublicKeyToken=b77a5c561934e089">b949db99-56cb-44ee-a15a-6e6faf9b1f91</property>
        <property name="AllowClose" type="bool">True</property>
        <property name="ChromeState" type="chromestate">Normal</property>

You can now replace the xml of your example (the webPartXml var) with the Client Webpart Xml definition from your file. Do not forget to escape quote characters and to add the <webparts> tag as this is a v3 namespace webpart.



  • 1
    Thanks Robert. I tried to do this myself, but couldn't find the Export menu item. Never thought about enabling it from the properties :-) Commented Mar 4, 2013 at 8:30
  • @Robert I have a custom app part, which i want to add to page by CSOM or JSOM. Commented Feb 24, 2017 at 5:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.