Follow us on Twitter
Follow us in Facebook
Office Dev Content
SharePoint Dev Content
Blogs for Office developers > Apps for Office and SharePoint blog
Office 365 is an ideal business app platform providing a core set of services expected in today’s business apps and a central location for installing, discovering, and managing apps. Office 365 makes these business apps available where users already spend their time - in SharePoint and Office.
Visual Studio 2013 streamlines modern business app development for Office 365 and SharePoint 2013 with the Cloud Business App project. This walkthrough will show how you can build social, touch-centric, cross-platform Office 365 business applications that run well on modern devices.
In our scenario, let’s say my organization is on Office 365. The company encourages cross-team collaboration and would like to build an app that allows employees to send kudos to fellow employees.
An employee can find the app on SharePoint. He or she can launch the app on desktop browsers or different mobile devices. The app allows a user to send kudos to a coworker and shows a list of kudos users sent and received.
Let’s build this app with Cloud Business App!
Let’s name the project KudosApp and choose OK.
You first need an Office 365 developer site to start building apps for Office/SharePoint. If you don’t have an account for development, you can sign up for free 30-day trial at dev.office.com. If you are a MSDN subscriber, you will receive the subscription as a benefit.
Enter your SharePoint development site here and choose OK.
Once created, you will find a Cloud Business App is comprised of four projects in the solution:
Let’s start by defining the data model for our app. In Cloud Business App, you can create new tables or attach to external data sources such as SQL, Odata, and SharePoint assets. In our scenario, we send and receive kudos, so let’s create a table for kudos. Choose Create new table.
Name the table Kudos and add two fields:
The Table Designer provides a set of business types, such as PhoneNumber, Email, and Person. They include specific validation logic and visualizations both in the tooling and runtime.
There is a growing trend in integrating social features into modern business applications. Cloud Business App makes it easy by integrating with the SharePoint Newsfeed feature.
With the title of the Kudos table selected, you can enable social under the Social category in Properties window. Select Post when Created. When a kudos is created, the app will post the activity to Newsfeed.
In our app, we want to show kudos sent by me, as well as the kudos I received. We can create two queries for these. Choose Add Query button in the tool bar of the Table Designer.
In Query Designer, name the query KudosSent. We want the query to return all kudos created by me, so let’s filter it by setting CreatedBy equals to Current User. Let’s also sort it by the Created field.
We will create another query via the context menu of the Kudos table in Solution Explorer.
This time, we will name the query KudosReceived and filter by setting KudosTo equals Current User.
Now that we’ve defined the data model, let’s design the UI for the app. Create a screen via the context menu on Screens node in Solution Explorer.
The Add New Screen dialog box will appear. Cloud Business App provides three screen templates that represent common UI patterns for browsing, viewing, adding, and editing data. Let’s start with a browse screen that shows all kudos sent by me.
Select Browse Data Screen, name the screen WelcomeToKudos and select KudosSent query as the screen data. Choose OK.
A screen is created for you. In the Screen Designer, you see a Screen Content Tree in the middle that represents the visual elements in the UI. Visual elements are bound to a data on the Data Members List on the left.
For example, in this screen, we have list visual showing values from the KudosSent data set.
We can also choose to render the data set as a Table or a Tile List visual. Let’s use Tile List.
The node under the Tile List indicates what fields will show up in a tile.
Since this is a list of kudos sent by me, let’s delete the Created By field. We will also delete the ModifiedBy and Modified fields.
You may have noticed that Cloud Business App automatically created audit fields for you (Created, CreatedBy, Modified, and ModifiedBy). It is a common requirement in business apps, so the tool handles it for you (you can turn it off in the Table Designer).
In the tile, the Kudos To field is rendered with a Person Viewer control. We can customize what will show up in the Person Viewer via the Properties window. Change the Display Mode to Name with picture and title.
Let’s also change the font and alignment of the Created field. Select Created. In Properties window, change Font Style to Small and Text Alignment to Right.
We have a list of kudos sent by me. Let’s create some UI to add kudos. In WelcomeToKudos screen, add a button in the Command Bar.
The Add Button dialog box will appear.
We are saying that, when the button is chosen, we will add a new record to the KudosSent data set via a new screen we are about to create. Choose OK.
The tool will guide us to create a new screen for adding a kudos. Name the screen SendKudos and choose OK.
A new screen (SendKudos) is now created.
Let’s check what we’ve got so far! Press F5 to run the app.
We have an empty list and an add button on the screen. Let’s add a kudos. Choose Add Kudos. The Send Kudos screen (rendered as a dialog box) will appear.
Note that all layouts adapt well to different form factors. Resizing the browser window gives you an idea of how the app looks on a phone or tablet. Everything is optimized for touch, but works equally well on a desktop browser using keyboard and mouse.
In the Send Kudos dialog box, Message is rendered as a text box. We want to change it to a text area. Also, since we only have two fields in the screen, we don’t need to show two columns in bigger form factors. For these types of UI tweaks on the screen, I can quickly make these changes without closing the browser and press F5 again.
Go back to the designer (without closing the browser) and change the Message fields to use Text Area control.
Let’s also change the KudosTo display mode to show picture and title.
Now, let’s remove the columns. Drag Kudos To and Message out of the columns layout, then delete columns layout.
Choose Save All in the designer and refresh the browser. Choose Add Kudos again. All the UI changes are now reflected in the app. This provides an efficient iterative design experience.
Let’s add a Kudos. The Kudos To value can be selected using an auto-complete text box based on Active Directory.
Choose Save and the newly added kudos will appear in the list.
Notice, you can see additional Office 365 integration here. When you hover your mouse over the person, it shows presence information. You can send an IM, e-mail, or schedule a meeting right here.
Now we have a list of kudos sent by me. Let’s also add a list of kudos I received. We can show the two lists on the same screen using two different screen tabs.
Close the browser and return to Visual Studio. Open the WelcomeToKudos screen. Notice our tile list is currently under a screen tab called Kudos List. By default, every screen has one screen tab. The tab UI will not show in the app unless you have more than one screen tab.
Let’s add another screen tab. Choose the Tabs node and select Add Tab.
A new screen tab is now added.
In Properties window, change the Display Name of first screen tab to Kudos Sent and the second screen tab to Kudos Received.
Now, we need to add the list of kudos I received under the newly created screen tab. Recall we created a KudosReceived query earlier. Let’s include that query on the screen. Choose Add Data Item button in the toolbar.
In the Add Data Item dialog box, select KudosReceived and choose OK.
The query now appears in the Data Members List.
Drag the query under the second screen tab on the Screen Content Tree.
Like we did with the first list, let’s change the Kudos Received list to a Tile List. Customize the tile to show only Created By, Message, and Created.
Press F5 again to see the changes. Now, there are two screen tabs on the screen.
If you send a kudos to yourself, you will see it in the second screen tab.
Remember when we created the Kudos table, we enabled the social feature. Now, if we open the Newsfeed page, we will see some posts by the app.
So far, we have a completely functional app now without writing a single line of code!
Cloud Business App lets you focus your energy on the unique value of the app: the business logic. Let’s say we don’t want you to be able to send kudos to yourself and we want to write some validation logic for that.
Open the Kudos table. Business logic is written on the middle tier, which is represented by the server project in your solution. The Table Designer provides you with entry points into the data pipeline of your app.
Open the Write Code dropdown menu in the tool bar, you will find a list of code entry points for business logic. Choose KudosSet_Validate.
It will take you to the code entry point in the Code Editor.
Write the following code.
if (entity.KudosTo == Application.Current.User.Email)
results.AddPropertyError("You cannot send kudos to yourself",
Now, run the app and try to send a kudos to yourself. You will get the validation error.
Finally, when I’m ready to publish this app to my organization, I can choose the Cloud Business App project and select Publish. I can follow the Publish Wizard to step through different deployment options.
The app is in the app catalog and can be installed on one or more sites for people to use.
To summarize, you saw a highly productive experience for defining data and screens that enable you to quickly get an app up and running. The app has a professional looking UI that blends with SharePoint and is integrated with a set of Office 365 services. This allows you to focus on your business logic and get more done.
To learn more about Cloud Business Apps, visit Apps for Office and SharePoint Dev Center and Cloud Business Apps on MSDN.
Program Manager, Visual Studio