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 7 and 7 and type the answer here:
  • Post
  • @Joe - There is no in-built way to display different based on a condition. Global navigation menu items are the same through-out an HTML client project. The order of screens can be changed by pressing the up/down arrow buttons on the edit screen navigation page which are located on the right side of navigation menu structure. Note: This order would be the same through-out the client project.

    @dukeu - Currently there is no official way to navigate between multiple LightSwitch Applications through the global navigation menu but this request is on our backlog and will be addressed sometime in future, so stay tuned.

    @Ray - Please make sure that the URL included in your code is correct, specifically the data source name part. For further issues please post in the forums.

    Thanks

    Rohit

  • I can't connect to the Northwind OData feed. The link seems to be broken. Please Help.

    Thanks

    Mauricio

  • @Mauricio - works OK for me. If it was down, looks like it's back up now.

    Cheers,

    -Beth

  • @Beth Thanks for your reply but I still can´t access the odata feed (it seems to be a security issue). Do I need some kind of credentials?

  • @msouga -- nope. It's completely open for read-only access. If you hit this in your browser, you should see all the customers in your feed: services.odata.org/.../Customers

  • @Beth... I´ve tried the link on IE 11 and I´ve got a "This page can´t be displayed" error. I´m currently using VS 2013 ultimate on Windows 8.1 running on desktop mode. Is it because I´m in Lima, Peru (South America)? Any suggestion wille be very apreciated. Thanks.

  • Hi everyone,

    I am trying to disable the global screen navigation dynamically, for example if the user don't have edit permissions. Does anyone have an idea how I can manage this? I don't get it.

    Regards

    Ilija

  • @Ilija – There isn't a way to hide the navigation menu from the API, but you can hide its DOM element with JQuery:

    $('div.msls-navmenu-button').hide()

    More detail:

    I found the msls-navmenu-button CSS class and the div element type with these steps:

     1. In your browser, navigate to the page with the element you want to modify

     2. Bring up the browser developer tools (F12 in most browsers)

     3. Click the “Select Element” button or equivalent  

     4. Click the element you want to modify, this should select the clicked element’s DOM tree node

     5. Look at the CSS properties of the element's DOM tree node and its nearest parents/children

     6. Find an element with an “msls-“ CSS class that maps to the element you are working with

       a. We chunked up the msls CSS so the classes are highly specific.  In this example, msls-navmenu-button maps to the navigation menu's show button

     7. Use JQuery to find and modify the element:

       $(‘<element type>.<msls class>’).<JQuery operation>

    Regards,

    Burt

  • I'd love to get this to work in Visual Studio 2013, but I'm suffering from some major issues when connected to our onsite ERP database. This was all working in Visual Studio 2012...

    I have set up a simple Visual Studio LightSwitch 2013 HTML project connected to an external datasource (SQL Server 2008 R2). For some odd reason, when I create a view details screen I can't see any related data to the parent record. This is with an HTML client (the SilverLight is showing related data without issue.

    For instance, I have Job, Job_Operation, and Material_Requirements table. Jobs have several Job_Operations and Material_Requirements. I have a View Job screen that is supposed to list the related Job_Operations and Material_Requirements in a list on separate tabs, but the app is telling me that there are "No Items" when I view the tabs. When I inspect my data in SQL Server Management Studio, there definitely are related entities.

    Also, I have setup the same small app in Visual Studio LightSwitch 2012 (using the exact same datasource, credentials, and tables) and it works just as expected showing the related entities.

    Any ideas on why this is hosed for me in Visual Studio 2013? Also, this is the first project that I have tried to make since I installed it last night.

  • Hi Chris,

    Sorry you're having trouble. We're not aware of any problems using SQL 2008 R2 with VS2013. Can you open a thread in the forums so we can troubleshoot further?

    social.msdn.microsoft.com/.../home

    Thanks,

    -Beth

  • Hey Beth,

    I actually did, I just reposted here to get some attention! lol

    Here is the link:

    social.msdn.microsoft.com/.../lightswitch-2013-not-showing-related-data

Page 2 of 2 (26 items) 12