Most of the examples of using dialogs in SharePoint refer to calling other pages, effectively creating a popup iframe. This approach is both useful and reasonably well documented (Charlie Holland’s blog has the best examples I’ve seen to date).
<script> function ShowDialog() { var options = { url: 'http://www.google.com', autoSize:true, allowMaximize:true, title: 'Test dialog', showClose: true, }; var dialog = SP.UI.ModalDialog.showModalDialog(options); } </script> <a href="javascript:ShowDialog()">Boo</a>
What isn’t well documented is using SharePoint modal dialogs to render dynamically generated html. When you call SP.UI.ModalDialog.ShowModalDialog you need to pass in a SP.UI.DialogOptions object. Charlie kindly posted the list onto MSDN, but with regards to passing in html it’s incorrect. It seems to indicate that raw html can be passed in.
<script> function ShowDialog() { var htmlString = 'hello world'; var options = { html: htmlString, autoSize:true, allowMaximize:true, title: 'Test dialog', showClose: true, }; var dialog = SP.UI.ModalDialog.showModalDialog(options); } </script> <a href="javascript:ShowDialog()">Boo</a>
However if you try this you’ll just get an error like this:
Message: Object doesn't support this property or method Line: 2 Char: 18225 Code: 0 URI: http:///_layouts/sp.ui.dialog.js?rev=IuXtJ2CrScK6oX4zOTTy%2BA%3D%3D
This is because the string that gets passed in is evaluated for nodeType (if you want to check for yourself, see around line 764 in SP.UI.Dialog.debug.js, there is a function that the html string is passed into with a definition that looks like $13_0: function($p0).
What this means is that you have to pass in a DOM element.
<script> function ShowDialog() { var htmlElement = document.createElement('p'); var helloWorldNode = document.createTextNode('Hello world!'); htmlElement.appendChild(helloWorldNode); var options = { html: htmlElement, autoSize:true, allowMaximize:true, title: 'Test dialog', showClose: true, }; var dialog = SP.UI.ModalDialog.showModalDialog(options); } </script> <a href="javascript:ShowDialog()">Boo</a>
Do that, and you’ll get your dynamic-html dialog!
This is the same solution I’ve used last week for creating a custom HTML form inside the modal dialog.
It’s a pity Microsoft gave so little information.
I think there is something wrong with your final source code, it’s showing html and style tags embedded in your code. Please update.
Thanx!
The source code is rendered using a plugin, so might not have worked for you, but I’ve been checking on different browsers and never seem to have a problem. Any chance you can let me know what browser (type and version) you’re using?
var htmlElement.appendChild(helloWorldNode);
should be
htmlElement.appendChild(helloWorldNode);
(without var)
Thanks for the post, really useful
oops! thanks for pointing that out
Hi Thanks for a nice article.Fixed My issue…
This line also worked.
var htmlElement.appendChild(helloWorldNode);
no issue..