Sunday, June 1, 2014

SharePoint 2013 introduces new model which is App model. Now onward all the code will run away from the SharePoint server. There are three types of App you can develop for SharePoint: SharePoint hosted, Auto-hosted and Provided hosted. To develop SharePoint apps Visual studio 2012  provides you templates. Using those templates you can build and deploy the apps on SharePoint site. On SharePoint Online for SharePoint App development NAPA tool has been provided, you can use VS studio also. Its free client side tool for developing Apps. You can create SharePoint hosted App using this tool. This tool is great to start with for App development; easy to use; easy deployment; easy handling.

But as it has it’s own Pros it also has Cons. And one of drawbacks is that you cannot create or add custom properties to the App Part. While if you work with Visual Studio it is very simple to add those properties. So what is resolution for people who are working on SharePoint Online with NAPA tool? Let’s walk through how to add custom properties to client web part developed using NAPA tool.

Here for example I am creating hello world App part on SharePoint online with NAPA tool. Remember App part(client web part) and App are different things though they are packaged together. Basic diff between them is App gets opened separately and app part gets added on SharePoint page. Also App part(client web part) inherits the ClientWebpart class. In this blog I will focus on App part only.

Now let’s start with developing the App part.

  1. Open the Napa tool from SharePoint development site.
  2. Create new SharePoint hosted app and give name.
  3. Once App gets created successfully you will see the NAPA tool screen as shown in below screen shot. There are three main folders: Content- it contains CSS and other supporting files, Pages- it contains two pages – default.aspx, ClientDefault.aspx. We will work on ClientDefault.aspx page as we are dealing with App part.

  1. Now open the ClientDefault.aspx and add following code to the page.
  2. Now run the App , once successfully get executed you will see App page showing you name on it. But where are the alerts which we added in JavaScript code? As I said ClientDefault.aspx gets called only when App is used as app part and placed on the page.

  1. Now let’s create package of App: click on the publish button.
  2. Once App get published successfully you will see the place of publishing location.
  3. Download the app package.
  4. Upload App package to the app catalog.
  5. Your app is now ready to use . Go the SharePoint site where you want to use this app.
  6. Add and trust app to the site.
  7. Open the page on which you want to place  the app part in edit mode.
  8. Click on the Add Web part and add hello world app.
  9. Now edit the app part. You will see OOB or standard properties. We added JavaScript code to read App part properties but don’t create those properties as we don’t see any option for it in NAPA tool. So now how to add  app properties? Follow carefully following steps.
  10. Rename the helloworld.app to helloworld.zip; I mean change extension to .zip.
  11. Open the zip file you will see many files inside  it, for now let’s focus on one file: “clientWebPart.xml”.
  12. Open this file for edit and add following code in the tag: “ClientWebPart” and below the tag: “Content Type” .
  13. Now change “src“ tags value to : Src="~appWebUrl/Pages/ClientWebPart.aspx?{StandardTokens}&clientId=_clientId_&feedType=_feedType_".  Here we are added query string parameter for the custom properties. This is the way to get custom properties in JavaScript code.
         
  1. Now save the file and also the zip File.
  2. Change extension of file back to the .app and upload file to the app catalog.
  3. Go to the SharePoint site and remove the app and add it again to the site.
  4. Open the page in edit mode and add the app part and edit the app you will see the custom properties.

  1. Enter the property values, save and close the edit mode of page.

Here you are able to use the App part or client web part properties even though you use NAPA tool for development.

To Read the Custom Properties write code like below:

if (document.URL.indexOf('?') != -1) {
var params = document.URL.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var param = params[i].split("=");
var p = decodeURIComponent(params[i]);
if (param[0] == "clientId"){
                alert(decodeURIComponent(param[1]));
}
            else if (param[0] == "feedType"){
                alert(decodeURIComponent(param[1]));
}
}
}

Happy SharePoint coding.

5 comments:

  1. Thankas Rahul, you saved my time....

    ReplyDelete
  2. HI ,
    I have followed your mentioned steps and able to have the custom properties while testing to the developer site but when i publish the same package to the app catalog i am not able to see them in edit tool pane.
    Do i need to change some thing to make them working after publishing to the app catalog.
    Please help its urgent.

    ReplyDelete
  3. Hi Vikas,

    Mentioned steps are only required steps. They have been tested for various sites so it should work for you also. I will suggest you to remove App from web - where it is referred and from app catlog also. Then build package with new version and follow the steps again. Hope it will work for you.

    ReplyDelete
  4. Thank You. Valuable but far from smooth .... After you do this, can you continue to use NAPA to continue development? Any reason MS left this off NAPA? And if you use VS to do this, any way to go back to NAPA?

    ReplyDelete
  5. hi,

    Is there a way to use Multiline Text box or Rich text box in the properties instead of just plain textbox?

    ReplyDelete