Blog

Automatically resizing app parts in SharePoint 2013


by Tobias Lekman, 05 March, 2013

Recently, I blogged about Getting rid of “Working on it…” in SharePoint 2013 app parts. This time, I will hide the contents of the web part until it is loaded and automatically resize the app IFRAME to its correct size.

When the app part was first added to the page, we get a loading message that we cannot control.

image

Instead of hiding it with script, I now set the app part height to 1 pixel within the app part. This is done in the elements file of the app part:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<ClientWebPart Name="FeedWebPart" Title="Altran Multifeed RSS"
Description="FeedWebPart Description" DefaultWidth="400" DefaultHeight="1">
<!-- App part contents here -->
</Elements>

The web part is now initially collapsed and will only expand when ready. To do this, I place the following code in my app part:

function ResizeIFrame() {
if (window.parent == null)
return;
var senderId = $("#RequestContext_SenderId").val();
var height = $("#form1").height();
var width = $("#form1").width();
var message = "<Message senderId=" + senderId + " >"
+ "resize(" + width + "," + height + ")</Message>";
window.parent.postMessage(message, document.referrer);
}
$(document).ready(
function () {
ResizeIFrame();
});

The value of "#RequestContext_SenderId” is created in my case from within a control that I use to keep track of all parameters. I parse this out within the code-behind of the control as:

this.lblSenderID.Text = Page.Request["SenderId"];

I also place this ID in a hidden field on the page. This allows me to reuse the parameters during any postback without having to worry about my post parameters.

The code will call ResizeIFrame once the document is loaded. This sends a message back to the app part host and resizes the IFRAME to be the actual height of the app page.

image

Pretty!