Walkthrough: Creating a Cloud Business App with a Social Newsfeed [paved over]

By using the Cloud Business App template in Visual Studio, you can create apps for SharePoint in which users can view, add, and update SharePoint data. The Cloud Business App project type uses Visual Studio LightSwitch technologies, which greatly simplify the process of creating business app hosted on SharePoint. In this walkthrough, you’ll create an app to track job candidates, taking advantage of the SharePoint for Office 365 social integration feature to provide a newsfeed for the app.

Prerequisites

This walkthrough requires Visual Studio 2013.

To host the app, you must also have a SharePoint 2013 site or a SharePoint Developer site on Office 365, which you can get from the Developer Center for Apps for Office and SharePoint.

Create a Cloud Business App Project

To create a Cloud Business App, you start with the Cloud Business App project template in Visual Studio.

To create the project

1. On the menu bar, choose File, New, Project.

   The New Project dialog box opens.

2. In the list of templates, expand the Visual Basic or Visual C# node, expand the Office/SharePoint node, choose the Apps node, and then choose Cloud Business App.

   

3. In the Name text box, enter CandidateTracker, and then choose the OK button.

   The New Cloud Business App wizard opens.

4. In the New Cloud Business App wizard, enter the URL for your Office 365 Developer site, and then choose the Finish button.

   The URL should take the form https:// MySite.sharepoint.com/sites/Developer/.

   A CandidateTracker solution is added to Solution Explorer with four projects: a top-level CandidateTracker project, a CandidateTracker.HTMLClient project, a CandidateTracker.Server project, and a CandidateTracker.SharePoint project.

Add Data and Screens

The candidate tracker app needs a database table, which you’ll create in the Server project, and screens to view, add, and update data, which you’ll create in the HTMLClient project.

To add the database table

1. In Solution Explorer, open the shortcut menu for the CandidateTracker.Server node and choose Add Table.

   The entity designer opens.

2. In the Properties window, in the text box for the Name property, enter Candidate.

3. In the entity designer, choose the <Add Property> link and enter Name.

4. Choose the Enter key, accepting the default Type, String, and leaving the Required checkbox checked.

5. Choose the <Add Property> link and enter Phone, and then choose the Tab key.

6. In the Type column, choose Phone Number, and then choose the Tab key twice.

   Phone Number is a custom business type that automatically formats and provides validation for telephone numbers.

7. In the next row, enter Email for the Name, and then choose Email Address as the Type.

   Email Address is another custom business type that provides validation for email addresses.

8. In the next row, enter ReferredBy for the Name, and then choose Person as the Type.

   The Person business type provides a connection to the SharePoint User Profile Service, which pulls user information from Active Directory.

9. In the next row, enter InterviewDate for the Name, and then choose Date Time Offset as the Type.

   The Date Time Offset business type stores the date and time in UTC format, allowing users in different time zones to see the correct time.

   

To create the browse screen

1. In the entity designer, on the Perspective bar, choose the HTML Client tab, and then on the toolbar choose Screen.

   The Add New Screen dialog box opens.

2. In the Add New Screen dialog box, in the Select a screen template list, choose Browse Data Screen.

3. In the Screen Data list, choose Candidates, and then choose the OK button.

   The screen designer opens, with a representation of the data entity in the left pane, and a representation of the screen layout in the right pane.

4. In the right pane of the screen designer, choose the List | Candidates node, then expand the List list and choose Table.

   

   This will display the Candidate information in a tabular format instead of the default list format.

   Notice that in addition to the fields that you defined for the table there are four more fields: Created By, Created, Modified by, and Modified. These fields create an audit trail to show when an item was added or last updated and by whom.

To create the add screen

1. In the screen designer, open the shortcut menu for the Command Bar node and choose Add Button.

2. In the Add Button dialog box, expand the showTab list and choose addAndEditNew, and then choose the OK button.

   

   The Add New Screen dialog box opens.

3. In the Add New Screen dialog box, accept the default values and choose the OK button.

A new screen designer window opens.

To create the edit screen

1. Choose the BrowseCandidates.lsml designer tab, and in the screen designer, choose the Table | Candidates node.

2. In the Properties window, choose the Item Tap link.

   

   The Edit Item Tap Action dialog box opens.

3. In the Edit Item Tap Action dialog box, expand the showTab list and choose editSelected, and then choose the OK button.

   

To test the app

1. On the menu bar, choose Debug, Start Debugging.

   The first time that you run a SharePoint app on your computer, you're prompted to install a Localhost certificate because cloud business apps always use SSL (Secure Sockets Layer). If you accept this certificate, a security warning won't appear each time that you launch the app. Because the certificate applies only to Localhost, your system faces no threat.

2. In the Security Alert dialog box, choose the Yes button.

3. If a Security Warning dialog box appears, choose the Yes button.

   Your web browser appears.

4. On the sign in page, choose the Sign In button.

5. Enter your password, and then choose the Sign In button.

6. If prompted, choose the Trust It button.

7. On the Browse Candidates screen, choose the Add Candidate button.

   The Add Candidate screen opens.

8. On the Add Candidate screen, enter a name, phone number, and email address.

9. Choose the Referred By field and enter the first three characters of your own name.

   Your full name should appear in the list. If your site is connected to Active Directory, you should see a list of all users whose name begins with the same three characters.

10. Optionally change the Interview Date date and time, and then choose the Save button to return to the Browse Candidates screen.

    The candidate that you just added is displayed; if you choose the row the Add Edit Candidates screen opens. Notice that some of the fields inherit special behaviors from their custom business types. Choose the Phone field to dial the number, choose the Email field to send an email, or hover over the Created By field to see your contact information.

11. Close the browser window to stop the app from running.

Add a Newsfeed

One of the features of SharePoint for Office 365 is the ability to add newsfeeds, allowing users to track activity on a list and add their comments. Cloud business apps make it easy to create a newsfeed for your app.

To enable social integration

1. Choose the Candidates.lsml designer tab, and then on the Perspective bar choose the Server tab.

2. In the Properties window, select the Post when Created and Post when Updated check boxes.

   

3. Choose the Choose post triggers link.

   The Choose post triggers dialog box appears.

4. In the Choose post triggers dialog box, clear the All Fields check box, select the Interview Date check box, and then choose the OK button.

To test the app

1. On the menu bar, choose Debug, Start Debugging.

2. On the Browse Candidates screen, choose the candidate that you created earlier.

3. On the Add Edit Candidate screen, change the Interview Date, and then choose the Save button.

4. Choose the Add Candidate button and add another candidate.

5. On the Browse Candidates screen, on the SharePoint chrome bar, choose the Newsfeed link.

   The Candidate Tracker Newsfeed opens in a new browser window with two entries for the added and updated candidates. You can choose the Like link for a post, or you can choose the Reply link to add a comment.

6. Close both browser windows to stop the app from running.

Add Validation

In many business apps you’ll want to restrict access to certain functionality, for example, only allowing a manager to change the interview date. Cloud business apps let you do this by writing validation logic; in this case you will write code to determine if the current user is a member of a specific Active Directory Security Group.

To add validation

1. Choose the Candidates.lsml designer tab, and then on the Perspective bar choose the Server tab.

2. On the toolbar, expand the Write Code list and choose the Candidates_Validate method.

   The Code Editor opens.

3. In the Code Editor, add the following code to the Candidates_Validate method:

   If Not Application.User.Department = "Hiring Managers" Then
                   results.AddEntityError("Permission denied")
               End If
   

   if (!(Application.User.Department == "Hiring Managers")) {
   results.AddEntityError("Permission denied");
   }
   

   The Validate method is run when a user tries to save a record. If the user is a member of the Hiring Managers security group, the record is saved, otherwise a “Permission denied” error message is displayed and the record is discarded.

At this point if you run the app and add a new candidate, you will likely see the error message unless you are a member of an actual security group name Hiring Managers. Replace “Hiring Managers” with the name of a security group to which you belong and try again. You should now have permission to add a candidate.

Next Steps

Congratulations! You’ve created your first cloud business app. If this was an app that you want to share with users, your next step would be to publish the app. See How to: Publish a Cloud Business App to Office 365 [paved over] or Publish apps for SharePoint.

Of course, this is just a simple example; there’s much more that you can do to create full-featured apps. Since the Cloud Business App template is based on LightSwitch technologies, you may want to explore the LightSwitch documentation to get some ideas. See LightSwitch Apps for SharePoint.

See Also

Other Resources

Create Cloud Business Apps in Visual Studio [paved over]