Monday, May 16, 2011

Using SP.UI.ModalDialog in SharePoint 2010


Modal dialogs in SharePoint 2010 use the client library SP.UI.ModalDialog and showModalDialog. We can do the following within the context of a page without leaving the page:
  • Add and Edit metadata
  • Perform administrative task
  • Attach documents/files
The following step-by-step instructions show you how to implement a modal dialog in your server side pages:
  1. Create a hyperlink that will be responsible for triggering your modal. Set the onclick attribute as follows:
  2. <a href="#" onclick="javascript:openDialog(); return false;">Open Attach File</a>
  3. Implement the openDialog function in javascript.
  4. <script type="text/javascript">
        function openDialog() 
        {
            var options = 
            {
         url: http://server/_layouts/AttachFile.aspx?ListId={0F42F104-538C-4F3C-8098-0DD93C8CD779}&ItemId=246&Source=http%3A%2F%2Fdeadmines%2Fsites%2Fhorizon%2FLists%2FYear%2520End%2FMy%2520Inbox%2520%2520All%2520lists.aspx,
         width: 800,
         height: 600,
         title: "Attach File",
            };
     SP.UI.ModalDialog.showModalDialog(options);
        }
    </script>
    To be more dynamic…
    Hard coding the url is not recommended because it is really hard to maintain. There are lots of ways to make your code dynamic and this is only one of them. We could have also leveraged the url query strings that contain most of this information.
  5. Create hidden fields to store the information you will need to modify the url.
  6. <input type="hidden" id="listId" runat="server" />
        <input type="hidden" id="itemId" runat="server" />
        <input type="hidden" id="sourceUrl" runat="server" />
        <input type="hidden" id="webUrl" runat="server" />
  7. Setup the hidden fields in your Page_Load event.
  8. listId.Value = list.ID.ToString();
            itemId.Value = listItem.ID.ToString();
            sourceUrl.Value = list.DefaultViewUrl;
            webUrl.Value = web.Url;
  9. Use the hidden fields in the javascript function you wrote above.
  10. <script type="text/javascript">
        function openDialog() 
        {
            var options = 
            {
         url:  $("#<%= webUrl.ClientID %>").val()+ "/_layouts/AttachFile.aspx?ListId=" + $("#<%= listId.ClientID 
                         %>").val() + "&ItemId=" + $("#<%= itemId.ClientID %>").val() + "&Source=" + $("#<%= 
                         sourceUrl.ClientID %>").val(),
         width: 800,
         height: 600,
         title: "Attach File",
            };
     SP.UI.ModalDialog.showModalDialog(options);
         }
    </script>

First we create the JavaScript function that will open up the new modal view. Notice I’m passing variables to the function for the file path, width and height. I did this so I can reuse the function for a variety of modal view calls for different purposes.
functionModalDialog(FormPath, FormWidth, FormHeight) {
    varoptions = SP.UI.$create_DialogOptions();
    options.url = FormPath;
    options.width = FormWidth;
    options.height = FormHeight;
    options.allowMaximize = false;
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    SP.UI.ModalDialog.showModalDialog(options);
}
We now need to create our call back method called ‘CloseCallback’ as mentioned in the above function. This method will be used to capture the results of the modal and perform some sort of confirmation action.
functionCloseCallback(result, returnValue) {
    alert(‘dialogResult’ + result + ‘\nreturnValue’+ returnValue);
    if(result == SP.UI.DialogResult.OK)
    {
    SP.UI.Notify.addNotification(‘You chose the OK button’);
    document.title = returnValue;
    }
    if(result == SP.UI.DialogResult.cancel)
    SP.UI.Notify.addNotification(‘You chose the Cancel button’);
}
You’ll see from the above method that we provide an alert with the full feedback of the modal and then utilize the SP.UI.Notify class to provide additional methods of feedback.
Now all we need to do is add an onClick of onClientClick event to an object in your code.
onclick=”ModalDialog(‘/_layouts/TestPage.aspx’,’420′,’300′)”
This is a quick introduction, but it should be enough to get you going with the SP.UI.ModalDialog class.

No comments:

Post a Comment

Thank you for Commenting Will reply soon ......

Featured Posts

#Linux Commands Unveiled: #date, #uname, #hostname, #hostid, #arch, #nproc

 #Linux Commands Unveiled: #date, #uname, #hostname, #hostid, #arch, #nproc Linux is an open-source operating system that is loved by millio...