SharePoint Online (Office 365) Development - Part 2

If you have worked with JQuery before, the syntax will be familiar to you. When the app loads, getUserName() method is called. It loads user properties in the context object. onGetUserNameSuccess() method displays the user name on the screen. All you have to do is append “Hello World” after the user name.

 function onGetUserNameSuccess() {  
           $('#message').text('Hello ' + user.get_title() + ‘and Hello World!’);  
      }  

Listing 13-1: Display Hello World

1. Click Run Application button. It will upload the code, install it and the launch the app. If your browser has blocked pop-ups, you will have to temporarily allow pop-ups to let the app open in new window.

Figure 1: Launching app

2. The app will launch in a new window.

Figure 2: Running app displaying Hello World!

3. Click Publish button.

Figure 3: Publish settings

Change Package name to your desired app name. You can create a public link for your app that you can share with others. Click Publish.

4. You will see Publish successful message. Click publish location link.

5. Next thing you would like to do is to publish the app to App Catalog so that you can add it to other areas of your site. To add an app, you select Add an app from Site Actions. Since you have not published it to App Catalog yet, you cannot add it in other site areas. Go to Admin center (From menu choose Admin > SharePoint).

Figure 4: Add an app

6. Choose apps from the menu.

Figure 5: Choose apps

7. Click App Catalog link.

Figure 6: App Catalog

8. Choose a new catalog if one already does not exist. Choose Create a new app catalog site and click OK. Creating new app catalog is just a new site collection creation. 

9. After app catalog has been created, go back to publish location. You will see you app listed under App Packages. Click your app to download it. Save it on your machine.

10. Now go to app catalog. Click Distribute apps for SharePoint.

Figure 7: Distribute apps for SharePoint

11. Click new app link. Click Browse to locate the app you downloaded, select it and click OK to upload it to the catalog. Fill out the form. Since this is just a test app, you can leave default values selected and click the Save button. For real-world apps, you will have to provide as much information as possible to list the app in the correct category, you will want to add the Publisher name and so on.

12. Go to a SharePoint site other than the one you developed the app on.  The app is already available on the site collection where it was developed. To test adding it from the app catalog, you have to try that on another website. You can choose the main website for this test. Once on the main site, click Site Actions and select Add an app.

Figure 8: From Your Organization

13. Click From Your Organization in the menu and then click App Details link under the app. Click ADD IT button to add the app to the site.

14. You will be asked if you trust the app. Click Trust it button.

Figure 9: Do you trust the app?

15. You will see your app listed on Site Contents page. Click the app to run it. You will see “Hello Yourname and Hello World!” message.

Figure 10: App listed on Site Contents page

16. You have seen the development and publishing process. We will slightly change the application to add a bit of functionality. We will add a method that will display the number of lists in the site and the names of the lists. Open  default.aspx in editor and remove the code from the PlaceHolderMain and add following code:

 <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
   <div>  
      <button id="getLists">Get Lists</button>  
   </div>  
 </asp:Content>  

Listing 13-2: Add button to the page

This button will call the method that will return the number of lists and their names.