Creating simple pop up window and render html using the Sharepoint 2010 Dialog Framework

September 12, 2011

First of all i would like to thank Johnny Tordgeman for helping me with tihis spesific post.

 

The Dialog framework is a great out of the box javascript feature that mostly used for opening application pages .

 

but what happens when you only want to open a simple pop up window

 

for showing some text and maybe one or two buttons like ‘Ok’ and ‘Cancel’ ?

 

well, i had 2 choices, to work with jquery what was the preferred way when you wanted to

 

make a pop up window that gives a proper user experience,

 

or using the new sharepoint dialog framework.

 

I have a saying, if you have functionality that comes with the product , use it!

 

especially if it sooo easy to use.

 

 

in the SP.UI.ModalDialog class you have HTML property for rendering html content.

 

but remember, for the HTML property to work you must pass a DOM element

 

or you’ll get an error:’Object doesn’t support this property or method’

 

Basic example for creating dilaog pop up window

 

//open dialog

function openDialog() {

 

var options = SP.UI.$create_DialogOptions();options.url = ‘http://blogs.microsoft.co.il/blogs/choroshin’;

options.width = 200;

 

options.height = 100;

options.dialogReturnValueCallback = Function.createDelegate(null,closeDialogCallback);

SP.UI.ModalDialog.showModalDialog(options);}

 

in my case i needed a small pop up window with a “Close” button.

 

1) Declare an HTML button.

 

* i didn’t want to show the button on the page so i used css to hide the button.

 

<

divid=”DivDialog”style=”display:none;”>     <br/>

 

    <inputtype=”button”value=”Close”id=”ButtonDialog”

style=”background-color: #FFFFFF”/>

 </div>

 

2) Pass the html element to an html property.//open dialog

 

function openDialog() {

 //create html

 

var htmlElement = document.createElement(‘h3’)

var dialogDiv = document.getElementById(‘DivDialog’)

dialogDiv.setAttribute(

‘style’, ‘block’);var textNode = document.createTextNode(‘Make code not war!’);

htmlElement.appendChild(textNode);

 

htmlElement.appendChild(dialogDiv);

var options = SP.UI.$create_DialogOptions();

options.html = htmlElement;

options.title = ‘Test’;

 

options.width = 200;

options.height = 100;

options.dialogReturnValueCallback = Function.createDelegate(null,closeDialogCallback);

SP.UI.ModalDialog.showModalDialog(options);}

 

The Result:

 

 

That’s all folks… :))

 

hope this post helps my friends .

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

3 comments

  1. Dr. Ronen KolatkerSeptember 14, 2011 ב 13:30

    Great post and excellent tip!
    Keep up the good work!!!

    Reply
  2. MoriyaSeptember 18, 2011 ב 8:53

    Great Post!
    I’ll use it sometime..

    Reply