Home > CMS- Content Management System > Sharepoint > How to add and read SharePoint Hosted custom App Part properties

How to add and read SharePoint Hosted custom App Part properties

This post was most recently updated on July 31st, 2024

Hello everyone, in this post we will discuss about custom Add-in Part properties with how to add and read custom Add-in Part properties.

If you are reading this post first, I would recommend to read SharePoint Hosted Add-ins as an App-Part first, that mentions what is an app part and how to create and show add-in as app part.

The ClientWebPart Element.xml contains the core definition (properties) for a Client Web Part.

Element.xml file have three elements which are <ClientWebPart> parent and <Content> ,<Properties> have child.

  • <ClientWebPart> : Use for configuring a client web part properties like Name, Title, Description, Width and Height.
  • <Content> : Content element identifies the location of the page inside that will render inside an client web part. Also we passed query string using pattern propertyName=_propertyName_.
  • <Properties> : In Properties element we define custom properties.

Client Web Part support only four custom properties. You define the custom properties in the Elements.xml file. There are four types of custom properties:

  1. string – create simple string type text-box
  2. int – create simple integer type text-box
  3. boolean – create simple checkbox
  4. enum – create simple selection list

The following example shows an Elements.xml file that declares a custom properties of Add-In part.


As you see above code you notice each property has six attribute are they

  • Name: The Name attribute is simply the name of the property to be used to get property value.
  • WebBrowsable: The WebBrowsable attribute tells SharePoint whether or not the custom property should be rendered in the Edit Web Part’s Tool Part.
  • WebDisplayName: The WebDisplayName attribute is simply the friendly name of the property to be used in the UI.
  • WebDescription: The WebDescription is the text to be displayed in the ToolTip of the web part.
  • WebCategory: The WebCategory attribute is the expandable section that the property will be defined under in the Edit Web Part’s Tool Part.
  • DefaultValue: The DefaultValue attribute is the set default value of property.
  • RequiresDesignerPermission: Gets a flag that indicates whether a property in a Web Part requires the user to have design permissions to modify it.

Now at the end we get those property value in jQuery file.

Steps to add and read custom add-in properties on accordion

  1. Create an add-in, name Accordion in Microsoft Visual Studio 2013. For more info to create accordion read post How to Create a Basic Accordion SharePoint Hosted Add-in
  2. So we assume that you have setup Basic Accordion add-in. Now we setup Add-In as an App Part for this read my article SharePoint Hosted Add-In as an App Part
  3. Here we add custom property to Accordion.
    • Edit Elements.xml file and add following xml code.

      In Elements.xml file we add property under two category Accordion Properties and Accordion Header Properties, for separate section in edit web part. Also we change query sting according to property name.

    • Read custom property value. Edit Accordion.js file and add following code
    • Edit accordion.css file to add css class for accordion header code
  4. Run and Deploy the Add-In solution, Now go to the developer site and add the App Part in Web Part page, here you notice that our app part name and description will change.

    As you see in below screen shot our Accordion will created by default property value.

  5. Now we change custom property on Edit Web Part where Header Color to Green and Web Part Title to Accordion only.


Read my further article on SharePoint Hosted App Parts

This Article is TAGGED in , , , , , , . BOOKMARK THE permalink.

4 thoughts on “How to add and read SharePoint Hosted custom App Part properties

  1. Hi,
    I am not able to get property value().Please help me.

    var webpartTitle = getQueryStringParameter(“StringProperty”);

    In my scenario i am passing the List Name.So i am trying to catch the list name value:

    var webpartTitle = getQueryStringParameter(“ListName”);
    getQueryStringParameter() this function did not getting the text box value.

    1. Hello Yesubabu,

      Please check the Content-type url and Property name both are should be same [ Src=”~appWebUrl…. ], after that console the getQueryStringParameter(); function. You can also test with any other custom properties like int or enum and check they are returning any value?. if this not helps provide Elements.xml.

      Thank You for the comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">