Client Web Part Custom Properties and Query String Standard Token in SharePoint 2013 Napa App

Solutions Architect

November 29, 2012

Rate this article

Views

1336

This post explains about how to create an user defined custom property for a Client Web Part in SharePoint 2013 Napa App and its relationship with the query string and the standard tokens. The option for getting the data from Client Web Part’s custom property is bit different from Farm based or Sandboxed Web Parts. In Napa App, the value of the property has to be accessed via query string .

To begin with, lets create a new Napa App with couple of custom properties and then we can try to get the value of those properties and display it in the page. If you are new to Napa App, check out my earlier articles on Napa Apps

1. Configuring On Premises Napa App

2. Twitter Feed Client Web Part

Follow the below steps to create a new Napa App and to create custom properties with different data types

1. Open Visual Studio 2012 and create a new SharePoint 2013 App

2. Provide a Name for the App, URL of a site to debug the App and select hosting mode of App. For this sample I have selected SharePoint-hosted , as I have configured my environment for on premises Napa App development. You can also check out my another article which explains how to enable your environment for On-Premises Napa App development

3. Right click the project inside the Solution explorer and create a new Client Web Part

The client Web Part , by default has a Properties section with a string property in commented state.

I have uncommented the properties section and have added the below available XML mark-up to add new string, enum, int and boolean properties.

 <Properties>
   <Property Name="StringProperty1" Type="string" WebBrowsable="true" WebDisplayName="String Property" WebDescription="Description for String Property" WebCategory="SharepointFrontier Properties" DefaultValue="SFS" RequiresDesignerPermission="true" />
   <Property Name="EnumProperty1" Type="enum" WebBrowsable="true" WebDisplayName="Enum Property" WebDescription="Description for Enum Property" WebCategory="SharepointFrontier Properties" DefaultValue="Ind" RequiresDesignerPermission="true">
     <EnumItems>
       <EnumItem Value="US" WebDisplayName="United States of America"/>
       <EnumItem Value="Uk" WebDisplayName="United Kingdom"/>
       <EnumItem Value="Ind" WebDisplayName="India"/>
     </EnumItems>
   </Property>
   <Property Name="BooleanProperty1" Type="boolean" WebBrowsable="true" WebDisplayName="Boolean Property" WebDescription="Description for Boolean Property"  WebCategory="SharepointFrontier Properties" DefaultValue="true" RequiresDesignerPermission="true"/>
   <Property Name="IntProperty1" Type="int" WebBrowsable="true" WebDisplayName="Int Property" WebDescription="Description for Int Property" WebCategory="SharepointFrontier Properties" DefaultValue="1" RequiresDesignerPermission="true"/>
 </Properties>

Every property element should have value assigned for DefaultValue, RequiresDesignerPermission, Name and Type attributes. The other attributes of property element are optional.

The next step is to change the value of src attribute of content element. Change the src attribute to ~appWebUrl/Pages/Default.aspx?StringProperty1=_StringProperty1_&EnumProperty1=_EnumProperty1_&BooleanProperty1=_BooleanProperty1_&IntProperty1=_IntProperty1_

<Content Type="html" Src~appWebUrl/Pages/Default.aspx?StringProperty1=_StringProperty1_&EnumProperty1=_EnumProperty1_&BooleanProperty1=_BooleanProperty1_&IntProperty1=_IntProperty1_"/>

In the above line, if you notice the Query string pattern , it has Property Name as Key and its value placeholder with _ at the start and end of property name. You can also use StandardTokens in the Query String . {StandardTokens} is a combination of 3 Tokens , through which you can get Host URL, App Web URL and language. To learn more about URL tokens that can be used in SharePoint 2013 Napa App, check out this page available at the tips section.

<Content Type="html" Src="~appWebUrl/Pages/Default.aspx?{StandardTokens}&StringProperty1=_StringProperty1_&EnumProperty1=_EnumProperty1_&BooleanProperty1=_BooleanProperty1_&IntProperty1=_IntProperty1_" />

I have replaced the existing code in Default.aspx with the below piece of code to read and display the query string value on the screen

 <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 <WebPartPages:AllowFraming ID="AllowFraming1" runat="server" ScrollBars="None" />
  
 <script type="text/javascript">
     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 singleParam[1];
         }
     }
     var sProp = decodeURIComponent(getQueryStringParameter("StringProperty1"));
     document.write('Value of StringProperty1 : ' + sProp + '</br>');
 
     var eProp = decodeURIComponent(getQueryStringParameter("EnumProperty1"));
     document.write('Value of EnumProperty1 : ' + eProp + '</br>');
 
     var bProp = decodeURIComponent(getQueryStringParameter("BooleanProperty1"));
     document.write('Value of BooleanProperty1 : ' + bProp + '</br>');
 
     var iProp = decodeURIComponent(getQueryStringParameter("IntProperty1"));
     document.write('Value of IntProperty1 : ' + iProp + '</br>');
 
     var sHost = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
     document.write('Value of SPHostUrl : ' + sHost + '</br>');
 
     var sWeb = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
     document.write('Value of SPAppWebUrl : ' + sWeb + '</br>');
 
     var sLan = decodeURIComponent(getQueryStringParameter("SPLanguage"));
     document.write('Value of SPLanguage : ' + sLan + '</br>');
 
 
 </script>

4. Build and deploy the Napa App

5. Edit a page in the site in which you have deployed the App and add the new App you have deployed by selecting Insert => App Part

6. Initially the Client Web Part will be rendered with the default values. This can be changed by editing the App Part

Client Web Part with Default Values

7. To change the properties edit the App part and navigate to SharePoint Frontier Properties Group. Change the Values and click Ok to apply the Changes.