Order List Items Like in a Meeting Workspace: Part 3

January 11, 2012

In the previous parts I told you how you could enable the reorder functionality and create a custom reorder action in the ribbon. In this blog post I will cover how you could open the reorder page in a SharePoint dialog window.

Everywhere in SharePoint you got dialog windows. So it would be much cleaner to modify the custom action to also use a dialog box.

The final result looks like this:

Reorder Dialog Result

Reorder Dialog Result

Model Dialog (JavaScript)

You will need to use JavaScript to open a dialog box. This can be done by creating a call a function called showModalDialog. More information about this function can be found here: MSDN.

So what does this function need?

The option properties you will be using in this example are: url and dialogReturnValueCallback.

For the url property you could use the Navigate to URL value from the previous post.

When working with a JavaScript call, the ~site token will not work. This needs to be replace with this: {SiteUrl}.

With the dialogReturnValueCallback property you can create a callback function that executes after a completed form submission.

We are going to use this property to create a callback function that automatically refreshes the page when the form submission was ok. You could use the following function.

The whole block looks like this:

Change Custom Action

The only thing that remains is to update your custom action that you created in Part 2.

  • Open the custom action;
    Custom Change Item Order Action

    Custom Change Item Order Action

  • Change the Navigate to URL property with your JavaScript block;
    Update the Navigate to URL

    Update the Navigate to URL

  • Click OK.

Now you should have a custom action that opens a dialog box to the reorder page.

Change Item Order Result

Change Item Order Result

Related Posts

Order List Items Like in a Meeting Workspace: Part 1
Order List Items Like in a Meeting Workspace: Part 2

Comments