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