Archives

Archives / 2013 / December
  • 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.

    more...

  • Windows 8.1 blurry display, multiple monitors

    Tags: Windows 8.1

    I recently upgraded to Windows 8.1, everything went quite smoothly except the display.

    I have an extra monitor plugged into my laptop, pretty standard setup I should think, connected via HDMI.  The monitor does run a different resolution to the laptop.

    I found that the resolution on my second monitor was shot, the display settings said it was correct, but it was very blurry.  In fact some applications on the laptop screen actually appeared blurry as well.  Specifically Skype.

    The solution was to to enable this setting in the display settings.

    more...