Errors resizing a SharePoint 2013 App Part (Client Web Part)

Since SharePoint Client Web Parts are simply iFrames, resizing them from within your App logic (i.e. App.js) can be a little challenging. Fortunately Microsoft provides a way to do this dynamically using postmessages. More info on this can be found on MSDN.

Basically, how this works is, you send a special ‘resize’ message to your iFrames parent (the SharePoint Web containing the App Part). Based on this message, the iFrame is resized according to the supplied dimensions:

window.parent.postMessage(“<message senderId={your ID}>resize(120, 300)</message>”, this.location.hostname);

This only works if your Client Web Parts have the Web Part Title enabled (via the Client Web Part Chrome settings). If you don’t, the resizing function breaks, because it cannot find the Web Parts title DIV:

Chrome

SCRIPT5007: Unable to get property ‘style’ of undefined or null reference

The code throwing the error:

if (resizeWidth)
{
document.getElementById(webPartDivId + '_ChromeTitle').style.cssText = widthCssText;
cssText = 'width:100% !important;'
}

Unfortunately, there is not much we can do about this. If you really need the App Part title gone and keep the dynamic resizing my choice would be to hide it using CSS. Meanwhile we wait for the fix.

Advertisements

7 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s