Freigeben über

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

  • Artikel

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!

Comments

  • Anonymous
    January 01, 2003
    Thank you guys! Your post have inspired me to do some research and find a few additional tokens (parameters) available for App Parts. Please check my blog post: blog.sharepointalist.com/.../sharepoint-2013-app-part-tokens.html PS. Also one correction. wpId custom property is completely redundant in this sample.

  • Anonymous
    January 01, 2003
    Very Informative.

  • Anonymous
    January 01, 2003
    Thanks for sharing

  • Anonymous
    April 10, 2013
    Thank you for pointing out. wpId is indeed redundant. It's built-in. The following part is not necessary in code.    <Property Name="wpId"               Type="string"               RequiresDesignerPermission="true"               WebCategory="Basic app part category"               WebDisplayName="WebpartID"               DefaultValue="webpart ID">     </Property> Checked your blog. Very nice!

  • Anonymous
    May 17, 2013
    Great. Is it possible to detect if a host page is in edit mode? This solution works very fine if the app part is selected, but not if something else is edited on page.