UI States

From Lianjapedia
Jump to: navigation, search
Bm-noteicon.png
Quick Start Guide

You declare the UI states that a UI Element is affected by (Page,Section,FormItem,GridColumn) in the "Attributes" Tab of the App Inspector.
You manage UI states using the UI State Editor.
State changes can be used effectively to control UI workflow by setting various attributes based on actions or conditions that occur.

See Also

Custom Delegates, Lianja system object, SHOWDOCUMENT(), UI Presentation Rules, Using the showdocument() function and Lianja.showDocument() method

Overview

UI states allow you to control how your App reacts as users enter data or as they navigate through your data and interact with different workflow elements.

Each transition to a new UI state can alter the UI presentation of multiple elements from a single trigger action.

UI States App

example_uistates App


The 'UI States App' (example_uistates) example App is included in the Lianja App Builder distribution to demonstrate the use of UI States.

example_uistates App


example_uistates App



To see the effect of UI states, switch to the Desktop App View.


Clicking the Show Orders and Hide Orders buttons shows and hides the Orders grid section.


As we will see, the 'visible' property of the Orders grid section is being set based on a change of UI state.


The UI state is being set in the 'click' event of the buttons.


Setting a UI State

UI states can be changed using the showdocument() function or the Lianja system object showDocument() method.

The <statelist> is a comma-separated list of UI state names.

showdocument("changestate:<statelist>")
Lianja.showDocument("changestate:<statelist>")

To cause all UI components to revert back to their default attributes (no UI state set), use:

showdocument("resetstate")
Lianja.showDocument("resetstate")
example_uistates App



Back in the UI States App (in Development View), open up the Field Attributes for the buttons.


These use the Inline Delegate version of the showdocument() function.


The 'Show Orders' button changes the UI State to 'state1'.

?changestate:state1


example_uistates App




and the 'Hide Orders' button changes the UI state to 'state2'.

?changestate:state2


The 'state1' and 'state2' states are defined in the UI States Editor.

UI States Editor

UI States Editor



The UI States Editor is accessed from its headerbar toolbutton and is where you define the names and behavior of UI states.


The UI state definitions are written to a table called

<app-name>_uistates

here 'example_uistates_uistates'.


Note: When you first open the UI States Editor, you will be prompted to allow the table to be created if it does not already exist.

UI States Editor



Here's the UI States Editor with the states 'state1' and 'state2'.


The 'state2' UI state is selected here and has one row of 'property-name=value' entries (in the bottom section) for when the UI State is active (true) and not active (false).


Note: A UI state can have multiple rows or entries.


When 'state2' is active, affected UI components will have their 'visible' property set to 0 (false)

visible=0

and when 'state2' is not active (i.e. the default state), affected UI components will have their 'visible' property set to 1 (true)

visible=1 

Make sure you set the default state in this way so that when you are in Development View, which uses the default state, you can see and manipulate all your UI components.

UI States Editor


Here's 'state1' - the UI state activated when the 'Show Orders' button is clicked - it makes affected UI components visible when it is active

visible=1

and also when the default state is active

visible=1


Attributes

Two attributes control whether a component is affected by a particular UI State and what the starting UI state is:

UI States

UI States Attribute



The UI States attribute specifies the UI states that affect the container/control. Multiple states are specified as a comma separated list.


If you open the Section Attributes for the Orders grid section, you will see that it has the entry:

UI States: state1,state2


Initial UI state

Initial UI state Attribute



The Initial UI state attribute specifies the starting UI state for the container/control.


In the UI States App, this is set in the App Settings as follows:

Initial UI state: state2


This means that when the App is first loaded (in runtime), the Orders grid section is not visible.


UI states table

When you use the UI States Editor, the UI states table name will be automatically added to your App Settings.

If you want to use an existing help table instead of creating a new one, just specify its name in the Ui states table attribute in the App Settings (screenshot above).

Notes on Client Support

Attribute Notes
UI States UI States are supported on the Desktop client only.
Initial UI State The Initial UI State is supported on the Desktop client only.

State Changed Delegate

The State Changed delegate was introduced in Lianja v3.2.

The State Changed delegate is called whenever a UI State is changed. It is called with one argument, the name of the UI state.

When a UI state is reset, the name of the UI state is passed with a '-' prefix, e.g. '-state2'.