Dynamicly resizing an app part

Dynamicly resizing an app part header image

When you have several app parts on your page you can end up with a few of them famous spinners stating the ‘working on it’. Now from an end users perspective it might be a good idea to inform them that there is content to be loaded and it will take a few seconds to display that information. However if you have several of those app parts it might cause some clutter. So in some cases you might want to hide the app part until it is fully loaded, creating a cleaner interface. That’s where dynamic app part resizing can come in handy. You can dynamically resize your app based on the amount of content that you have as it is explained on this MSDN code example.

Now if you can dynamically resize your app part based on the content, you can combine that with setting it so by default it will not show. To do so you can easily specify that your app part should have no height (and width) by configuring the default width and height, ending up with something like the following example:

  <ClientWebPart Name="ClientWebPart"
      Title="$Resources:AppPartTitle"
      Description="$Resources:AppPartDescription"
      DefaultWidth="0" DefaultHeight="0">

Unfortunately it is not possible to hide the title by setting the ChromeType in your app part config, but you can of course always set that manual. With the Chrome Type set to None and a default width and height of 0 you will not see that app part on your page, even tough it is there. Having it all setup not to show on your page, all you have to do is to use the dynamic resize example with something like the following to display it:

function ResizeApp() {
    // Retrieve required params
    var senderId, hostUrl = null,
        params = document.URL.split("?")[1].split("&"), i, param;
    for (i = 0; i < params.length; i = i + 1) {
        param = params[i].split("=");
        if (hostUrl == null) {
            hostUrl = decodeURIComponent(param[1]);
        }
        else if (i == (params.length - 1))
            senderId = decodeURIComponent(param[1]);
    }

    //use postmessage to resize the app part.
    var message = "<Message senderId=" + senderId + " >" + "resize(250,75)</Message>";
    window.parent.postMessage(message, hostUrl);
}

If you execute that call from your app script you will not see the spinner with loading, and directly see the contents of your app part whenever it is ready. If you would execute this call before you will have any info and still waiting for async calls to return you would still skip the loading spinner because that is just waiting for the app web to spin up.

So as you can see it is pretty easy to resize your app, and you can make the loading of your page look a little bit cleaner by hiding some of the apps until they are fully loaded, making it easier on your eyes. Obviously instead of using the 250 by 75 example as it is posted, you can also write your own logic to make it really dynamic and based on the contents calculate the correct dimensions of your app part and use those to resize. Keep in mind though that if you want resize multiple times that you might want to get the parameters at some other point and store them as a global variable instead of calculating them for every time you call this function.

Loading comments…