HOW TO: Detect an App Part in edit mode in SharePoint 2013

This blog post is a contribution from Aaron Miao, an engineer with the SharePoint Developer Support team.

This article states, “with app parts, you can show your app user experience (UX) right in the host web.  An app part displays your app content using an iFrame.  End-users can customize the experience using the custom properties that you can provide for your app part.  The app webpage receives the custom property values through parameters in the query string”.

The question is what is it that we need to pass into an app on the query string to indicate which mode the user is in (edit or view).  So that you can do something differently when a page is being edited.  There’s no documentation at the time of writing this post that describes something that can be used for this purpose.  This post is intended to provide information about this.

In SharePoint 2013 RTM builds, there’s a token called editMode that can be passed to query string.  It indicates if the app part is in edit mode.  editMode returns “1” if it is edit mode; “0” if it is not.  Edit mode is considered when page is in design mode and the web part is selected.

Here’s how to use the editMode token.

a. In your app part definition, just add editmode=_editMode_ along with other properties as shown below.

 <ClientWebPart Name="ClientWebPart" Title="TestAppPart" Description="TestAppPart" DefaultWidth="600" DefaultHeight="300">
   
   <Content Type="html" Src="~appWebUrl/Pages/DemoPage.aspx?{StandardTokens}&amp;wpId=_WPID__&amp;editmode=_editMode_" />
  
   <Properties>
     <Property Name="wpId"
               Type="string"
               RequiresDesignerPermission="true"
               WebCategory="Basic app part category"
               WebDisplayName="WebpartID"
               DefaultValue="webpart ID">
     </Property>
   </Properties>
  
 </ClientWebPart>

b. In your ASPX page, add a button and wire the onclick event to the code like shown below.

 var editmode;
 var wpid;
 var params = document.URL.split("?")[1].split("&");
  
 try {
     for (var i = 0; i < params.length; i = i + 1) {
         var param = params[i].split("=");
         if (param[0] == "wpId")
             strProp = decodeURIComponent(param[1]);
         else if (param[0] == "editmode")
             editmode = decodeURIComponent(param[1]);
     }
 }
 catch (err) {
     alert("Failed to access query strings. Error is: " + err.message);
     return;
 }
  
 if(editmode == 1)
     alert("App Part is in edit mode. (editmode=" + editmode + ")");
 else
     alert("App Part is in view mode. (editmode=" + editmode + ")");

c. Deploy the app.

d. Add the app part to a test page within host web and save it.

e. When clicking the button on the app page, you’ll get this editmode=0, meaning the app part is in view mode.

image

f. Edit the ASPX page on the host web and then “Edit Web Part”.  Clicking on the button will give you the below message, which indicates the app part is being edited.

image

Hope this helps!