Resizing the AppPart / ClientWebPart

Posted on 6/2/2013 @ 3:51 AM in #SharePoint by | Feedback | 3880 views

Yeah yeah you can use an App as a WebPart. It’s called a Client Web Part or AppPart if you prefer.

You usually write it as a CAML element in your app like this,

<ClientWebPart Name="SomeName" Title="SomeTitle" Description="SomeDescription" DefaultHeight=”XYZpx” DefaultWidth=”PQRpx”>

..

The problem is, those two attributes, DefaultHeight, DefaultWidth, well those something you can only specify in pixels – you can’t do percentages. Dangit! This means, frequently when your app part loads, or cycles through pages, it will show scrollbars around it – since the Apppart is nothing but an IFrame.

How do we fix it?

Easy! Drop the following JavaScript on your AppPart.

 $(document).ready(function () {  
 getParameterByName = function (name) {  
   var match = RegExp('[?&]' + name + '=([^&]*)')  
   .exec(window.location.search);  
   return match && decodeURIComponent(match[1].replace(/\+/g, ' '));  
 };  
 try {  
   var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);  
   target.postMessage('<message senderId=' + getParameterByName("SenderId") + '>resize(' + ($(document).width()) + ',' + ($(document).height()) + ')</message>', '*');  
 } catch (e) {  
   alert(e);  
 } 

You may already have a method called getParameterByName (seriously, why doesn’t JavaScript have an OOTB function for this).

The above JavaScript will use the HTML5 based postMessage API to allow the parent to resize the child iFrame.

Sound off but keep it civil:

Older comments..