Resize Add-In Parts dynamically in SharePoint Add-Ins

Hello everyone, in this post we will discuss about how to resize Add-in App Part. If you are reading this post first time, I would recommend read following articles

• SharePoint Hosted Add-In as an App Part
• SharePoint Hosted custom App Part properties

Above my listed article give complete information about App Part/Add In Part

As add-in part render a dynamic content mean that might change its width and height. Due to the dynamic nature of the content, it may not fit in the frame.Might in some cases you need more space as same as parent container. With dynamic content, it could be difficult to specify a fixed size in your add-in part declaration. However, you can resize the frame to fit the content’s width and height.

You can use POST messages from your content webpage to specify the frame’s size. The following JavaScript example shows you how to send a POST message to resize the frame in which your add-in part is hosted. You can call this using the JavaScript method from a JavaScript file.

So here we resize our Accordion app part which have dynamic content from Accordion list.

Steps to resize app part

• Create an add-in, name Accordion in Microsoft Visual Studio 2013. For more info to create accordion read post SharePoint Hosted Add-In as an App Part
• So we assume that you have setup Basic Accordion add-in as an App Part. You notice in Elements.xml file by default app part width is 300 and height is 200. In that scenario our app part will show maximum two item as accordion.
  
• Now we write code for resize app part. Add following code in accordion.js.
  window.reSize = window.reSize || {}; //Accordion app responsive width and height reSize.AppPart = { senderId: '', // the App Part provides a Sender Id in the URL parameters, // every time the App Part is loaded, a new Id is generated. // The Sender Id identifies the rendered App Part. previousHeight: 0, // the height minHeight: 0, // the minimal allowed height firstResize: true, // On the first call of the resize the App Part might be // already too small for the content, so force to resize. init: function () { // parse the URL parameters and get the Sender Id var params = document.URL.split("?")[1].split("&"); for (var i = 0; i < params.length; i = i + 1) { var param = params[i].split("="); if (param[0].toLowerCase() == "senderid") this.senderId = decodeURIComponent(param[1]); } // find the height of the app part, uses it as the minimal allowed height this.previousHeight = this.minHeight = $('body').height(); // display the Sender Id $('#senderId').text(this.senderId); // make an initial resize (good if the content is already bigger than the // App Part) this.autoSize(); }, autoSize: function () { // Post the request to resize the App Part, but just if has to make a resize var step = 30, // the recommended increment step is of 30px. Source:// http://msdn.microsoft.com/en-us/library/jj220046.aspx height = $('body').height() + 7, // the App Part height // (now it's 7px more than the body) newHeight, // the new App Part height contentHeight = $('.accordion-Wrapper').height(), //Specify your name of parent div resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>'; // if the content height is smaller than the App Part's height, // shrink the app part, but just until the minimal allowed height if (contentHeight < height - step && contentHeight >= this.minHeight) { height = contentHeight; } // if the content is bigger or smaller then the App Part // (or is the first resize) if (this.previousHeight !== height || this.firstResize === true) { // perform the resizing newHeight = contentHeight; // set the parameters resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId); resizeMessage = resizeMessage.replace("{Height}", newHeight); resizeMessage = resizeMessage.replace("{Width}", "100%"); // we are not changing the width here, but we could // post the message window.parent.postMessage(resizeMessage, "*"); // memorize the height this.previousHeight = newHeight; // further resizes are not the first ones this.firstResize = false; } } };

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  window.reSize = window.reSize || {};   //Accordion app responsive width and height reSize.AppPart = {     senderId: '',      // the App Part provides a Sender Id in the URL parameters,     // every time the App Part is loaded, a new Id is generated.     // The Sender Id identifies the rendered App Part.     previousHeight: 0, // the height     minHeight: 0,      // the minimal allowed height     firstResize: true, // On the first call of the resize the App Part might be     // already too small for the content, so force to resize.       init: function () {         // parse the URL parameters and get the Sender Id         var params = document.URL.split("?")[1].split("&");         for (var i = 0; i < params.length; i = i + 1) {             var param = params[i].split("=");             if (param[0].toLowerCase() == "senderid")                 this.senderId = decodeURIComponent(param[1]);         }           // find the height of the app part, uses it as the minimal allowed height         this.previousHeight = this.minHeight = $('body').height();           // display the Sender Id         $('#senderId').text(this.senderId);           // make an initial resize (good if the content is already bigger than the         // App Part)         this.autoSize();     },       autoSize: function () {         // Post the request to resize the App Part, but just if has to make a resize         var step = 30, // the recommended increment step is of 30px. Source:// http://msdn.microsoft.com/en-us/library/jj220046.aspx         height = $('body').height() + 7,  // the App Part height // (now it's 7px more than the body)         newHeight,                        // the new App Part height         contentHeight = $('.accordion-Wrapper').height(), //Specify your name of parent div         resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';           // if the content height is smaller than the App Part's height,         // shrink the app part, but just until the minimal allowed height         if (contentHeight < height - step && contentHeight >= this.minHeight) {             height = contentHeight;         }           // if the content is bigger or smaller then the App Part         // (or is the first resize)         if (this.previousHeight !== height || this.firstResize === true) {             // perform the resizing             newHeight = contentHeight;               // set the parameters             resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);             resizeMessage = resizeMessage.replace("{Height}", newHeight);             resizeMessage = resizeMessage.replace("{Width}", "100%");             // we are not changing the width here, but we could               // post the message             window.parent.postMessage(resizeMessage, "*");               // memorize the height             this.previousHeight = newHeight;               // further resizes are not the first ones             this.firstResize = false;         }     } };

  Call init() function on load in getAccordionListData() method it resize app part on loading.

  //App responsive on load reSize.AppPart.init();

  1 2	//App responsive on load reSize.AppPart.init();

  Call autoSize() function in every on change event (example click() event) in app part.

  setTimeout(function () { reSize.AppPart.autoSize(); }, 500);

  1 2 3

  setTimeout(function () {    reSize.AppPart.autoSize(); }, 500);

• Final step Run and Deploy the Add-In solution, Now go to the developer site and add App Part on Edit Web Part page. 

  

  As you see above screen shot On load our Accordion looks very great. On resize  we make accordion div width 100% and height set based on content and on click event.

  

References

• Resize App Part