One of the problems with SharePoint Apps is that you cannot SP.UI.showModelDialog() to show additional details to the end user. It is also a problem when you want to provide a richer UI than the very basic properties you can add to the ToolPart window.
I was talking to Chris earlier this week and showed him some code I had that used sendMessage() to send the parent frame a message to resize the SharePoint app part. This made me think that it might be nice to have a sample project to demonstrate resizing the app part when a dialog is displayed, so here it is…
Things you need to know
The App Part XML
In the project you will notice that the webpart elements.xml has a couple of changes.
Firstly the height is set to 0, If you know the default height use that, but 0 ensures that nothing is shown until the first resize has been performed. This can be useful to prevent things moving around in front of the user.
The editmode query string parameter has been added to the source url. This allows us to show a different dialog when we are in edit mode for the app part.
The DialogsWebpart.aspx page
This has a DIV for the content of the page, followed by two dialogs. The resizing relies on the fact that the content has an ID of ‘content’ and the dialogs have an id that starts with ‘dialog-‘. These IDs are used when calculating the height of the app part.
You should also notice the onresize event handler on the <body> tag.
<body onresize="setTimeout(CodexPoint.PartResize.resize(), 10)">
I should give thanks to Leandro as this was influenced by his blog post. And I should also mention that MS recommends to resize in increments of 30px as described in this article..
There are two downloads. One is the .app file so that you can deploy the project yourself and the other is a .zip of the actual project.
The SharePoint App Install
The App Part Project