SPScriptlet 4: Launch modal dialogs from ECB CustomActions from within the HostWeb

When you’re building Apps for SharePoint 2013 you can create Pages, Client Parts or CustomActions.

For CustomActions there are two different targets, either the Ribbon or the Edit Control Block (ECB) in both cases it’s not allowed to inject JavaScript. If SharePoint would allow adding JS in these situations the client script would run in the context of the HostWeb which would cause possible security leaks.

For ECB CustomActions you can provide an URL-Action which redirects the user to a URL defined by you (the App developer). You can add various tokens to the URL, as a SharePoint developer you’re perhaps aware of this functionality from previous SharePoint versions.

As an App developer you would redirect the user from the ECB to a page sitting in your App (either within the AppWeb or in the RemoteWeb) in both cases clicking your ECB CustomAction will cause a HTTP Redirect, which may break the users Workflow.

SharePoint 2013 is offering a solution if you don’t want to navigate away from the current ListView. You can display the target as a modal dialog by adding three simple properties to your CustomAction. Figure 1 shows the required XML Properties in order to display your UrlAction as a modal dialog within SharePoint 2013.  

ECB Modal Dialog

ECB Modal Dialog[/caption] If you’re doing this within a SharePoint-Hosted App, you have to explicitly activate Framing support within your Page by adding the <WebPartPages:AllowFraming />  tag to your page as shown in the snippet.  

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
  <WebPartPages:AllowFraming ID="AllowFraming" runat="server" />
  <div>
    This is my aweome Dialog shipped within a SharePoint hosted app

    www.xplatform.rocks
  </div>
</asp:Content>  

Figure 2 shows the created dialog, that has been launched from the ECB (directly from within the HostWeb)

Modal Dialog in Action

I hope this post was helpful for you. If so, please feel free to leave a comment!

Comments

comments powered by Disqus