SharePoint Apps and Modal Dialogs

SharePoint Apps and Modal Dialogs header image

Building apps for SharePoint using the app model is a great way of extending functionalities to the platform. Over the last few projects we ended up adding buttons to the ribbon with the App Model. This allowed us to implement custom features tailored for specific needs. In most cases those ribbon buttons opened a modal dialog allowing users to interact with data or execute a task, so pretty basic operations.

Adding buttons to the ribbon through the app model isn’t all that hard, you can use a element with a custom action. And the basics are described on MSDN Leveraging SharePoint dialogs in Apps for SharePoint. You also can specify the width and height of your dialog using the responding properties on the Custom Action

<CustomAction Id="c8ed2e62-b6dd-431c-8587-c7d38e130d56.SelectTemplate"
    RegistrationType="List"
    RegistrationId="101"
    Location="CommandUI.Ribbon"
    Sequence="10001"

    HostWebDialog="true"
    HostWebDialogHeight="500"
    HostWebDialogWidth="800"
    Title="App Sample">

When selecting images for the button you can also specify an image map and position of the image. By using the out of the available image map you can use existing images and do not have to worry about the image size:

<Button Id="Ribbon.Documents.New.AppSamplesClick"
    Alt="Sample Click"
    Sequence="100"
    Command="Invoke_AppSampleClick"
    LabelText="Sample Click"
    TemplateAlias="o1"
    Image32by32="_layouts/15/$Resources:core,Language;/images/formatmap32x32.png"
    Image32by32Top="-171" Image32by32Left="-443"
    Image16by16="_layouts/15/$Resources:core,Language;/images/formatmap16x16.png"
    Image16by16Left="-145" Image16by16Top="-74" />

And finally you will need to have your handler in place that opens the actual page that contains the logic. You can work with the URL parameters here.

<CommandUIHandler Command="Invoke_AppSampleClick"
    CommandAction="~remoteAppUrl/Pages/AppSample.aspx?{StandardTokens}&amp;Source={Source}&amp;ListId={ListId}"/>

As you could read in the you can use a function to close the dialog. However, we also had the requirement to redirect to a different page once the user finishes his actions. For example there is logic in place that moves a document to a different location and if it is successful the user has to be redirect to that location. In that case you can use the postMessage functionality as well but with a post message that contains a NavigateParent= rather than a CloseCustomAction. By redirecting the parent and providing the URL the browser will know that it has to redirect to another page, and thus the dialog will be closed.

mavention.AppSamples.closeParentDialog = function (refresh) {
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
    if (refresh)
        target.postMessage('CloseCustomActionDialogRefresh', '*');
    else
        target.postMessage('CloseCustomActionDialogNoRefresh', '*');
}

mavention.AppSamples.closeParentAndRedirect = function (url) {
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

    target.postMessage('NavigateParent=' + url, '*');
}

So redirecting to another page from within a modal dialog is as easy as that and provide a great way to redirect users to another page.

Loading comments…