As you know, Microsoft released the March Update of the Office Developer Tools for Visual Studio 2013 a few weeks ago in the SharePoint Conference hold in Las Vegas. In this article I will show you step by step how to create a SharePoint Cloud Business App using the update project template included in the tools.
Creating a SharePoint Cloud Business App
Assuming you have already installed the March Update of the Office Developer Tools for Visual Studio 2013, the process for creating a SharePoint Cloud Business App is quite straight forward:
-
Open Visual Studio 2013 and create a project using the Cloud Businss App project template you can under the Office/SharePoint projects category in the “Add New Project” window.
-
Once you specify the URL of the SharePoint Online site where you are going to deploy and test the App, you will have four Visual Studio projects as part of your solution:
-
A “<SolutionName>.SharePoint” project, i.e, the SharePoint App itself.
-
A “<SolutionName>.Server” project you will define the App data sources later on.
-
A “<SolutionName>.HTMLClient” project which contains the App screens.
-
A “<SolutionName>” project that is required for publishing the App to Windows Azure.
-
-
Additionally to the project structure that is show in the solution explorer, Visual Studio 2013 displays the data source designer where you can create the data sources your App is going to use.
-
You can create a data source from scratch or connect to an existing data source in order to use existing external data system like databases, OData Services, SharePoint lists / document libraries, SAP or WCF RIA services. In our case, we will create a data source from scratch.
-
The “Create new table” option available in the data source designer allows us to create a table data for our App using a straight forward designer. As you can see, in my case I have created a table with five attributes.
-
Once the data sources are ready, you have to add screens that allow to define create, read, update and delete (CRUD) operations on the tables designed. In order to create App screens, just navigate to the “HTMLClient” project in the solution explorer, select the “Screens” folder and click the “Add Screen…” action available in the contextual menu.
-
In the “Add New Screen” window you can decide to create all the windows required for CRUD operations (“Common Screen Set” option) or create a specific screen. In our case, we will go for the first approach since we are going to create all the windows we need to interact with the data sources previously defined:
-
Specify a name for the Screen Set Name property,
-
Select the desired data source in the Screen Data combo.
-
-
Once you press the “OK” button, you will see two things:
-
On the one hand, all the screens have been created in the “Screens” folder.
-
On the other hand, a new design surface for the “Browse” screen is show in Visual Studio 2013.
-
In the screen designer for the “Browse” screen, select the element “Title List – <DataSource>Item and browse all the options available in the contextual menu.
-
“Click” the “Add Button…” option so the “Add Button” window is displayed. On this window, select an existing method (addAndEdit in the screenshot) and specify the value for the “Naviage To” option (the name of your data source).
-
Repeat the previous steps in order to add two new buttons that allow to edit and view records in the App. Your design surface should look like the following screenshot.
-
At this stage, you are almost done. Last step is to define the home screen for your SharePoint Cloud Business App. Select the screen you want to define as home screen and click the “Set as Home Screen” option available in the contextual menu.
-
Finally, before deploying the up just compile the entire Visual Studio solution.
Publishing and testing your App
Deploying and testing your SharePoint Cloud Business App is a really simple process:
-
In Visual Studio, press F5 so you start the App deployment process. Once the App is deployed and installed, before start using it you will be prompted to trust the App. Just click the “Trust it” button.
-
Once you are in the App home screen, you can start adding data to it. For instance, just add a new record using the “Add” button.
-
A modal dialog is show so you can easily add a new record to your App.
-
Once the data are saved in the App, you will see a new record in the Home screen.
And that’s all about creating a SharePoint Business App using Visual Studio 2013. Happy CloudSharing!
