LightSwitch Screen Template – Auto-Tile Menu

Xpert360Lightning.WebExtensions

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

Auto-Tile Menu Screen in Orange Pastel 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 >

Auto-Tile Menu Screen Template

The purpose of this template is to provide a dynamic start menu for project development time. During development, especially when prototyping, this screen allows you to navigate to all screens in the app without continually having to manually configure navigation for browse-type screens. It may surprise you how much time you can save using this temporary starting page.

Design-Time

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

Add New Screen: Auto-Tile Menu

The default screen name is ‘AutoTileMenu’. There is no need to select screen data as this screen is generic. Add one instance per HTML client project and set your new menu screen as the start-up screen whenever you need it.

Design-Time Auto-Tile Menu Screen in LightSwitch

The screen is very simple and really only contains a custom control as the heavy-lifting is performed in the control’s render event. The supporting JavaScript code is generated for you. You are welcome to view the code and derive other screens from it if you wish. If you have any suggestions for more general improvement then please contact us.

Run-Time

The screen discovers all the screens available in the client app and creates a data collection based on what it finds. A tile is created for each screen and displayed in a familiar tile view that looks like this:

Office Brown Themed Auto-Tile Menu

The tiles are color-coded, have different icons and display the screen display name and the name of the first entity screen property.

Auto-Tile Menu Color-Coded Entity Types – Contractor

The JavaScript code dynamically allocates a color to each entity type so tiles with the same color are related by the first entity type property discovered in the screens. The color allocated to an entity type will change as you change the app’s screens. The above example shows all screens based on ‘Contractor’ entity colored purple.

Each tile has one of three icons allocated to it based upon whether the primary screen property is an entity-set, entity-type or no/scalar property.

Icons for Auto-Tile Menu – Collections

The above example highlights all the screens whose primary screen property is a collection (entity-set). These screens typically can be launched and function well without any parameters (but not always).

The tiles have a click event handler for tap-to-navigate and navigate to the appropriate screen.

Plans

There are no imminent plans to improve this template. We explored the idea of using more of the screen metadata and local storage to add more features. We looked at supporting screen parameters too but opted to keep the screen simpler for now. We will review this template later based on 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 Data 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 essentially list-based master and details screen template. 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 keyboard support. Generates child collections in detail grids.  Implements 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

Must have 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. Implements 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