Resize SharePoint 2013 App Part

Tags: SharePoint 2013, javascript, Apps

The new App Model of SharePoint 2013 comes with several options for development, one of these being an app part, which from the users perspective works very much like the web parts of old!

However, from a developers point of view these work differently.  They are basically iframes pointing to your App Part page, which through the elements.xml file you can configure to point to any page.  By default Visual Studio will prompt you to create a separate aspx page as you create your Client WebPart aka App Part.

As you’ll know iframes need a fixed width and height, this is less than ideal and that’s an understatement of epic proportions!!

But wait, there is a solution!  From what I can see though it is dependant on you setting the app part page to the Default.aspx page of your App.  What you need is the senderId parameter from the query string and from what I can see you only get this with the Default.aspx page.

Using the below carefully created xml and post message to the parent with the sender id you can resize the iframe based on the content.

This needs to of course be called after the UI of your app part has been loaded, this could be in the well know jQuery function.

$(document).ready(function () {
    resize();
});

or in the callback of your async data loading method.

I use a little function to help me get query string params…

getQueryStringParameter: function (name) {
     var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

And here is the little beauty to resize your iframe.

var w = "100%"; // or some other dynamic way to get the width
var h = $(document).height(); // or the height of your wrapper in the app part
window.parent.postMessage("<message senderId=" + utils.getQueryStringParameter("SenderId") + ">resize(" + w + "," + h + ")</message>", "*");
 

I don’t think for one second this is ideal, but it does work and from what I can see is the recommend way.

In my opinion this is a step backwards in the development process and I’m very keen to see how I can do this with my own Client App Part page.

Hope this helps.




comments powered by Disqus