Tuesday, November 30, 2010

How to make a Modal Page (Dialog Page) in the SharePoint 2010

  • (SharePoint JavaScript Modal Framework  )
  • Place a Content Editor Web Part in the page and Switch to the Source Edit Mode in the editor and place the following code by putting your page URL. You can put either relative or absolute URLs.
  • If you are not going to use content editor you can edit the row HTML as well.
  • Put the following script to the page. you can put the code to
  • <script type="text/javascript">
    function OpenDialog(myurl) {
    var options = SP.UI.$create_DialogOptions();
    options.url = myurl;
    // options.width = 500;
    // options.height = 400;
    //options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    SP.UI.ModalDialog.showModalDialog(options);
    }
    </script>

  •  You can put this code to Additional page header section in yout page.SharePoint will allow to put in that section.
image   

Then you can call as follows.



  • <a onlick=”javascript:OpenDialog(‘/sites/alr/SitePages/Reservation.aspx’)” >Show</a>

This is sample URL I have Put.


image



You can even use for trigger a call back event using the modal frame work. in a later post i will show you how to it. 


this is also sample dialog i have created to display workflow visualization.


image Following are the list of options you can put as dialog options.










































































Property


Data type


Default value


Description


allowMaximise


boolean


true


Determines whether the maximise button is present on the rendered dialog.


args


object

 

We’ll examine this property in more detail later. The args property allows us to pass arbitrary properties into our dialog.


autoSize


boolean (true/false)


true


Determines whether the dialog should be automatically sized to fit within the parent browser window. Where a value has been set for width or height, this value is deemed to be false regardless of the actual setting.


dialogReturnValueCallback


function

 

We’ll examine this property in more detail. By passing a function, we can specify a section of script to be executed when the dialog is closed.


height


numeric

 

The height of the dialog to be displayed. If this value is not set the dialog is automatically sized to fit the window.


html


string

 

Where a Url is passed, an IFRAME tag is rendered pointing to the appropriate Url. AS an alternative to this, it is possible to pass arbitrary HTML instead, in which case, rather than an IFRAME tag, the arbitrary HTML is rendered instead.


showClose


boolean (true/false)


true


Determines whether the close button is visible in the titlebar of the dialog.


showMaximized


boolean
(true/false)


false


Dictates whether the rendered dialog should fill the available space in the parent window.


title


string

 

Specifies the title of the dialog. Where no title is specified, the title of the document referred to by the Url property is used instead.


url


string


null


The url of the page to be shown in the dialog. Where a url is set and IFRAME tag will be rendered by the Dialog framework and the src of the IFRAME will be set to this url.


width


numeric

 

The width of the dialog to be displayed. If this value is not set the dialog is automatically sized to fit the window.


x


numeric

 

Specifies the starting position of the rendered dialog. If this value is not set the dialog is shown in the middle of the viewing area. This value represents the offset from the left edge of the parent browser window.


y


numeric

 

Specifies the starting position of the rendered dialog. If this value is not set the dialog is shown in the middle of the viewing area. This value represents the offset from the bottom of the parent browser window.

Post a Comment