In a LightSwitch or Cloud Business App it’s very common to want to browse, add, view, and edit data. Previously you would have to create a bunch of screens one by one and then connect them all together. This can result in a lot of effort, especially if this series of screens has to be created for each data entity in your application. With the Office Developer Tools for Visual Studio 2013 – March 2014 Update, we’ve introduced a new screen template that makes creating such interconnected common screens fast and easy.
We will create a sample application that allows event bookings to be created at various venues. First let’s create some data for our application. Create a new LightSwitch HTML client or Cloud Business App project. Add a couple of tables, Venue and Booking:
Add a one-to-many relationship from Venue to Booking: One Venue can have many Booking instances:
Common Screen Set Template
Now let’s create a set of common, interconnected screens so that we can browse Venues, add new Venues, view Venue details, and edit a Venue. Create a new screen and select the Common Screen Set template for Venues. Make sure to include the additional Bookings data:
Now three screens are generated: an Add/Edit Details, Browse Data, and View Details screen. These screens are nicely organized inside a Venues folder:
These screens are more than just an instance of each individual screen template. They are also hooked up and interconnected.
Launch the app with F5. The app navigates to the Browse screen as it is the home screen. Click the Add button to open the AddEditVenue screen and add a few Venues:
Now that we’ve added a few venues, the Browse screen displays them in a Tile List by default. The item template of the tile list is set to display the summary property in a large font, along with a couple more properties in a small font.
Browse screens are now also added to the screen navigation menu by default, which makes it easy to navigate between different browse screens:
Tapping any one of the Venues on the BrowseVenue screen brings us to the ViewVenue screen:
There is an Edit button from which we can edit the venue. This will open the AddEditVenue screen with the Venue on the ViewVenue screen. This screen also contains a tab to display the Bookings collection property. In our app, we want to be able to add a Booking to a Venue.
Stop debugging. Add a new screen and select the Common Screen Set template for the Bookings entity. This will generate three screens: AddEditBooking, BrowseBookings, and ViewBooking. Now open the ViewVenue screen. Add a button to the Command Bar for the Bookings tab. Choose an existing method: Bookings.addAndEditNew. The navigate option will be automatically set to the new AddEditBooking screen:
Now F5 the app. Select a Venue on the home screen. Go to the Bookings tab and click “Add Booking” to launch the AddEditBooking screen. Fill out the details and save, and we now see that the Venue contains the newly added Booking:
Tapping the Booking takes us to the ViewBooking details screen where we can see more details and also edit the Booking:
The ViewVenue screen was created before the ViewBooking screen though, so you might be wondering how the Item Tap of the Bookings Tile List on the ViewVenue details screen was set to open the ViewBooking details screen. There is now a Default Details screen option for the tap of a selected item of a collection content item.
The Common Screen Set template sets this option for collection properties on the View Details screen. To see this, stop debugging and open up the ViewVenue screen, select the Bookings Tile List and click the Item Tap link to open the dialog:
On the tap of an item in the Bookings list, the action is set to navigate to the Default Details screen for the Booking entity. If a Default Details screen does not exist at runtime, this item tap will do nothing. When we added the Common Screen Set for the Booking entity, the ViewBooking details screen was automatically set as the Default Details screen for the Booking entity since there was no default set. The ViewBooking screen therefore opens when an item is tapped in a Venue’s Bookings list. You can see which screen is set as the Default Details screen by opening up the client view in the entity designer:
We built a functional app with very few steps. We added two entities, used the Common Screen Set template for each entity, and added one button. The Common Screen Set screen template adds three interconnected screens that make adding, editing, viewing, and browsing data quick and easy.
- Kevin Mehlhaff, Software Development Engineer in Test, Cloud Business Apps