UI Presentation Rules

From Lianjapedia
Jump to: navigation, search

Overview

A Lianja App can have multiple UI personalities and different functionality depending on the "roles" that you grant to a user and also the device on which the App is being run e.g. Desktop, Web or Mobile.

The Lianja App Builder provides the ability for you to build one App that will run on Desktop, Web and Mobile devices from a single codebase.

Bm-noteicon.png
Quick Start Guide

Select the "Pages" workspace.
You manage UI Presentation Rules in the "Attributes" Tab of the App Inspector.

Certain UI Elements may only be relevant to a Desktop user, others to a Web user and some only to a Mobile user. Additionally some UI elements may only be visible when running on a Mobile device if the device is in "landscape mode". You can adjust the behavior of an App using UI Personalities.

These are specified in the attributes for a UI Element in the attributes Tab of the App Inspector.

Bm-uipresentationrules.png

Attributes

Desktop

The Desktop attribute determines whether this element should be included in a Desktop client or not.

Web

The Web attribute determines whether this element should be included in a Web client or not.

  • Note that if the App's Web attribute is unchecked (False), Web App View is disabled.

Tablet

The Tablet attribute determines whether this element should be included in a Tablet client or not.

Phone

The Phone attribute determines whether this element should be included in a Phone client or not.

Use mobile navigation bar

The Use mobile navigation bar attribute specifies whether a mobile styled navigation bar (material UI style) should be used. From v4.1.

UI States

The UI States attribute specifies the UI states that affect this element.

  • Multiple states should be specified as a comma separated list.
  • See UI States.

Initial UI state

The Initial UI state attribute specifies the starting UI state for this element.

Readonly when

The Readonly when attribute specifies an expression to be evaluated. If the expression evaluates to True, the element is readonly (not editable).

  • The Readonly when attribute expression is evaluated at runtime only.

Visible when

The Visible when attribute specifies an expression to be evaluated. If the expression evaluates to True, the element is visible.

  • The Visible when attribute expression is evaluated at runtime only.

Page transition effect

The Page transition effect attribute specifies the page transition effect to use when navigating to this page on the Web/Mobile client. (None | Fade | Pop | Flip | Turn | Flow | SlideFade | Slide | SlideUp | SlideDown).

Display orientation

The Display orientation attribute determines whether this element is always displayed, only when the orientation is portrait or only when the orientation is landscape. (Always | Portrait | Landscape).

  • Applies to mobile devices only.

Hidden at runtime

The Hidden at runtime attribute determines whether this formitem or grid column is hidden at runtime(True | False). Default is False.

  • Applies to Form Section Fields, Advanced Canvas Controls and Grid Columns.
  • This can be used to hide certain fields in a form or grid that you may need but do not want the users to see e.g. a primary key field which needs to be defined for Virtual Tables so that Update and Delete operations can be performed.

Apply rules on change

The Apply rules on change attribute determines whether the UI presentation rules of the page and its elements should be applied when data is changed interactively and when navigating records (True | False).

  • If checked (True), when data changes in this page, section, gadget or formitem (Form Section field or Canvas Advanced Control), the page and its elements' Visible when and Readonly when expressions will be re-evaluated.

Apply rules on parent change

The Apply rules on parent change attribute determines whether the UI presentation rules of this section and its elements should be applied when parent data is changed by navigating records (True | False).

  • If checked (True), when data changes in its related parent section, the section and its elements' Visible when and Readonly when expressions will be re-evaluated .
  • Applies to Sections.

Notes on Client Support

Attribute Notes
Desktop -
Web -
Tablet -
Phone -
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.
Readonly when Readonly when is supported on the Desktop client only.
Visible when Visible when is supported on the Desktop client only.
Page transition effect The Page transition effect is ignored on the Desktop client.
Display orientation The Display orientation is ignored on the Desktop client and fixed orientation devices.
Hidden at runtime -
Apply rules on change Apply rules on change is supported on the Desktop client only.
Apply rules on parent change Apply rules on parent change is supported on the Desktop client only.

Using UI Element Alias Names

Overview

Using UI Element Alias Names resolves the problem where you want to have a page for phone to be different to the page for web or a web/mobile page to be different to the desktop page. The Name of the page is needed at development time for coding purposes, but you may want to have the same name for more than one page based on their different UI Personalities. By defining an Alias name for the page/section or formitem, when generating the code for web, tablet, or phone you can exclude certain UI elements and generate the code with known names through alias names.

Note: for information on database table aliases, see the USE ... ALIAS ... command and the ALIAS() function. For user-defined commands, see the ALIAS command.

Alias Name Attribute

From Lianja v4.1, the Alias name attribute (aliasid) is supported by Pages, Sections, Gadgets, Fields, and Advanced Canvas Controls.

Example

Using UI Element Alias Names



I have created an App with 3 pages: startpage, page1 and page3.

Here you can see startpage with a Calendar Section.

In the App Inspector, you can see the Pages Hierarchy tab showing the 3 pages.


Using UI Element Alias Names



This is page1 (Name attribute). It is for use on desktop clients.

Note that only Desktop is checked in the UI Presentation Rules.


Using UI Element Alias Names



This is page3 (Name attribute). It is for use on mobile and web.

It has a simpler design with no Left Sidebar and uses Accordion Behavior.

Web, Tablet and Phone are checked in the UI Presentation Rules.

The Alias name in the Details attributes is set to page1.


Using UI Element Alias Names



Back to startpage (Name attribute).

Its Calendar Section has a Section Menu and the JavaScript Custom section menu delegate can be seen in the floating Script Editor.


When the Customer Accounts menu option is clicked, the Lianja.showDocument method is used to switch to page1.

////////////////////////////////////////////////////////////////
// Event delegate for 'customsectionmenu' event
function startpage_section2_customsectionmenu(arg)
{
    if (arg == "Customer Accounts")
    {
	Lianja.showDocument("page:page1");
    } else if (arg == "Employees") {
	messageBox("Employees selected");
    } else {
	messageBox("Products selected");
    }
};
Using UI Element Alias Names



So, here's the App running in Desktop App View.

Clicking the Customer Accounts menu option will call the function startpage_section2_customsectionmenu and pass the argument "Customer Accounts".


Using UI Element Alias Names



Which selects page1, the Desktop page.


Using UI Element Alias Names



Now here's the App running in Phone App View.

As in Desktop App View, clicking the Customer Accounts menu option will call the function startpage_section2_customsectionmenu and pass the argument "Customer Accounts".


Using UI Element Alias Names



Since the Page with the Name page1 is not included in Phone Apps based on its UI Presentation Rules, but the Page with the Alias name page1 is included, the Web and Mobile Page (Name = page3) is displayed.


Using UI Element Alias Names



And since page3 is the Page included in Web Apps, this is also the Page displayed when the App is running in the Lianja Web Client in the browser.