Sharepoint-hosted App - App Part Tokens

Following tokens can be used in an App Part:

editMode - Its value will be either 0 or 1. If value is 1 it means App Part is currently in Edit mode. For Display mode this value will be 0.

WPID - Represents WebPart.ID For example: g_48cf8b15_5075_4516_b744_84feef85584a. Each WebPart on page always has unique ID.

WPQ - Represents WebPart.ClientID For example: ctl00_ctl33_g_48cf8b15_5075_4516_b744_84feef85584a

WebLocaleId - Represents web.Language.ToString(CultureInfo.InvariantCulture) For example: 1033


In Elements.xml file of App Part, append these tokens to Src attribute of Content tag:

<Content Type="html" Src="~appWebUrl/Pages/ClientWebPart1.aspx?{StandardTokens}&amp;editMode=_editMode_&amp;WPID=_WPID_&amp;WPQ=_WPQ_&amp;WebLocaleId=_WebLocaleId_" />

Use following code to get the value of these tokens in an App Part Page:

     function getQueryStringParameter(paramToRetrieve) {
          var params;
          var strParams;

          params = document.URL.split("?")[1].split("&");
          strParams = "";
          for (var i = 0; i < params.length; i = i + 1) {
               var singleParam = params[i].split("=");
               if (singleParam[0] == paramToRetrieve)
                    return decodeURIComponent(singleParam[1]);
          }
     }

     alert(getQueryStringParameter("editMode"));
     alert(getQueryStringParameter("WPID"));
     alert(getQueryStringParameter("WPQ"));
     alert(getQueryStringParameter("WebLocaleId"));

Sharepoint-hosted App - App Part Edit or Display mode detection

In Elements.xml file of App Part, append editMode token to Src attribute of Content tag
Note: _editMode_ token will be replaced automatically by 0 or 1 depending on the current mode.

<Content Type="html" Src="~appWebUrl/Pages/ClientWebPart1.aspx?{StandardTokens}&amp;editMode=_editMode_" />

Add following helper function in App Part Page to retrieve the parameters from query string.

function getQueryStringParameter(paramToRetrieve) {
     var params;
     var strParams;

     params = document.URL.split("?")[1].split("&");
     strParams = "";
     for (var i = 0; i < params.length; i = i + 1) {
          var singleParam = params[i].split("=");
          if (singleParam[0] == paramToRetrieve)
               return decodeURIComponent(singleParam[1]);
     }
}

Use following code to detect current mode.

var editMode = getQueryStringParameter("editMode");

if (editMode == "1") {
     alert("editMode");
} else {
     alert("displayMode");
}