JavaScript, SharePoint

SharePoint Dialog Page – Opening a Custom Page

Recently I learned something new while working with SharePoint 2010.

I was working with a SP List’s NewForm page and was restricted to working on the client-side only (i.e. No server side code / web parts).

The basic scenario was that I had a List of Issues. Each individual Issue could then have related Issues.
So our List basically looked like:

  • Issue ID
  • Issue Name
  • Related Issues (IDs)

The customer didn’t like the default lookup controls to select the Related Issues because they could have a LOT of Issues in the system at any one time (600+ Issues) and the default controls don’t really allow the user to filter, sort or do any other wonderful SharePoint things that we can normally do on a List.

SharePoint Standard UI
SharePoint Standard UI

The solution that we came up with was to utilise JavaScript and try to improve the UI a little.

First I edited the Default New Form and the Default Edit Form to add a new Content Editor web part to the forms. This would hold a link to the JavaScript that I would write to hold my custom functions.

SharePoint Ribbon
SharePoint Ribbon

Next I created a new wiki page that held a standard List web part that would allow the user to view the Issue List and perform all these desired operations (filter, sort, etc.)

Finally, some code: I wanted to be able to add a link to the standard SharePoint form that would allow the user to open my new Wiki page, select the Issues that were related to the Issue they were currently creating (or editting). When the user hits OK, the Wiki page would close and the Issues that they had selected would be added to their Related Issues field.

First, adding a hyperlink to the form. This was relatively easy. My pages aleady included jQuery, so I just created a selector:

ctlUrlTarget = getTagFromIdentifierAndTitle("textarea", "TextField
", config.spFieldName);
if (ctlUrlTarget) {
    $(ctlUrlTarget)
        .parent()
        .append("" + config.customPageTitle + "");
    $("#log_relatedLog").click(dialogLaunch);
}

You can see that I also added a Click handler for the button which will call the dialogLaunch method.

var dialogLaunch = function() {
    queryLogs(config.spLogList.DisplayName);

    var options = {
        url                             : config.customPage,            // url of the page to open in the SP Dialog
        title                           : config.customPageTitle,       // title of the SP Dialog
        width                           : config.customPageWidth,       // width of the SP Dialog
        height                          : config.customPageHeight,      // height of the SP Dialog
        allowMaximize                   : true,                         // whether the SP Dialog titlebar will have a Maximise button
        showClose                       : true,                         // whether the SP Dialog titlebar will have a Close button
        dialogReturnValueCallback       : dialogCallback                // method to call when the SP Dialog is closed
    };

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

The config.customPage setting pointed to the relative path of my Wiki page created above. When I opened the form however, I kept getting a server-side SharePoint error.

Image

Because I didn’t have access to the server, I couldn’t determine the cause of the error. I verified that the URL of the Wiki page was correct, and that the Wiki page itself didn’t cause the error. I tried opening other Wiki pages that existed and were confirmed working and the error occurred again. I thought perhaps it was due to a bug with the showModialDialog method.

Finally I found this blog article: Sharep10nt which is similar to this page which has this crucial note at the end:

Note: It’s applicable only to Webparts Pages. If you open any Wiki Page in Modal Dialog then SharePoint will throw error “The Ribbon Tab with id: “Ribbon.Read” has not been made available for this page or does not exist.”. So if you want to open a page in Modal Dialog then use “Site Actions -> More Options -> Page -> Webpart page”. In this page you can add Content Editor Webpart and add your content.

So thanks to venkatx5 for fixing my problem.

By re-working my Wiki page into a Web Part page, my server-side problem immediately went away.

Advertisements

2 thoughts on “SharePoint Dialog Page – Opening a Custom Page

  1. How do you rework all wiki pages on your site to webpart pages. I need to implement a modal popup in a web part I’m transferring from 2007. The web part could be added to Wiki Pages.

    1. The only way I know how is to create the new web part page and bring in the same content as your wiki page. There may be a way of converting the pages, but I don’t know it

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s