Sharepoint 2013 Properties in app part

To define properties in an app part, you need to edit the elements.xml file that defines the app part.

In this sample a created a property named “value1”, I changed the Src of the content element and defined the new property in the properties section:

<?xml version=”1.0″ encoding=”UTF-8″?>

<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”&gt;<ClientWebPart DefaultHeight=”200″ DefaultWidth=”300″ Description=”ClientWebPart1 Description” Title=”ClientWebPart1 Title” Name=”ClientWebPart1″>

<!– Content element identifies the location of the page that will render inside the client web part         Properties are referenced on the query string using the pattern _propertyName_         Example: Src=”~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_” –>

<Content Src=”~appWebUrl/Pages/ClientWebPart1.aspx?{StandardTokens}&value1=_value1_” Type=”html“/>

<!– Define properties in the Properties element.         Remember to put Property Name on the Src attribute of the Content element above. –>

<Properties><Property Name=”value1″ Type=”string” WebCategory=”App Settings” RequiresDesignerPermission=”false” DefaultValue=”Test value” WebDescription=”Value 1″ WebDisplayName=”Value 1″ WebBrowsable=”true”/></Properties></ClientWebPart></Elements>

To read the propeties’s value, in the app part page, you need to parse the url, since properties are in the query string. I used the code:

$(document).ready(function () {

var paramsStr =””;

if (document.URL.indexOf(‘?’) != -1) {

var params = document.URL.split(‘?’)[1].split(‘&’);

for (var i = 0; i < params.length; i++) {

        if(params[i].split(‘=’)[0]==’value1′)

                        paramsStr = paramsStr +decodeURIComponent(params[i]).split(‘=’)[1];

}

$(‘#value1’).text(paramsStr);

}

});

To test my code, in my app page I created the element:

<p id=”value1″></p>

When I run my app part I see the Defaul Value of my property:

AppPartProp1

Advertisements

Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: