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

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

Rate This
  • Comments 26

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 http://services.odata.org/Northwind/Northwind.svc 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.

image

image

 

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’.

RightClickHTMLClientNode

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.

image

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.

GlobalNavigationMenu

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.

1

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.

2

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.

3

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:

image

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.

5

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.

6

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);
    else
        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:

image

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

image

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("#"));
    else
        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; };

image

image

Conclusion

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.

Thanks,
Chris Rummel, LightSwitch Software Development Engineer in Test
Rohit Agrawal, LightSwitch Software Development Engineer in Test

Leave a Comment
  • Please add 1 and 8 and type the answer here:
  • Post
  • Very Nice.  Deep Link URLs will help enable SEO on LS HTML Apps...maybe an idea for a blog post sometime.

  • Very awesome. Had to shim both of theses and ended up with very similar solutions. Will be considering migrating to theses once our project is moved to the most recent version.

    Also, it's still be nice to offer a globally available navigation option. Is that current available or still out of reach?

  • Ignore that last comment about global nav. I need to read better.

  • Both these are going to be very useful. Thanks for the update.

  • Hi,

    Great post but the Deep link only navigates me to home Screen.

    I have a default detail screen.

    Know why?

    Regards

    Sven

  • The next Bug:

    We have Update our Project from Visual Studio 2012 Update 2 to Visual Studio 2013. The global Menu is not visible. When we start with a new Project the global menu is visible.

  • @J.Nord - Based on you description, I wouldn't assume there is a bug.

    A project that has been upgraded will not automatically have screen navigation because we try to maintain the functional behavior of the project as it was before it was upgraded. Thus, there is no screen navigation (same behavior as before upgrade). For upgraded projects, you should go into the Screen Navigation designer and add them yourself, if you want them to appear. In fact, if you added a new screen in your upgraded project, it should add a screen navigation entry automatically (assuming the screen does not have parameters).

    If you have any further problems/questions, please post in the forums.

  • Hi  J.Nord,

    I am interested in the bug you described. I tried the scenario that having a project created by Visual Studio 2012 Update2 and then updating the project to VS 2013 and tried the global navigation and it works well.

    Could you please tell me some details:

    1. Can you see the Edit Screen Navigation in VS 2013 for the HTML Client project?

    2. Can you see your Browse screen in the Screen Navigation Pane there?

    3. Do you have parameters for your Browse Screens? (If you can't see them).

  • @Sven - By default, if the deep link URL cannot be found then you will be navigated to the home screen. Please make sure that the data table you have included in your code is correct.

    var fullUrl = baseUrl + "?entity=NorthwindEntitiesData/Customers('" +

           screen.Customers.selectedItem.CustomerId + "')";

    Thanks

    Rohit

  • @J.Nord,

    I think Justin has explained things clearly.

    If you have any further problems/questions, please post in the forums.

  • With global navigation, what is the best way to display different screens based on come condition. Also is it possible to change the order of screens in  global navigation?

  • We upgraded our Lightswith project from VS 2013 Preview to the released 2013 version.

    The navigation menu was not visible until we replaced msls*.js, msls*.css, and content\images files from a brand new 2013 Lightswitch project to our upgraded project.

  • Hello I am trying to use a single Lightswitch HTML application as a Home application and give users the ability to Navigate to other Lightswitch HTML applications (Sort of like modules of a larger application) - is this a possibility - Navigating between multiple HTML Lightswitch applications.

  • This is excellent stuff!

    Please keep it coming LightSwitch team!!

  • I am not sure what I doing wrong but none of these is working for me I have a large project with many screens in LS HTML using VS 2013 and my Navigation was empty. I added 4 screens into navigation which does not require any parameters and I get no pull down menu either. I also defined default screens for my entities and used the deep navigation techniques for my external data sources and I keep going to home screen. Any idea what I may doing wrong?

    The only thing that I should mention is that I have changed default HtmlClient to a different name so my url is like http://mydomain/subdomain/myapp

    Thanks,

    Ray  

Page 1 of 2 (26 items) 12