Section Expanders in LightSwitch HTML

Section Expanders in LightSwitch HTML

Overview

Apps created with LightSwitch HTML client are mobile first as the UI is based on jQuery Mobile. This post introduces a way to organise form data with section expanders that are often found in desktop app scenarios.

Default Mobile First Style

In the mobile style of pages the data is typical displayed in one or two columns and related data is visualized in tab sections. Here is an example of a default View screen with details on the first tab and related information located on separate tabs.

Tab Sections in LightSwitch HTML

In many ways the styling is a matter of taste and there are several ways of presenting larger volumes of information in common use. Using the in-built View Details Screen template the screen content layout looks like this:

View Details Screen Layout

The screen content is organized into parent tabs and the tab layout uses the Columns and Rows Layout controls.

Designing the Layout and Behaviour

In desktop application scenarios the answer to how to display large amounts of data fields has often been to use section expanders. Very often for line-of-business apps a combination of tabs, expanders and pop-ups is used to try and provide an optimal user experience.

If you want to give your LightSwitch apps a more Desktop UX feel there is nothing stopping you from implementing similar styles and behaviours.

The first step is to organise the screen content layout into sections. Each section will have a visible border box to group related information. The first header section in this example will be static. Subsequent sections will be expandable and will be displayed by default as collapsed.

Screen Content Layout for Expanders

The sections are marked up: Header, Attributes and Tracking

The expandable sections contain a custom control for the expander header and the rest of the section content is (Not Visible) to start. Let us take the first example above, with the layout hierarchy:

Expander Content Items Layout

The section’s top Rows Layout will:

• Handle _tap event to toggle the section details visibility

The section’s Custom Control will:

• Render the expander header

The section details Rows Layout will:

• Block _tap events from bubbling up to its parents
• Display the section border box in _postRender

Implementing the Expander

Firstly we will attend to the rendering of the expander header:

Render Expander Header Custom Control

I have set all the CSS attributes in the _render code here for directness. You should really use a custom CSS class. You can experiment with the CSS attributes for different visual impact. The sample variable _attributeExpanderHeader should be scoped to the screen. You could include icons as part of the visual feedback.

Then complete the visual changes by adding code to the section details group content item like this:

Expander Section Details

The CSS styles place a border box around the sections details. The Tap action is bound to showTab Details – this stops the tap event bubbling up.

Then finally on to the section’s top level group control to handle the tap event to expand and collapse the section details.

Toggle the Expander Section Visibility

The toggle event flips the isVisible setting and handles the rendering of the bottom border of the expander hander. You could experiment with icons here.

Conclusion

With a little screen content layout design work, some CSS styles and a toggle event you can introduce section expanders to you control portfolio in LightSwitch TML client apps.

Advertisement

jQuery Mobile Themes suitable for LightSwitch HTML Apps

Xpert360Lightning.HTMLThemes

This is a Visual Studio extension that provides a collection of jQuery Mobile CSS templates designed and tested for Visual Studio LightSwitch HTML Client and Cloud Business Apps (see below).

Sample of jQuery Mobile HTML Themes for LightSwitch

The Xpert360Lightning.HTMLThemes 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 and Themes in action >

New JavaScript Item Templates

The purpose of these CSS themes is to provide a starting point for selecting jQuery Mobile themes within Visual Studio 2012 and 2013. The themes are suitable for any jQuery Mobile web application and can be inspected and changed with the jQuery Mobile Theme Roller.

To use in your LightSwitch HTML apps it is usually to select ‘Add New Item‘ for the client project’s ‘Content‘ folder and choose a theme from ‘/JavaScript/Themes/’. Then edit the client project’s ‘default.htm’ file and change the theme reference to use the new theme. The theme name prefix indicates whether it works best with the ‘msls-dark…’ or ‘msls-light..’ style sheet.

Design-Time

The themes are accessible from the ‘Add New Item’ dialog.

Add New Item – JavaScript Themes for jQuery Mobile

Most of the themes contain two swatches. You can browse through the themes in Visual Studio. You are welcome to modify the themes for your own use. If you have any suggestions for more themes then please contact us.

Run-Time

You may have to adjust the supplied ‘msls’ style sheets if you want to implement correct rendering of the header. see this article: Vs2013 LightSwitch HTML Themes – Headers

If you want to use other swatches other than ‘A’ then the ‘msls’ script needs a simple change to expose the setting.

Here are some of the themes in use:

Office Brown Themed Auto-Tile Menu

Office Azure Dark Theme

Orchard Theme

Orange Pastel Greens theme

VS2012C Theme

Blue Purple Dark Theme – Swatch-B

Office Blue Theme – Swatch-B

There are currently 19 themes and some 40 or so swatches to choose from. Go style you LightSwitch HTML Apps!

Plans

There are plans to add some themes for use with Office 365 and SharePoint on-line. We will fill out the pack of themes with a wider palette range and introduce some themes with background imagery (not strictly for low-power mobile devices). We will also release a theme previewer LightSwitch HTML application that is able to dynamical switch themes and allow you to browse theme preview images.

We will review the themes based on any feedback from users.

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 screen shots that accompany the screen template blog posts make use of many of the themes contained in the Xpert360Lightning.HTMLThemes Visual Studio extension.

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

Browse Data Tabs Template

Tablet List and Details Template

Mobile List and Details Template

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.

LightSwitch Screen Template – Mobile List and Details

Xpert360Lightning.WebExtensions

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

Mobile List and Details generated from the template

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 >

Mobile List and Details Template

Design-Time

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

Add New Screen – Mobile List and Details

The default screen name is ‘ListDetails’ and the primary collection name is prepended. You select screen data as usual in the main dialog including the primary collection.

Design-Time Mobile List and Details screen

A 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 independently scrolling list-view side-by-side with selected single-column entity details data. Extended touch and keyboard support.

Does not support child collections. Limits the number of master detail properties displayed for easier customization. As with all LightSwitch screens you are free to customize content and layout once generated.

Run-Time

The master details are displayed in one column and this works well provided not too much detail data is displayed.

Mobile List and Details in dark-green theme

If the detail data contains many properties you will notice that a manageable subset of is added to the screen contents. This will save time when dealing with entity-types with many tens or even hundreds of properties. Trying to display too many properties often makes little sense, is not a good user experience and slows down the LightSwitch screen designer.

We find this really helpful when connecting to data such as that in Dynamics CRM where tables are wide and complex. You will need to customize the subset of properties displayed but the overall experience is preferable to that provided by the standard templates.

Mobile List and Details in office-brown light theme

If you choose a parameter-driven custom query then the list will be a simple filterable collection. With appropriately designed custom queries this makes for easy generation of a searchable list view as your screen starting point.

Plans

There are no imminent plans to improve this template. We explored the idea of using more of the screen metadata and adding a template wizard. 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 essential 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.

LightSwitch Screen Template – Tablet List and Details

Xpert360Lightning.WebExtensions

The Tablet List and Details HTML 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 VS2012C 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 >

Tablet List and Details Template

The purpose of this template is to provide a means of generating a List and Details screen for larger form factor devices such as tablets or desktops. The generated screens are similar to those created using the Rich-Client List and Details template (Silverlight client).

You can create screens like this manually starting with the simple default Browse Data template however this new template will save you a considerable amount of time and provide consistent results.

Design-Time

The template is accessible from the ‘Add New Screen’ dialog like below:

Add New Screen – Tablet List and Details

The default screen name is ‘ListDetails’ and the primary collection name is prepended. You select screen data as usual in the main dialog including the primary collection and optionally the primary entity-type details and related child collections.

Design-Time Tablet List Details Generated Screen

This screen style is useful for generating a list of master records and displaying them side-by-side with the selected master detail record and a collection of related child data.

The screen is generated with one tab. If you choose more than one child collection then you may wish to customize the screen and move some collections to additional screen tabs especially if they contain lots of data.

Run-Time

The child collections are generated as grid views but as with all LightSwitch screens you are free to customize it once generated. The master details are displayed in two columns to make better use of space.

Tablet List and Details Screen in Orchard Theme

If any details data contains many properties you will notice that a manageable subset of is added to the screen contents. This will save time when dealing with entity-types with many tens or even hundreds of properties. Trying to display too many properties often makes little sense, is not a good user experience and slows down the LightSwitch screen designer.

We find this really helpful when connecting to data such as that in Dynamics CRM where tables are wide and complex. You will need to customize the subset of properties displayed but the overall experience is preferable to that provided by the standard templates.

Tablet List Details with enterable Custom Query Filters

If you choose a parameter-driven custom query then the list will be a simple filterable collection. With appropriately designed custom queries this makes for easy generation of a searchable list view as your screen starting point.

You can switch the master data list-view to a tile-view if you prefer, as shown here:

Tablet List and Details switched to Tile View

The template will automatically configure item-tap navigation if you have pre-selected any default screens for a child entity-types. The drill-through navigation to details screens is wired-up and displays modal-dialogs or launches the SPA detail screens.

The template looks after the screen content metadata to configure scrolling regions. So when you scroll through the master data list the selected details stay in view.

Tablet List Details Independent Scrollable Regions

There you have it, a ubiquitous List and Details HTML screen template that gives you a better starting point. A nice productivity boost that we like lots!

Plans

There are plans to improve this template. We explored the idea of using a template wizard as in an advanced configuration mode to choose the view types (list, tile, table) and placement (main tab, child tab, pop-up dialog). We have experimented with generating more code to display child collection record counts.

We will take into consideration all feedback along with these ideas.

Screen Templates

We are open to the idea of providing advanced screen templates for all existing and future LightSwitch client types though the initial focus is on the Mobile-Web 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 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

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

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.

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.

Second Look at LightSwitch in VS2013 Preview

More Impressions OF LightSwitch

And Visual Studio 2013 Preview

This week has been very busy for most people involved with Microsoft technologies as the BUILD 2013 ( #BLDWIN ) and TechEd 2013 draw to a close.

Our teams have been busy evaluating and testing. As most activities have been successful and gratifyingly trouble free, some more feedback is available for LightSwitch V4 Preview and Visual Studio Extensions.

Xpert360 Lightning Series in VS2013 Preview

Above is a screen of a preview of the AIDE power tool running in Visual Studio 2013, an upgraded LightSwitch Rich-Client (V2 > V4) application, our LightSwitch Theme Generator tool, and four of our LightSwitch extensions migrated to VS2013.

For extensions the targeted version range in the manifest needed to include the internal version number ‘12.0’. So now the range is ‘[11.0, 12.0]’ in the manifests. The Dynamics adapter is slightly different as it is built in VS2010 so targets ‘VSLS’ and ‘10.0’ as well.

The LightSwitch theme packs worked straight away but the other extensions required some additional changes and testing.

Xpert360 Office Theme Pack Install for LightSwitch

The ThemeGen application is what we use internally to edit and validate LightSwitch themes for Rich-Client/Desktop/Silverlight clients. When dealing with the 600+ colors in the Cosmopolitan styles it is a big time saver.

In an unusual take on ‘eat-your-own-dog-food’ style, the upgraded ThemeGen is sporting themes from our VS2013 preview of Office Theme Pack, that was created using its self. For anyone new to LightSwitch, yes these are real screens of a real LightSwitch app delivered in true RAD-fashion.

VS2013 LightSwitch app in VS2012 Color Theme

VS2013 LightSwitch app in Dark Blue theme

The theme pack contains a total of eight themes.

Office Themes in VS2013 LightSwitch

Our remaining themes, theme packs, extensions and samples are in the queue to be upgraded and should be available over the coming weeks.

Conclusions

We have successfully upgraded some LightSwitch applications (Rich-Client and Mobile-Client) from V2 to V4 and V3 to V4.

Apart from the issues already noted by bloggers and the LightSwitch team, the process has been relatively smooth to-date.

We are running VS2012 Update 3 and VS2013 Preview side-by-side on Windows 7 and Windows 8 OS platforms.

We are in the process of upgrading Visual Studio extensions to VS2013 Preview and this process is also going well.

Good job all around!

PivotViewer Shorts Part 4: Restyle the ZoomSlider child controls

Introduction

By default the SL4 PivotViewer control displays a custom control for controling the zoom-level of the tile views. A few people have expressed a wish to totally reskin the control and this is a step along that path that hints at the technique needed to dig deeper into the PivotViewer visual tree.

 

This short post shows how to locate the UI element for the control bar, the ZoomSlider, all its visual elements and then alter their background.

 

PivotViewer ZoomSlider Re-Styling

 

Locating the UI Elements

The flow of the code goes something like this:

• Locate the “PART_Container” in the tree. This is a Grid control.
• Or… go direct to the “PART_ControlBar” element.
• Locate the ControlBarView to access the child controls.
• Build a list of child controls using VisualTreeHelper.

// Locate UI Elements
    ControlBarView ControlBar = (ControlBarView)this.GetTemplateChild(“PART_ControlBar”);
    Grid ctrlBarContent = (Grid)ControlBar.Content;
    DockPanel ctrlBarDockPanel = (DockPanel)ctrlBarContent.Children[2];
    ContentControl ZoomSlider = (ContentControl)ctrlBarDockPanel.Children[2];
    ContentControl cc1 = (ContentControl)ZoomSlider.Content;
//
// Build a list of the child controls
    var ctrls = GetChildsRecursive(cc1);
//
// Pick out controls and re-style as you wish 
    foreach (UIElement ctrl in ctrls)
    {
        string s = ctrl.GetType().ToString();
        switch (s)
        {
            case “System.Windows.Controls.Button”:
            Button b = (Button)ctrl;
            b.Background = new SolidColorBrush(Colors.Orange);
            break;
        case “Microsoft.Pivot.Internal.Controls.ClickDragSlider”:
            ClickDragSlider cds3 = (ClickDragSlider)ctrl;
            cds3.Background = new SolidColorBrush(Colors.Green);
            break;
        default:
            break;
        }
    }
;

// Helper function for child controls
IEnumerable<DependencyObject> GetChildsRecursive(DependencyObject root)
{
    List<DependencyObject> elts = new List<DependencyObject>();
    elts.Add(root);
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(root); i++)
        elts.AddRange(GetChildsRecursive(VisualTreeHelper.GetChild(root, i)));
    return elts;
}

+

FAQ

If you want to try out the code there are a few things to watch out for.

+

You will need some internal Microsoft Pivot references and usings too. Depending upon the extent of your other customizations you will need these:

+

using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Controls;
using Microsoft.Pivot.Internal.Model;
using Microsoft.Pivot.Internal.ViewModels;
using Microsoft.Pivot.Internal.Views;

+

Further things to do

• Xpert360 PivotViewer Blog Article Index
• The code should be nicely wrapped up and encapsulated in the CustomPivotViewer override class.
• PivotViewer Control – Public API
• Microsoft Silverlight Forums – PivotViewer Control
• Xpert360 Ltd – who allow time for blogging

Conclusion

This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to customize the styling of the ZoomSlider control. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API.

 

Any comments or request for future topics are welcome.

 

Adventures with PivotViewer Part 10: Let’s do the Timelapse Warp

Introduction

Some data sets that have a datetime facet lend themselves nicely to data play back using time lapse. Sometimes playing back data like this can lead to insights that may have been missed through other visualization representations. Finding good examples is hard especially when you can argue that various trends or anomolies would also show up just as easily in more basic graph plots.

 

It would be nice if the PivotViewer filter panel was bound to data so that a timer could fire and animate the selected datetime range so automatically animating the selected PivotViewer items view in a time lapse. For now we can simulate this by manipulating the control’s ViewState and progressing the range for a target datetime facet.

 

Sample Collection Data

We decide to choose a large data set from the FAA (Federal Aviation Administration) in association with the NTSB (National Transportation Safety Board) . The sample collection covers aviation accident data from 2008 and 2009.

 

NTSB 2008 - 2009 Aviation Incidents by Severity

 FAA data for aviation incidents by severity for 2008 and 2009 to give you an overview. Incidents resulting in one or more fatalities are colored red.

NTSB 2008 - 2009 Aviation Incidents by Month

FAA data for aviation incidents by month for 2008 and 2009 which shows the seasonal variation that peaks in August. Be careful not to misinterpret this as the overall volume of flights is not represented.

NTSB 2008 - 2009 Aviation Incidents by Day-of-Week

FAA data for aviation incidents by day-of-week for 2008 and 2009 which shows a modest peak on saturdays.

NTSB 2008 - 2009 Aviation Incidents for top States

FAA data for aviation incidents by state for 2008 and 2009 which shows the states with most incidents: California, Texas, Florida, Arkansas, …

Timelapse of Incidents by State

I don’t know the real reasons for the observed trends though some are likely to be seasonal and others definitely related to holiday periods and holiday destinations resulting in increased traffic.

 

NTSB Aviation Incidents by State - Jan 1, 2008

Starting in January 2008 the incidents are relatively light with the most in California and Florida.

NTSB Aviation Incidents by State - Jan 15, 2008

For whatever reason the number of incidents pick up sharply for Texas as we move into early February 2008.

NTSB Aviation Incidents by State - Feb 5, 2008

Throughout February 2008, the number of incidents increases overall but most markedly in Florida. Meanwhile the incident rate reduced in California.

NTSB Aviation Incidents by State – April 1, 2008

Moving forward to April 2008 the distribution of incidents changes again with Texas ahead and Arkansas suffering more.

NTSB Aviation Incidents by State – Jun 24, 2008

Moving forward to June 2008 the number of incidents across the states builds up and California is tops again but now followed by a peak in Illinois for what reason I do not know.

Here is a short video screen capture of a segment of the timelapsed playback.

Click to play clip of PivotViewer Timelapse

 There are a lot of additional facets to the full collections of FAA / NTSB data and many more trends and interesting visualization opportunities. Stay tuned to our blog…

 

Links 

• PivotViewer Control – Public API
• Microsoft Silverlight Forums – PivotViewer Control
• Xpert360 Ltd – who allow time for blogging

Conclusion

This article is just a brief introduction to the possibility of playing PivotViewer collection data back as a timelapsed visualization opportunity. It is arguable whether or not this somewhat fashionable approach to visualization really gives a better insight than more traditional visualization paradigms. It all depends on whether there is really any trends in your data sets that are obscured when viewed as simple charts and graphs. Any comments or request for future topics are welcome.

Adventures with PivotViewer Part 9: Multi-Layered Trading Cards

Silverlight PivotViewer Layered Trading Cards - click to view video

Introduction

Adding multi-layered trading cards is a feature enabled by the XAML data template trading card support for the version of the Silverlight PivotViewer control that will be distributed in the Silverlight 5 SDK. This article shows you how to implement a similar effect in the previous version of the control.

If you are new to our blog then you may care to take the time to work through the other posts in this series and build up you portfolio of PivotViewer customization skills.

• Adventures with PivotViewer Part 1: Background work
• Adventures with PivotViewer Part 2: Themes and Integrated DataGrid
• Adventures with PivotViewer Part 3: Localization
• Adventures with PivotViewer Part 4: Augmented PDC10 reality – pivot the agenda
• Adventures with PivotViewer Part 5: Pimp my PivotViewer
• Adventures with PivotViewer Part 6: Pimp it sample code
• Adventures with PivotViewer Part 7: Slider control
• Adventures with PivotViewer Part 8: Filter pane tooltips
• Adventures with PivotViewer Part 9: Multi-Layered Trading Cards tooltips 
• Visualization of the Windows Phone 7 Marketplace with PivotViewer
• PivotViewer vNext in Silverlight 5 SDK

Deep Zoom Collections and Images

Silverlight PivotViewer Product Catalogue basic collection images

The easiest way to achieve this effect is to generate a full set of deep zoom collection imagery for each desired layer. Also generate full sets of deep zoom images for the desired layers of the trading cards.

 

Simply merge together the folders of the image layers according to your trading cards layer designs. By default the layers 0 to 7, equating to deep zoom folders 0 to 7, are used for the deep zoom collection imagery for the lower resolutions. Only the layers 8 and above are used at runtime by PivotViewer for the individual deep zoom images: folders 7 and below can be deleted and do not need deploying.

 

PivotViewer Low-Res Trading Card Image transition

 

It is important that all source images for a trading card are the same height and width. The PivotViewer Excel tool is useful for trying this as you can simply copy the Excel spreadsheet and replace the trading card images.

 

I would suggest that you use common low resolution images for the zoomed out top layers of the deep zoom pyramid. For the primary theme choose a facet category with fewest values that can be represented by color. Choose images that represent a secondary attribute such as a category-type facet. By following this approach the users can quickly and easily work with the collection trading cards at low resolutions by visual association of color and category icon.

 

PivotViewer Hi-Res Trading Card Image Transitions

 

At the other end of the scale with the highest resolution images you probably will want more information, mini-graphs, etc. These images can be captured from a simple custom tool that uses a XAML data template bound to the collection data. If you do this you ought to be able to reuse your code with the vNext version of PivotViewer.

 

PivotViewer Trading Card Hi-Res from XAML

 

Further things to do

• PivotViewer Control – Public API
• Microsoft Silverlight Forums – PivotViewer Control
• MVP Tony Champion tutorials
• Xpert360 Ltd – who allow time for blogging

Conclusion

This article is just a brief run through that introduces multi-layered visualization of Silverlight PivotViewer control trading cards. It targets the developer who has already started customizing the Silverlight PivotViewer control in preparation for the next version scheduled to be distributed with the Silverlight 5 SDK. Any comments or request for future topics are welcome.