What’s new in Office Development Tools for Visual Studio 2013 RC – Part II!

By Danielle Arad - October 21, 2013

In this article I will continue talking about the new Cloud Business App project template we have available in Visual Studio 2013 RC (VS 2013 RC). If you remember, in my last post about this project template we simply reviewed how to use it and how to deploy and debug a dummy application without adding any business entity to the App. In this article, we will see how to add business entities to the App without adding any line of code:

Adding business entities to a SharePoint Cloud Business App

In order to add a business entity to your App, you have to do the following tasks:

  • In VS 2013 RC Solution Explorer, select the “Data Sources” folder available in the “.Server” project and click the “Add Table” option in the contextual menu.

image

  • In the new window that is displayed, just modify the table’s name and a few columns. For instance, in my case I’m creating a “Customers” table.

image

  • Once the table is created, select the “Screens” folder in the “.HTMLClient” proyect. Here, you have to click the “Add Screen…” option available in the contextual menu.

image

  • In the “Add New Screen” window, you can configure different screens associated to the table you have just defined. For instance, you can create a “Browse Data Screen” to display a list of customers. In order to define this screen, just provide a suitable name and select your data table in “Screen data” section.

image

  • Once you press the “OK” button in the “Add New Screen” window, you will see the screen designer in VS 2013 RC. This designer allows you can customize any screen you have added to the App.

image

  • Add an “Add/Edit Details Screen” following the same procedure explained above.

image

  • Coming back to the first screen, we are going to add a new button using the “Add Button…” option available in the screen designer.

image

  • In the “Add Button” window simply choose the method you can call when clicking the button (showAddEdit<YourTable> in this case) and define the operation to be done: (New <YourTable>) in this case. Once you are ready, press the “OK” button.

image

  • Next thing we have to do is define a “Home screen”. For doing that, simply select the desired screen in the “Screens” folder and click the “Set as Home Screen” option in the contextual menu. Obviously, you should choose as home screen one showing information like the customers list screen.

image

  • Save all your changes in VS 2013 RC and press “F5” key in your laptop so you can see in the App in the browser showing the home screen you have just defined. AS you can see, the App doesn’t display any row of data so we have to add some data there.

image

  • Press the “Show Add Edit Customers Table” button so a modal dialog for adding data is opened. Type some data in the dialog and click the “Save” button.

image

  • As a result, you will see your first row of data added to you home screen.

image

And that’s all for the moment in relation to the new SharePoint Cloud Business App project. Happy CloudSharing!