How to Create Common Screens Quickly (Kevin Mehlhaff)

How to Create Common Screens Quickly (Kevin Mehlhaff)

  • Comments 5

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.

Application Data

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:

screen1

screen2

Add a one-to-many relationship from Venue to Booking: One Venue can have many Booking instances:

screen3

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:

screen4

Now three screens are generated: an Add/Edit Details, Browse Data, and View Details screen. These screens are nicely organized inside a Venues folder:

screen5

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:

screen5-5

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.

screen6

Browse screens are now also added to the screen navigation menu by default, which makes it easy to navigate between different browse screens:

screen6-5

Tapping any one of the Venues on the BrowseVenue screen brings us to the ViewVenue screen:

screen8

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:

screen7

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:

screen8

Tapping the Booking takes us to the ViewBooking details screen where we can see more details and also edit the Booking:

screen9

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:

screen9-5

screen10

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:

screen12

Conclusion

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

Leave a Comment
  • Please add 6 and 4 and type the answer here:
  • Post
  • awesome stuff! i installed the package but I don't see the common screen as an option.  any ideas?

  • @Billy

    Are you trying to use the common screen template on an existing project or a new project?  In order to use the new features with an existing project you first have to upgrade it. Right click the project node in the solution explorer and select "Upgrade Project" to do so.

  • Hi Guys,

    I have been waiting for a rapid application tool for database applications - like Microsoft Access but with enterprise scalability ,  web development and stability.     Lightswitch looks like a contender, but I have these questions.  

    1-How do I call a stored procedure that does NOT insert, delete or update data - but does some complex backend database processing that includes all the CRUD operations.  The examples I have seen online are simplistic  and only address one of this operations.

    Ive seen the WCF/RIA option which allows use of stored procedures as data sources and destinations for insert/update/delete instead of tables through and Entity Model.

    Ive also seen the example where an "fake" table is created and used to transfer stored procedure parameters once the "Inserted" trigger is fired after a Save operation - after which the table changes are discarded.

    For now I can only think of creating a VB.Net application that calls the Stored procedure - and then calling this executable from lightswitch using the ShellExecute method.

    Any better ideas ?  Please advice.

    --Minneapolis, MN

  • Hi Guys,

    I have been waiting for a rapid application tool for database applications - like Microsoft Access but with enterprise scalability ,  web development and stability.     Lightswitch looks like a contender, but I have these questions.  

    1-How do I call a stored procedure that does NOT insert, delete or update data - but does some complex backend database processing that includes all the CRUD operations.  The examples I have seen online are simplistic  and only address one of this operations.

    Ive seen the WCF/RIA option which allows use of stored procedures as data sources and destinations for insert/update/delete instead of tables through and Entity Model.

    Ive also seen the example where an "fake" table is created and used to transfer stored procedure parameters once the "Inserted" trigger is fired after a Save operation - after which the table changes are discarded.

    For now I can only think of creating a VB.Net application that calls the Stored procedure - and then calling this executable from lightswitch using the ShellExecute method.

    Any better ideas ?  Please advice.

    Please also send your replies to conraldw at gmail dot com.

    --Minneapolis, MN

  • @conrald: I feel your pain. It is very do-able, but there are very few examples that are intuitive for those of us whose mindset is not constantly in the web-world.  This is surprising, since logical tasks like you allude to are a very important aspect of Service Oriented Architecture (SOA).

    The answer is certainly with building services since you can build the logic as simple and test-able DLL units. The problem is that there are so many options for doing this that it is hard to figure out how best to move forward. And add to the mix that the main MS platform- WCF - is absurdly complex (oh, they would rather I say extremely flexible :) ), is over-attributed, relies too much on being declarative (IMHO), breaks easily and mysteriously, and is difficult to debug (for my proof, Exhibit A would be a brief tour of WCF questions and answers in StackOverflow).

    I am currently looking at the WebAPI 2, but here again the examples all deal with simply returning and binding data, but I think it will fit, and seems to be something MS might not abruptly abandon (think Silverlight...). There are some nice tutorials there as well.

    For a very nice and simple service example, take a look at Michael Washington's tutorials, especially the one that builds a generic service to get a user name. No matter what, though, be prepared to dig through a pile of POST, GET, JSON, XML, AJAX, JQUERY, ... acronyms and concepts. I believe however that it is worth it because I am quite sold on LightSwitch.

Page 1 of 1 (5 items)