Sharepoint modal dialog tutorial (and how to use it like JQuey modal dialog, and why not to use JQuey modal dialog)

so lets talk about the Sharepoint Modal Dialog, the one that comes form SP.UI.ModalDialog

part 1 - why not to use the jquery modal

that is simple, jquery modal looks to put an overlay on the screen, and its almost impossible to fix it with sharepoint for the multiple wrapping elements, good luck with that.

part 2 - but jquery modal is better, easier, and easier to use and customize

you're right. so go solve part 1. or try part 3.

part 3 - how to easily use SP modal's easy, and more like JQ's

well the most easy way is to prepare a div element with everything you need inside and let the dialog execute on it, for example (note that "html" mean HTMLElement, not html text...):

<div style="display:none">
    <div class="divForModal" title="Happy Dialog">
      <img src="../mouseovericon.png">
      <!-- and all other content -->
    </div>
</div>
<script>
MyNS.OpenItemModal = function (anchor) {
   var modal = $(anchor).parents('.cbs-pictureOnTopContainer').find('.divForModal');

   SP.UI.ModalDialog.showModalDialog({
      html: modal[0],         
      title: modal.attr('title'),
      allowMaximize: false,
      showClose: true,
      autoSize: true
   });
};

</script>

see? just like ur simple JQ.

part 4 - its not working!!!

most of the times its your code, but the other times its because Sharepoint does not bring this script file. you can do it in the conservative way:

<SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.UI.Dialog.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false"/>

part 5 - SP.SOD, or "I cant/don't want to touch the master"

Sharepoint kindly gives us the option to let him handle everything by using the SP.SOD ns. the most simple example is execute:
SP.SOD.execute(key, functionName, args) Method
this one say, hey, this function, this js file, here are your arguments, make it work. can be with a minor change:

MyNS.OpenItemModal = function (anchor) {
   var modal = $(anchor).parents('.cbs-pictureOnTopContainer').find('.divForModal');

   var options = {
            html: modal[0],
            title: modal.attr('title'),
            allowMaximize: false,
            showClose: true,
            autoSize: true
   };
   SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
};

as you can see, just prepare the options and let Sharepoint worry about the script and his dependencies.

part 5 - it only opens once!

Thanks to Yuval my T.L. i now know that when you give SP Dialog a DOM element it destroys it, not before taking it out of the DOM.
There is a most simple solution - clone ( jQuery: var spdElem = $(...).clone() ).

part 6 - epilogue 

SP.SOD has some other nice options that you should use
SP.SOD Methods
http://msdn.microsoft.com/en-us/library/office/ff408081(v=office.14).aspx

also SP.UI.ModalDialog.showModalDialog has many other option to customize it, and even callback functions
SP.UI.ModalDialog.showModalDialog(options) Method
http://msdn.microsoft.com/en-us/library/office/ff410058(v=office.14).aspx

plus the SP.UI.ModalDialog class itself has some other nice functionality
SP.UI.ModalDialog Methods
http://msdn.microsoft.com/en-us/library/office/ff410259(v=office.14).aspx

Good Luck!!

Comments

Popular posts from this blog

c# Service Play Sound with NAudio example by Moshe

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

JS/JQ simulate Enter event