In SharePoint we often get request from client to open the forms in model dialog box. The Ideal way of doing this is to use SP Dialog box.
We can use SP Dialog box in following ways:
- Show user notification massage, alerts etc.
- Show different pages on button click or on link etc.
- Show wait loading screen to end user.
- Show custom list form either new, edit or display with responsive. And so on.
SharePoint provide native model pop ups framework called SP.UI.Dialog.js file which is a client-side library to implement the modal dialog. It contains a static class SP.UI.ModalDialog using which, we can customize the modal dialog and call it as required custom options.
How to invoke model dialog box?
|
1 |
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); |
When invoke above function here we need to pass ‘options’. Options are array of attribute use to customize pop ups.
|
1 2 3 4 5 6 7 8 |
var options = { url: 'https://abc.sharepoint.com/Lists/Test/EditFrm.aspx?ID="+id+"&isdlg=1', //Set the url of the page title: SharePoint Modal Pop Up ', //Set the title for the pop up shown at top allowMaximize: false, showClose: true, //Show close button at upper right side corner width: 600, height: 400 }; |
Parameters
| Options Property | Description |
|---|---|
| title | A string that contains the title of the dialog |
| url | A string that contains the URL of the page that appears in the dialog. Either url or html must be specified. url takes precedence over html. |
| html | An HTML element to display within the dialog. |
| x | The x-offset of the dialog as an integer value. |
| y | The y-offset of the dialog as an integer value. |
| width | The width of the dialog as an integer value. If unspecified and autosize is false the width is set to 768px |
| height | The height of the dialog as an integer value. If unspecified and autosize is false the height is set to 576px |
| allowMaximize | A Boolean value specifying whether the Maximize button should be shown. |
| showMaximized | A Boolean value specifying whether the dialog opens maximized. |
| showClose | A Boolean value specifying whether the Close button appears on the dialog. |
| autoSize | A Boolean value that specifies whether the dialog platform handles dialog sizing automatically. |
| dialogReturnValueCallback | A function pointer that specifies the return callback function. Function takes two parameters: a dialogResult of type SP.UI.DialogResult Enumeration, and a returnValue object that contains any data returned by the dialog. |
| args | An object that contains data that are passed to the dialog. |
Steps to open list form in responsive dialog box in SharePoint 2013
- Create custom list form which will be either new, edit or display form of the list and using CSS make the form responsive.
- Next step create ajax call for SP dialog with above list form URL.
12345678910111213141516171819202122232425262728293031323334353637383940$(window).resize(function(){//Call AutosizeDialog() make dialog box responsive in mobileAutosizeDialog();});function showEditFormDialog(id) {$.ajax({url: openSPDialog("https://abc.sharepoint.com/Lists/Test/EditFrm.aspx?ID="+id+"&isdlg=1","Metric - Metric Cat 1"),async: true,cache: false,success: function (data) {/* load data into element(s) */ExecuteOrDelayUntilScriptLoaded(AutosizeDialog, "sp.js");},error: function (err) {console.log(err);/* be good and handle errors */}});}function openSPDialog(Url, Title) {var options = {url: Url,title:Title,};SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);}function AutosizeDialog() {//resize dialog if we are in onevar dlg = typeof(SP.UI.ModalDialog.get_childDialog) == "function" ? SP.UI.ModalDialog.get_childDialog() : null;if (dlg != null) {dlg.autoSize();var dlgWin = $(".ms-dlgContent", window.parent.document);dlgWin.css({ top: ($(window.top).height() / 2 - dlgWin.height() / 2) + "px", left: $(window.top).width() / 2 - dlgWin.width() / 2 });$('.ms-dlgTitle').css({'padding':'10px 30px 5px 10px'});}}
- Invoke ‘showEditFormDialog(id)’ function on button click. Final Screen shot of pop up dialog box.
For more information please visit Microsoft Documentation.
