Difference between revisions of "UI Presentation Rules"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) |
||
(55 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | =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. | ||
+ | |||
+ | <div style="height:80px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;"> | ||
+ | [[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Quick Start Guide</b> | ||
+ | Select the "Pages" workspace.<br> | ||
+ | You manage UI Presentation Rules in the "Attributes" Tab of the App Inspector.<br/> | ||
+ | </div> | ||
+ | <span style="height:6px;"> </span> | ||
+ | </div> | ||
+ | |||
+ | 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. | ||
+ | |||
+ | [[{{ns:file}}:bm-uipresentationrules.png|800px|left|border|link={{filepath:bm-uipresentationrules.png}}|Page UI Presentation Rules]] | ||
+ | <br clear=all> | ||
+ | |||
+ | =Attributes= | ||
+ | |||
+ | ==Standalone== | ||
+ | The '''Standalone''' attribute determines whether this App can be run as a Standalone executable on Windows. | ||
+ | * From v7.0. | ||
+ | * See [[Standalone Executables on Windows]] for full details. | ||
+ | |||
+ | ==Form== | ||
+ | The '''Form''' attribute determines whether this App should be run as a Form. | ||
+ | * See [[Working with Forms in Lianja]] for full details. | ||
+ | |||
+ | ==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 Settings|App's]] Web attribute is unchecked (False), [[Deploying_to_Local_Directory#Deploying_Lianja_Web.2FMobile_Client_Apps|Preview live in browser]] is disabled. | ||
+ | |||
+ | ==Tablet== | ||
+ | The '''Tablet''' attribute determines whether this element should be included in a Tablet client or not. | ||
+ | * Note that if the [[App Settings|App's]] Web attribute is unchecked (False), [[Deploying_to_Local_Directory#Deploying_Lianja_Web.2FMobile_Client_Apps|Preview live in browser]] is disabled. | ||
+ | |||
+ | ==Phone== | ||
+ | The '''Phone''' attribute determines whether this element should be included in a Phone client or not. | ||
+ | * Note that if the [[App Settings|App's]] Web attribute is unchecked (False), [[Deploying_to_Local_Directory#Deploying_Lianja_Web.2FMobile_Client_Apps|Preview live in browser]] is disabled. | ||
+ | |||
+ | ==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. | ||
+ | * See [[UI States]]. | ||
+ | |||
+ | ==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). | ||
+ | * Applies to [[Page Attributes|Pages]] only. | ||
+ | |||
+ | ==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 [[Field Attributes|Form Section Fields]], [[Advanced Canvas Control Attributes|Advanced Canvas Controls]] and [[Grid Column Attributes|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. | ||
+ | |||
+ | ==Only visible when editing== | ||
+ | The '''Only visible when editing''' attribute determines whether this grid column is hidden at runtime except when the record is being edited (True | False). Default is False. From v6.0. | ||
+ | * Applies to [[Grid Column Attributes|Grid Columns]]. | ||
+ | |||
+ | ==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 [[:Category:Attributes#Sections|Sections]]. | ||
+ | |||
+ | ==Notes on Client Support== | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width="80%"| | + | !width="80%"|Notes |
|- | |- | ||
− | |valign="top"|Desktop|| | + | |valign="top"|Desktop||- |
|- | |- | ||
− | |valign="top"|Web|| | + | |valign="top"|Web||- |
|- | |- | ||
− | |valign="top"|Tablet|| | + | |valign="top"|Tablet||- |
|- | |- | ||
− | |valign="top"|Phone|| | + | |valign="top"|Phone||- |
|- | |- | ||
− | |UI States||UI | + | |valign="top"|UI States||UI States are supported on the Desktop client only. |
|- | |- | ||
− | |Initial UI state||The | + | |valign="top"|Initial UI state||The Initial UI State is supported on the Desktop client only. |
|- | |- | ||
− | |valign="top"|Readonly when|| | + | |valign="top"|Readonly when||Readonly when is supported on the Desktop client only. |
|- | |- | ||
− | |valign="top"|Visible when|| | + | |valign="top"|Visible when||Visible when is supported on the Desktop client only. |
|- | |- | ||
− | |valign="top"|Page transition effect||The | + | |valign="top"|Page transition effect||The Page transition effect is ignored on the Desktop client. |
|- | |- | ||
− | |valign="top"|Display orientation||Display | + | |valign="top"|Display orientation||The Display orientation is ignored on the Desktop client and fixed orientation devices. |
|- | |- | ||
− | |valign="top"| | + | |valign="top"|Hidden at runtime||- |
|- | |- | ||
− | |valign="top"|Apply rules on parent change||Apply | + | |valign="top"|Only visible when editing||- |
+ | |- | ||
+ | |valign="top"|Apply rules on change||Apply rules on change is supported on the Desktop client only. | ||
+ | |- | ||
+ | |valign="top"|Apply rules on parent change||valign="top"|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|USE ... ALIAS ...]] command and the [[ALIAS()]] function. For user-defined commands, see the [[ALIAS]] command. | ||
+ | |||
+ | ==Alias Name Attribute== | ||
+ | The '''Alias name''' attribute (aliasid) is supported by [[Page Attributes|Pages]], [[:Category:Attributes#Section_Attributes|Sections]], [[:Category:Attributes#Gadget_Attributes|Gadgets]], [[Field Attributes|Fields]], and [[Advanced Canvas Control Attributes|Advanced Canvas Controls]]. | ||
+ | |||
+ | ==Example== | ||
+ | I have created an App with 3 pages: ''startpage'', ''page1'' and ''page3''. | ||
+ | |||
+ | Here you can see ''startpage'' with a [[Calendar Section Attributes|Calendar Section]]. | ||
+ | |||
+ | In the [[:Category:App Inspector|App Inspector]], you can see the '''Pages Hierarchy''' tab showing the 3 pages. | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasid1.png|800px|left|border|link={{filepath:l56_aliasid1.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | This is ''page1'' ('''Name''' attribute). It is for use on desktop clients. | ||
+ | |||
+ | Note that only '''Desktop''' is checked in the '''UI Presentation Rules'''. | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasidpage1.png|800px|left|border|link={{filepath:l56_aliasidpage1.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | 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''. | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasidpage3.png|800px|left|border|link={{filepath:l56_aliasidpage3.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Back to ''startpage'' ('''Name''' attribute). | ||
+ | |||
+ | Its [[Calendar Section Attributes|Calendar Section]] has a [[Section Menus|Section Menu]] and the JavaScript [[Section_Menus#Custom_Delegate:_Custom_section_menu|Custom section menu delegate]] can be seen in the floating [[Script Editor]]. | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasidmenu.png|800px|left|border|link={{filepath:l56_aliasidmenu.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | When the ''Customer Accounts'' menu option is clicked, the [[Using the showdocument() function and Lianja.showDocument() method|Lianja.showDocument method]] is used to switch to ''page1''. | ||
+ | |||
+ | <code lang="javascript"> | ||
+ | //////////////////////////////////////////////////////////////// | ||
+ | // Event delegate for 'customsectionmenu' event | ||
+ | function startpage_section1_customsectionmenu(cMenuitemSelected) | ||
+ | { | ||
+ | if (cMenuitemSelected == "Customer Accounts") | ||
+ | { | ||
+ | Lianja.showDocument("page:page1"); | ||
+ | } else if (cMenuitemSelected == "Employees") { | ||
+ | messageBox("Employees selected"); | ||
+ | } else { | ||
+ | messageBox("Products selected"); | ||
+ | } | ||
+ | }; | ||
+ | </code> | ||
+ | |||
+ | So, here's the App running in [[Understanding_Live_Preview#Desktop_Apps|Desktop App View]]. | ||
+ | |||
+ | Clicking the ''Customer Accounts'' menu option will call the function ''startpage_section2_customsectionmenu'' and pass the argument "Customer Accounts". | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasidruntime.png|800px|left|border|link={{filepath:l56_aliasidruntime.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Which selects ''page1'', the Desktop page. | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasidruntime2.png|800px|left|border|link={{filepath:l56_aliasidruntime2.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Now here's the App running on a phone. | ||
+ | |||
+ | Touching the ''Customer Accounts'' menu option will call the function ''startpage_section2_customsectionmenu'' and pass the argument "Customer Accounts" as in [[Understanding_Live_Preview#Desktop_Apps|Desktop App View]]. | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasidmobstart.png|322px|left|border|link={{filepath:l56_aliasidmobstart.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | 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. | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasidmobpage1.png|322px|left|border|link={{filepath:l56_aliasidmobpage1.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | 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. | ||
+ | |||
+ | [[{{ns:file}}:l56_aliasidweb.png|800px|left|border|link={{filepath:l56_aliasidweb.png}}|Using UI Element Alias Names]] | ||
+ | <br clear=all> | ||
+ | |||
+ | =Responsive UI= | ||
+ | From Lianja v5.4 Page, Section and Formitem breakpoint height and width Attributes are available for improved responsive UI handling in Web and Mobile Apps. | ||
+ | |||
+ | These can be seen in the example_webapp1 demo App (Lianja Tablet Web UI Demo) included in the distribution. | ||
+ | |||
+ | Here is the example_webapp1 App running in the browser with its standard layout: | ||
+ | |||
+ | [[{{ns:file}}:uip_example_webapp1a.png|800px|left|border|link={{filepath:uip_example_webapp1a.png}}|Browser: example_webapp1]] | ||
+ | <br clear=all> | ||
+ | |||
+ | Resizing the browser window triggers the height and width breakpoints set in the Attributes (detailed below) and the UI adjusts accordingly: | ||
+ | |||
+ | [[{{ns:file}}:uip_example_webapp1b.png|800px|left|border|link={{filepath:uip_example_webapp1b.png}}|Browser: example_webapp1 Resized]] | ||
+ | <br clear=all> | ||
+ | |||
+ | ==Navigation Panel Responsive UI width breakpoint== | ||
+ | The Navigation Panel responsive UI width breakpoint in Web/Mobile Apps. | ||
+ | |||
+ | * The [[Page_Attributes#Navigation_panel|Navigation Panel]] display will automatically collapse (icons only) or expand (all specified icons and captions) when the breakpoint width is reached on window resizing or mobile viewport size. | ||
+ | * Specify the width breakpoint as the number of pixels. | ||
+ | * Applies to [[Page Attributes|Pages]]. | ||
+ | |||
+ | ==Search Panel Responsive UI width breakpoint== | ||
+ | The Search Panel responsive UI width breakpoint in Web/Mobile Apps. | ||
+ | |||
+ | * The [[Section Search Panels|Search Panel]] will automatically be shown or hidden when the breakpoint width is reached on window resizing or mobile viewport size. | ||
+ | * Specify the width breakpoint as the number of pixels. | ||
+ | * Applies to [[:Category:Attributes#Sections|Sections]]. | ||
+ | |||
+ | ==Menu Responsive UI width breakpoint== | ||
+ | The Menu responsive UI width breakpoint in Web/Mobile Apps. | ||
+ | |||
+ | * The [[Section Menus|Menu]] will automatically be expanded or collapsed when the breakpoint width is reached on window resizing or mobile viewport size. | ||
+ | * Specify the width breakpoint as the number of pixels. | ||
+ | * Applies to [[:Category:Attributes#Sections|Sections]]. | ||
+ | |||
+ | ==Responsive UI form width breakpoint== | ||
+ | The Form Section responsive UI width breakpoint in Web/Mobile Apps. | ||
+ | |||
+ | * A horizontal scrollbar will automatically be shown or hidden when the breakpoint width is reached on window resizing or mobile viewport size. | ||
+ | * Specify the width breakpoint as the number of pixels. | ||
+ | * Applies to [[Form Section Attributes|Form Sections]]. | ||
+ | |||
+ | ==Responsive UI width breakpoint== | ||
+ | The responsive UI width breakpoint in Web/Mobile Apps. | ||
+ | |||
+ | * The UI element will automatically be shown or hidden when the breakpoint width is reached on window resizing or mobile viewport size. | ||
+ | * Specify the width breakpoint as the number of pixels. | ||
+ | * Applies to [[:Category:Attributes#Sections|Sections]], [[:Category:Attributes#Gadget_Attributes|Gadgets]], [[Field Attributes|Fields]] and [[Advanced Canvas Control Attributes|Advanced Canvas Controls]]. | ||
+ | |||
+ | ==Responsive UI height breakpoint== | ||
+ | The responsive UI height breakpoint in Web/Mobile Apps. | ||
+ | |||
+ | * The UI element will automatically be shown or hidden when the breakpoint height is reached on window resizing or mobile viewport size. | ||
+ | * Specify the height breakpoint as the number of pixels. | ||
+ | * Applies to [[:Category:Attributes#Sections|Sections]], [[:Category:Attributes#Gadget_Attributes|Gadgets]], [[Field Attributes|Fields]] and [[Advanced Canvas Control Attributes|Advanced Canvas Controls]]. | ||
+ | |||
+ | ==Responsive UI minimum width== | ||
+ | The responsive UI minimum item width in Web/Mobile Apps. | ||
+ | |||
+ | * A horizontal scrollbar will automatically be shown or hidden on the containing [[Form Section Attributes|Form Section]] when the breakpoint width is reached on window resizing or mobile viewport size. | ||
+ | * Specify the minimum item width as the number of pixels. | ||
+ | * Applies to [[:Category:Attributes#Gadget_Attributes|Gadgets]], [[Field Attributes|Fields]] and [[Advanced Canvas Control Attributes|Advanced Canvas Controls]]. | ||
+ | |||
+ | ==TabBar Responsive UI width breakpoint== | ||
+ | The TabBar responsive UI width breakpoint in Web/Mobile Apps. | ||
+ | [[{{ns:file}}:uip_tabbar.png|321px|left|link={{filepath:uip_tabbar.png}}|TabBar Responsive UI]] | ||
+ | <br clear=all> | ||
+ | |||
+ | * The [[TabView Section Attributes|TabView Section TabBar]] will automatically be expanded or collapsed when the breakpoint width is reached on window resizing or mobile viewport size. | ||
+ | * Specify the width breakpoint as the number of pixels. | ||
+ | * Applies to [[TabView Section Attributes|TabView Sections]]. | ||
+ | * From v5.5. | ||
+ | * See the Admin Console App (lianjacloud_admin) for an example of this. | ||
+ | |||
[[Category:Attribute Categories]] | [[Category:Attribute Categories]] | ||
+ | [[Category:Pages]] | ||
+ | [[Category:Sections]] | ||
+ | [[Category:Formitems]] | ||
+ | [[Category:App Settings]] |
Revision as of 10:05, 12 April 2024
Contents
- 1 Overview
- 2 Attributes
- 2.1 Standalone
- 2.2 Form
- 2.3 Desktop
- 2.4 Web
- 2.5 Tablet
- 2.6 Phone
- 2.7 Use mobile navigation bar
- 2.8 UI States
- 2.9 Initial UI state
- 2.10 Readonly when
- 2.11 Visible when
- 2.12 Page transition effect
- 2.13 Display orientation
- 2.14 Hidden at runtime
- 2.15 Only visible when editing
- 2.16 Apply rules on change
- 2.17 Apply rules on parent change
- 2.18 Notes on Client Support
- 3 Using UI Element Alias Names
- 4 Responsive UI
- 4.1 Navigation Panel Responsive UI width breakpoint
- 4.2 Search Panel Responsive UI width breakpoint
- 4.3 Menu Responsive UI width breakpoint
- 4.4 Responsive UI form width breakpoint
- 4.5 Responsive UI width breakpoint
- 4.6 Responsive UI height breakpoint
- 4.7 Responsive UI minimum width
- 4.8 TabBar Responsive UI width breakpoint
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](/doc/images/thumb/3/31/Bm-noteicon.png/40px-Bm-noteicon.png)
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.
Attributes
Standalone
The Standalone attribute determines whether this App can be run as a Standalone executable on Windows.
- From v7.0.
- See Standalone Executables on Windows for full details.
Form
The Form attribute determines whether this App should be run as a Form.
- See Working with Forms in Lianja for full details.
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), Preview live in browser is disabled.
Tablet
The Tablet attribute determines whether this element should be included in a Tablet client or not.
- Note that if the App's Web attribute is unchecked (False), Preview live in browser is disabled.
Phone
The Phone attribute determines whether this element should be included in a Phone client or not.
- Note that if the App's Web attribute is unchecked (False), Preview live in browser is disabled.
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.
- See UI States.
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).
- Applies to Pages only.
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.
Only visible when editing
The Only visible when editing attribute determines whether this grid column is hidden at runtime except when the record is being edited (True | False). Default is False. From v6.0.
- Applies to Grid Columns.
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 | - |
Only visible when editing | - |
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
The Alias name attribute (aliasid) is supported by Pages, Sections, Gadgets, Fields, and Advanced Canvas Controls.
Example
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.
This is page1 (Name attribute). It is for use on desktop clients.
Note that only Desktop is checked in the UI Presentation Rules.
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.
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_section1_customsectionmenu(cMenuitemSelected) { if (cMenuitemSelected == "Customer Accounts") { Lianja.showDocument("page:page1"); } else if (cMenuitemSelected == "Employees") { messageBox("Employees selected"); } else { messageBox("Products selected"); } };
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".
Which selects page1, the Desktop page.
Now here's the App running on a phone.
Touching the Customer Accounts menu option will call the function startpage_section2_customsectionmenu and pass the argument "Customer Accounts" as in Desktop App View.
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.
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.
Responsive UI
From Lianja v5.4 Page, Section and Formitem breakpoint height and width Attributes are available for improved responsive UI handling in Web and Mobile Apps.
These can be seen in the example_webapp1 demo App (Lianja Tablet Web UI Demo) included in the distribution.
Here is the example_webapp1 App running in the browser with its standard layout:
Resizing the browser window triggers the height and width breakpoints set in the Attributes (detailed below) and the UI adjusts accordingly:
The Navigation Panel responsive UI width breakpoint in Web/Mobile Apps.
- The Navigation Panel display will automatically collapse (icons only) or expand (all specified icons and captions) when the breakpoint width is reached on window resizing or mobile viewport size.
- Specify the width breakpoint as the number of pixels.
- Applies to Pages.
Search Panel Responsive UI width breakpoint
The Search Panel responsive UI width breakpoint in Web/Mobile Apps.
- The Search Panel will automatically be shown or hidden when the breakpoint width is reached on window resizing or mobile viewport size.
- Specify the width breakpoint as the number of pixels.
- Applies to Sections.
Menu Responsive UI width breakpoint
The Menu responsive UI width breakpoint in Web/Mobile Apps.
- The Menu will automatically be expanded or collapsed when the breakpoint width is reached on window resizing or mobile viewport size.
- Specify the width breakpoint as the number of pixels.
- Applies to Sections.
Responsive UI form width breakpoint
The Form Section responsive UI width breakpoint in Web/Mobile Apps.
- A horizontal scrollbar will automatically be shown or hidden when the breakpoint width is reached on window resizing or mobile viewport size.
- Specify the width breakpoint as the number of pixels.
- Applies to Form Sections.
Responsive UI width breakpoint
The responsive UI width breakpoint in Web/Mobile Apps.
- The UI element will automatically be shown or hidden when the breakpoint width is reached on window resizing or mobile viewport size.
- Specify the width breakpoint as the number of pixels.
- Applies to Sections, Gadgets, Fields and Advanced Canvas Controls.
Responsive UI height breakpoint
The responsive UI height breakpoint in Web/Mobile Apps.
- The UI element will automatically be shown or hidden when the breakpoint height is reached on window resizing or mobile viewport size.
- Specify the height breakpoint as the number of pixels.
- Applies to Sections, Gadgets, Fields and Advanced Canvas Controls.
Responsive UI minimum width
The responsive UI minimum item width in Web/Mobile Apps.
- A horizontal scrollbar will automatically be shown or hidden on the containing Form Section when the breakpoint width is reached on window resizing or mobile viewport size.
- Specify the minimum item width as the number of pixels.
- Applies to Gadgets, Fields and Advanced Canvas Controls.
TabBar Responsive UI width breakpoint
The TabBar responsive UI width breakpoint in Web/Mobile Apps.
- The TabView Section TabBar will automatically be expanded or collapsed when the breakpoint width is reached on window resizing or mobile viewport size.
- Specify the width breakpoint as the number of pixels.
- Applies to TabView Sections.
- From v5.5.
- See the Admin Console App (lianjacloud_admin) for an example of this.