Dynamically resizing a SharePoint App webpart to show dialogs

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. Src="~appWebUrl/Pages/DialogsWebpart.aspx?{StandardTokens}&amp;editmode=_editMode_" 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. Along with jQuery and jQueryUI the other scripts are App.js, the javascript for the app part, and partResize.js, the script which performs the resize. You should also notice the onresize event handler on the <body> tag. <body onresize="setTimeout(CodexPoint.PartResize.resize(), 10)"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } TypeScript The sample project uses TypeScript, if you’re not using it I do throughly recommend it. However, the .js files are perfectly useable and you can safely delete all the .ts files and just edit the JavaScript files directly. .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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.. Downloads 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

SharePoint on Windows Phone

AgilisPoint a free App for your Windows Phone