Cannot add custom web part to page using the JS OM

Question

I'm trying to add a custom web part (that is one I have written myself) using the new Javascipt OM available with SharePoint 2010. My solution is also running within the Sandbox.

I have it working correctly for the Content Editor Web Part (based on sample code), however when I replace the Content Editor Web Part definition with one for my own web part I get the following error:

---------------------------
Message from webpage
---------------------------
Request failed. The operation could not be completed because the Web Part is not on this page.
undefined
---------------------------
OK   
---------------------------

Things I have tested:

I can successfully upload my .webpart definition to the web part gallery, and the web part works.
I can successfully add the web part to the page where I'm programmatically trying to add it using the "Upload Web Part" feature.

This is the code I'm using to add the web part:

function addWebPart(serverRelativeUrl) {
//var webPartXml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
//webPartXml = webPartXml + "<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>Content Editor</Title>  <FrameType>Default</FrameType>  <Description>Allows authors to enter rich text content.</Description>  <IsIncluded>true</IsIncluded>  <ZoneID>Main</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=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</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\" />  <PartStorage xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\" /></WebPart>";

var webPartXml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
       "<webParts><webPart xmlns=\"http://schemas.microsoft.com/WebPart/v3\">" +
       "<metaData>" + 
       "<type name=\"Codezeven.Social.Views.WebParts.ItemViewTrackerWebPart, Codezeven.Social.Views, Version=1.0.0.0, Culture=neutral, PublicKeyToken=c56ab109c2917056\" />" +
       "<importErrorMessage>Cannot import this Web Part.</importErrorMessage>" +
       "<Solution SolutionId=\"f5984dff-f7c0-4108-8c08-671bbb9b5df0\" xmlns=\"http://schemas.microsoft.com/sharepoint/\" />" +
       "</metaData>" +
       "<data><properties>" +
       "<property name=\"Title\" type=\"string\">ItemViewTrackerWebPart</property>" +
       "</properties></data>" + 
       "</webPart></webParts>";

clientContext = new SP.ClientContext.get_current();
var oFile = clientContext.get_web().getFileByServerRelativeUrl(serverRelativeUrl);

var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);

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

limitedWebPartManager.addWebPart(oWebPart, 'Main', 0);

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

Did you ever get this to work? I'm running into the same error message. — JGeerWM

John Liu John Liu · Accepted Answer · 2011-04-29T02:30:05

Not sure if you ever got this fixed, but I think you have an unnecessary

clientContext.load(oWebPart);

just before the executeQueryAsync.

If you are using Firebug/Fiddler/IE9 Toolbar watch the network traffic and the POST result from ClientQuery has some useful error messages.

Cannot add custom web part to page using the JS OM

1 Answers