none
App Parts sizing issues

    Question

  • I'm having issues sizing my App Part. There doesn't seem to be any dynamic sizing capabilities in the App Part model in SharePoint 2013. I see the DefaultWidth and DefaultHeight, but that is only good for statically sized elements. And, like most content now a days, elements need to dynamically size without scrollbars showing (default for iFrames). I was hoping Microsoft would have incorporated this into their model when going with iFrames, but it doesn't seem to be the case (or at least I can't find it).

    The closes thing I can find is window.parent.postMessage. But, this doesn't work for me. I keep getting 'permission denied' messages (I guess the domain of the app part doesn't have rights to run a postMessage in the host).

    My siutation is this:

    1. SharePoint hosted soltion to build the App part
    2. Using SharePoint Dev site in Office 365 as the host web

    It is really important to make sure the iFrame of my App Part gets the correct height and width set based on the height and width of the contents in it. I know Microsoft must have thought of this when relying on iFrames as their solution (as it is in the number 1 reason people don't like iFrames). So, please help?

    Thanks,

    Greg

    Sunday, December 16, 2012 8:47 PM

Answers

  • Greg:

    AppParts support the iFramed page posting its desired width and height to the parent page via postMessage.   The general format of the resize message is: “resize(100,100)”, where the first argument is width and the second argument is height.

    Try this on your iframed page:

        <script type="text/javascript">

            window.onload = function () {

                var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

                var regex = new RegExp(/[Ss]ender[Ii]d=([\daAbBcCdDeEfF]+)/);

                results = regex.exec(this.location.search);

                if (null != results && null != results[1]) {

                    target.postMessage('<message senderId=' + results[1] + '>resize(100,200)</message>', '*');

                }

            }

        </script>

    Best

    Yina

    Monday, December 17, 2012 7:13 PM
    Moderator

All replies

  • Couple of useful pointers:

    Thanks


    Program Manager, Office Developer Platform.

    Monday, December 17, 2012 6:12 PM
    Moderator
  • Greg:

    AppParts support the iFramed page posting its desired width and height to the parent page via postMessage.   The general format of the resize message is: “resize(100,100)”, where the first argument is width and the second argument is height.

    Try this on your iframed page:

        <script type="text/javascript">

            window.onload = function () {

                var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

                var regex = new RegExp(/[Ss]ender[Ii]d=([\daAbBcCdDeEfF]+)/);

                results = regex.exec(this.location.search);

                if (null != results && null != results[1]) {

                    target.postMessage('<message senderId=' + results[1] + '>resize(100,200)</message>', '*');

                }

            }

        </script>

    Best

    Yina

    Monday, December 17, 2012 7:13 PM
    Moderator
  • Hi all!

    Another question: How can I get the width of the container where my App Part is located.... or in other words: how can I tell my app part to use the full width available?

    Thanks and cheers, Martin

    Saturday, April 27, 2013 6:44 PM