BlogPost

Creating a SharePoint Hosted App in Office365 and using the client side object model.

Creating a SharePoint Hosted App in Office365 and using the client side object model.



This month's article is going to demonstrate how to build a SharePoint Hosted App for Office365\SharePoint Online and using the client side object model.



Step One

  • Creating a SharePoint Hosted App in Office365\SharePoint Online and using the client side object model.


Step Two

  • Add your Site, for this demo I will be hitting Office365\SharePoint online and making this a SharePoint-Hosted App.


Step Three

  • Add your credentials if you are using your office365 account.

You will then land on the default page.




Step Four

Create a Site Column

  • Right click - Add - New Item




  • Name it feedback




Step Five

  • Then in the element file change the type from Text to Note


Step Six

Create a Content Type for Suggestions



    After you hit Add, then keep the inherited type "Item"





Step Seven

  • In the columns type Subject and then feedback, then remove another entries within the list.


Step Eight

  • Double click on the Elements.xml



  • Where the Group="Custom Content Types" change it to something that has meaning to your environment and change the description as you see fit.



Step Nine

Create the Recommendation List

  • Right click - Add - New Item - list - call it Suggestions



  • Click Add




Step Ten

  • Click on Content Types.


Step Eleven

  • Add Suggestion and then right click delete the folder content type

So to recap we have just created a Office365\SharePoint Online hosted app with a custom site column, a content type and a list instance.



Using the Client-Side Object Model


Step Twelve

  • Open App.js from the Scripts folder.



  • Delete all the code within the file.


Step Thirteen

  • And change it to this.

Click here to copy the code


Step Fourteen

The style sheet

  • In the content folder the double click on the App.css file.

Or if the App.css file is not present, right click on the content folder - Add - new item - click on web - then - Style Sheet





Step fithteen

  • And add the following code to the style sheet.

Click here to copy the code


Step Sixteen

Let's build the "New Suggestion" Functionality

  • Open up default.aspx

Displaying the existing suggestions

  • Locate the last </asp:Content> tag in the default.aspx page and add the following code



Building the suggestion details display

  • Locate the last </asp:Content> tag in the default.aspx page and add the following code



Click here to copy the code

And now you are ready to deploy your app. Right click and hit deploy… On your dev site click on the link from the output window or log onto your account And you should see a page similar as below





Type a subject and your feedback and hit submit.





You will see you entry below.





Click on the suggestion to and you will see some basic client side rendering in action.






Completion