New Navigation Features in LightSwitch HTML Client (Chris Rummel, Rohit Agrawal)

Today we’ll be exploring two new features added to LightSwitch HTML Client – global navigation and default details screens. With global navigation you can navigate to any Browse screen from any other screen throughout the LightSwitch application. Default detail screens let you jump directly to the details page of a given entity. We added these to LightSwitch to enable SharePoint social newsfeeds, but you can leverage it even in non-SharePoint applications.  There’ll be another blog post later with more details on the social newsfeed feature itself. The following post will demonstrate how you can use global navigation and default details screens in your applications.

Global Navigation

Let’s start off by creating a new LightSwitch HTML application. Attach to an external data source, choose the Northwind OData feed at and import the Customer and Product entities. To demonstrate that global navigation works with screens containing data from an intrinsic (internal) data source as well, add some additional entities using the Data Designer – Order and OrderLine.

This is what the Order and OrderLine entities look like.




Add the following screens to your application – BrowseCustomers, BrowseProducts, BrowseOrderLines and BrowseOrders using the Browse Data Screen template.

Now that our data model and screens are ready, let’s start with using global navigation. Right click on the <ApplicationName>.HTMLClient node (In this example, my application name is ‘Demo’) and select ‘Edit Screen Navigation’.


This will open the Screen Navigation designer. Click on the ‘+ Include Screen’ menu and add all 4 screens. You can exclude a screen from the global navigation menu by right clicking on a screen and selecting ‘Delete’. Deleting a screen from screen navigation designer page will not delete the screen from the project, it will only remove it from the global navigation menu. Renaming a screen from the Screen Navigation page will rename the display name of that screen across your application.

Note: Any screen can be added to the global navigation menu as long as it does not require a parameter. So if you have a screen with a query that returns a set of data and doesn’t require any parameters, then this screen can be added to the global navigation menu structure.


When you run the application your home screen will open first. You can open other screens using the navigation menu button. Note: The navigation menu button will not appear on screens shown as dialogs.


Default Details Screens

Another new navigation feature in LightSwitch are default details screen, which let you navigate directly to the details page of a given entity with a single URL. Let’s use the same application that we created above.

First, add an AddEditOrder screen.


Then add “Add Order” and “Edit Order” buttons to the Browse Orders screen by selecting the corresponding methods addAndEditNew and editSelected in the Add Button dialog.


At this point you should be able to F5 and add a couple Orders with Order Lines for testing.  Now we get to the interesting part.  Add a View Details screen for Orders.


The “Use as Default Details Screen” checkbox is how LightSwitch decides which screen to show when you link to an entity URL in code (which I will show you below).  If you have multiple View Details screens for an entity, you can change the default screen in the client view of the entity designer:


To demonstrate how to get the URL of an entity, on the Browse Order screen, add a new button with a custom button called “GetOrderLink”.  You’ll also need a Web Address screen property, I called mine OrderLinkUrl.


Then you can add the property to a new popup.  I added the property both as a Web Address Viewer and as a text box – this lets a user either copy and paste the link, or just right-click and select “Add to Favorites”. We’ll write some JavaScript in a minute to make it as easy as possible to get the link for a page.  I also changed the display names to be more instructive.


Edit the execute code for the Get Order Link button.  Then use this code:

myapp.BrowseOrders.GetOrderLink_execute = function (screen) {
    // The hash is present on non-home screens.  Since we're
    // doing this on the home screen we could skip this part
    // but here it is for completeness.
    var hashPos = window.location.href.indexOf("#");
    if (hashPos >= 0)
        var baseUrl = window.location.href.substr(0, hashPos);
        var baseUrl = window.location.href;
    var fullUrl = baseUrl + "?entity=ApplicationData/Orders(" + 
screen.Orders.selectedItem.Id +
")"; screen.OrderLinkUrl = fullUrl; screen.showPopup("OrderLinkPopup"); }; myapp.BrowseOrders.GetOrderLink_canExecute = function (screen) { return screen.Orders.selectedItem != null; };
Now you should be able to F5, and after selecting an order, use the Get Order Link button:


If you open the link in a new tab or different browser it should take you right to the order you had selected:


This works for internal and external data sources, the only difference is the data source name.  For instance, you can do the same thing with the Customer entities we imported:

myapp.BrowseCustomers.GetCustomerLink_execute = function (screen) {
    var hashPos = window.location.href.indexOf("#");
    if (hashPos >= 0)
        var baseUrl = window.location.href.substr(0, window.location.href.indexOf("#"));
        var baseUrl = window.location.href;
    var fullUrl = baseUrl + "?entity=NorthwindEntitiesData/Customers('" + 
screen.Customers.selectedItem.CustomerId + "')"; screen.CustomerLinkUrl = fullUrl; screen.showPopup("CustomerLinkPopup"); }; myapp.BrowseCustomers.GetCustomerLink_canExecute = function (screen) { return screen.Customers.selectedItem != null; };




With a little bit of code default details screens can be very useful – you can send the links around in email or IMs to show your colleagues exactly what you’re talking about, or bookmark a particular order or customer for later use.  If you have automated systems that point users to LightSwitch apps, like an automated dashboard, it’s easy to generate these URLs and make things easier for the users as well.

And with global navigation it is really simple to navigate between several screens across an application. There is no need to create separate buttons to navigate to Browse screens manually.

Keep an eye out for our blog post about SharePoint social newsfeeds, where we’ll show you why LightSwitch implemented these default details screens in the first place! Let us know what you think about these features by leaving a comment below, or come visit us on the forums with any questions.


Chris Rummel, LightSwitch Software Development Engineer in Test

Rohit Agrawal, LightSwitch Software Development Engineer in Test