LightSwitch Screen Template – Browse Data Tabs

Xpert360Lightning.WebExtensions

The HTML Browse Tabs screen template is part of a collection of advanced screen templates for Visual Studio LightSwitch HTML Client and Cloud Business Apps (see below).

New Screens in Office Azure Dark Theme

The Xpert360Lightning,WebExtensions extension is bundled with AIDE 2013 for Visual Studio for now and is not available separately though this may change (see below for more information).

See the new Screen Templates in action >

Browse Data Tabs Screen Template

The purpose of this template is to provide a means of generating a browse screen showing multiple collections of data in separate tabs. This style of screen is useful as a hub screen for navigation. During development, especially when prototyping, this screen allows you to build hubs with automatically configured tap-through navigation links. Whether used in prototyping or the final app using screens generated from this template will save you substantial time over using the standard templates.

Design-Time

The template is accessible from the ‘Add New Screen’ dialog.

Design-Time Screen generated from BrowseDataTabs
Template

The default screen name is ‘BrowseDataTabs’. There is no need to select screen data in the main dialog as the template has its own template wizard dialog to choose data collections and configure the screen options.

Select data in Browse Data Tabs template wizard

Generate screens as navigation hubs with automatically configured item-tap handlers to default screens or auto-discovered view or maintenance screens.

Add New Screen – BrowseDataTabs

The screen is generated with one tab for each selected entity-set collection. If you choose a parameter-driven custom query then the tab will be a simple filterable collection. With appropriately designed custom queries this makes for easy generation of searchable list, tile and grid views that are working straight after generation. Screens generated using the standard Browse Data template require manual customization before working.

If you choose any option for item-tap navigation then the navigation through to other screens will be pre-configured for you. This works best if the ‘View’ and ‘AddAndEdit’ style screens are created beforehand. You can pre-select a default screen for any entity-type to pre-determine the navigation links when there is more than one possible screen to display an entity-type.

Your choice of collection views is generated so if you prefer to generally use a tile-view or grid-view then choose that. The standard template is only a list-view. As with all LightSwitch screens you are free to customize it once generated.

The supporting JavaScript code is generated for you where appropriate.

Run-Time

The screen displays the browsable data tabs with query filters where appropriate. A typical screen will look like this:

Sample Browse Data Tabs Screen with grid-view

The drill-through navigation to details screens is automatically wired-up and works be they modal-dialogs or SPA window-based screens.

Browse Data Tabs with Navigation

The collection views can be easily adjusted to list, tile or grid after the screen is generated.

Browse Data Tabs grid-view sporting Office Blue theme

Any tabs for filterable custom queries will be generated with enterable filter parameters to start you off with a simple working search/filterable collection.

Browse Data Tab with Filterable Query

There you have it, a Browse Data Tabs screen template that generates useful hub-style navigation screens, saving you oodles of time.

Plans

There are plans to improve this template. We explored the idea of using an advanced configuration mode to choose the view type per data tab/collection. We are considering introducing more views to the existing three.

We will review this template taking into account any feedback.

Screen Templates

We are open to the idea of providing advanced screen templates for all LightSwitch client types though the initial focus is on the MobileWeb client. We are currently working on new screen templates to expand this collection.

HTML Screen Templates

The LightSwitch client only has 3 basic default screen templates. This collection of templates is intended to provide screens with more functionality that require less manual changes to turn them into end product. The collection consists of:

Auto-Tile Menu Template

The screen generated from this template dynamically discovers all screens and creates a navigable menu. Functionality indicated by color-coding and icons. Ideal time-saver when used as your start screen during development or prototyping.

Browse Tabs Template

Similar to the in-built simple browse screen template but generating tabs based on multiple independent collections. Supports parameter-based queries to generate search pages. Choice of default collection views from tile view, list view and grid view. Implements tap-through navigation to entity type default screens or discovered view or maintenance screens.

Tablet List and Details Template

An essential a list-based master and details screen template to boost productivity. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected dual-column entity details data. Extended touch and keyboard support. Child collections in detail grids.  Automatic tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Mobile List and Details Template

Useful list-based master and details screen template for mobile devices. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected single-column entity details data. Extended touch and keyboard support. Generates child collections in tabs. Automatically configures tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Cloud Business Apps in VS2013

Visual Studio 2013 introduces a new application type called a Cloud Business App. This brings together LightSwitch RAD platform and Office 365.

LightSwitch, launched in 2010, simplifies the creation of line of business forms over data apps using a visual designer to manage app metadata. The original version created Silverlight clients, but it now supports responsive HTML clients. You can extend with code, using JavaScript/C#/VB on the client or C#/VB in the service layer. For more advanced extension and integration, LightSwitch projects easily integrate with other technologies and frameworks (ASP.NET Web API, MVC 5, Angular.js ...).

The Cloud Business App template adds SharePoint and Office 365 into the mix. The ease of use is improving as better integration arrives as other components such as the Windows Azure SDK catch up.

Will 2014 be a big year for Cloud Business Apps? Building LOB applications on Microsoft’s platform is in some respects harder and more complex today than it was a decade ago, and looking ahead, Office 365 and Azure are a strategic platform for Microsoft. Simplifying LOB app development and deployment to support diverse devices is surely a winner.

AIDE 2013 for Visual Studio

AIDE 2013 is the market leading set of productivity power tools for Cloud Business and LightSwitch applications. The only supported way to clone, import/export, local backup/restore screens and code. Visualize hard-to-access metadata to complement working with the standard LightSwitch designers.

ooo

Failed upgrades, unloadable projects, old extensions, AIDE for LightSwitch will be there to help you through! Xpert360 consultants have real-world experience of reconstruction and resurrection of corrupt projects. Contact us if your need help troubleshooting your LightSwitch projects.

ooo

Company information: Xpert360 Ltd, founded in 2009, based upon three decades of IT experience, is an Independent Software Vendor and Custom Solution Provider based in the United Kingdom.

“Xpert360 Lightning“, “AIDE for LightSwitch“, “AIDE 2013 for Visual Studio” are trademarks of Xpert360 Ltd, copyright 2012 – 2014.

Advertisement