Difference between revisions of "Treeview Gadget Attributes"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) (→UI Presentation Rules) |
||
(40 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | '' | + | =Overview= |
+ | Treeview Gadgets can be loaded into a [[Form Section Attributes|Form Section]]. They are data-bound tree grids that allow you to drill down through levels of hierarchical nodes. | ||
+ | {{DISPLAYTITLE:TreeView Gadget}} | ||
+ | [[File:treeview_gadget.png|middle|link=]] | ||
+ | |||
+ | You build Apps in Lianja App Builder visually using the [[:Category:Page_Builder|Page Builder]]. | ||
+ | |||
+ | If you have not yet done so please read [[Understanding_the_Lianja_App_Architecture|Understanding the Lianja Architecture]] and also [[Lianja_is_all_about_ART|Understanding ART]] to better understand this article. | ||
+ | |||
+ | An App consists of pages. Pages are made up of Sections. Form sections are made up of FormItems. We call these collectively "UI Elements" or "Visual Elements". | ||
+ | |||
+ | ==Setting Attributes Declaratively== | ||
+ | |||
+ | You adjust the appearance and behavior of each UI Element in the '''Attributes''' Tab of the [[:Category:App_Inspector|App Inspector]]. | ||
+ | |||
+ | [[{{ns:file}}:bm-attributes.png|800px|left|border|link={{filepath:bm-attributes.png}}|Attributes]] | ||
+ | <br clear=all> | ||
+ | |||
+ | The attributes available consist of some common ones as well as some specific to the UI Element being inspected. | ||
+ | |||
+ | ==Getting and Setting Attributes Programmatically== | ||
+ | The '''setAttribute(name, value)''' method can be used to set the value of an Attribute: | ||
+ | |||
+ | <pre>Lianja.get("pageid.sectionid.fieldid").setAttribute("caption","Formitem1")</pre> | ||
+ | |||
+ | Note: on the desktop, the shortened form '''setAttr(name,value)''' is also available. | ||
+ | |||
+ | The '''getAttribute(name)''' method can be used to get the value of an Attribute: | ||
+ | |||
+ | <pre>cTitle = Lianja.get("pageid.sectionid.fieldid").getAttribute("caption")</pre> | ||
+ | |||
+ | Note: on the desktop, the shortened form '''getAttr(name)''' is also available. | ||
+ | |||
+ | =See Also= | ||
+ | [[TreeView Options]], [[TreeView Section Attributes]] | ||
+ | |||
+ | Demo Apps (included in the Lianja App Builder distribution): | ||
+ | * TreeViewGadget App (example_treeviewgadget) | ||
+ | |||
+ | =Attributes= | ||
==Details== | ==Details== | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width=" | + | !width="45%"|Description |
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Name|Name]]||The name for this gadget (unique to the section) | ||
+ | |valign="top"|id||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Full name|Full name]]||The full name for this gadget including its parent page and section, e.g. page1.section1.field1 | ||
+ | |valign="top"|fullid||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Alias name|Alias name]]||The alias name for this gadget | ||
+ | |valign="top"|aliasid||Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#App Doc|App Doc]]||The App Doc file for this gadget. This will be included in the [[App Doc]] when it is generated. | ||
+ | |valign="top"|appdoc||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Tag|Tag]]||The tag for this gadget | ||
+ | |valign="top"|tag||Character | ||
+ | |- | ||
+ | |valign="top"|[[MetaTypes|Meta types]]||A comma separated list of metatype names | ||
+ | |valign="top"|metatypes||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Custom Props|Custom Props]]||A ';' separated list of custom prop key pairs, e.g. name=barry;company=lianja<br>From v5.3. | ||
+ | |valign="top"|customprops||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Type|Type]]||The type of control: Gadget (readonly) |
+ | |valign="top"|type||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Gadget type|Gadget type]]||The type of gadget: treeview (readonly) |
+ | |valign="top"|gadgetType||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Margin|Margin]]||Margin size around the gadget |
+ | |valign="top"|gadgetMargin||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Fixed width|Fixed width]]||Fixed gadget width in pixels |
+ | |valign="top"|gadgetFixedWidth||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Fixed height|Fixed height]]||Fixed gadget height in pixels |
+ | |valign="top"|gadgetFixedHeight||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Inline|Inline]]||Render the gadget inline rather than it its own column (True | False) |
+ | |valign="top"|gadgetInline||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Stretch width|Stretch width]]||Auto stretch the width of the gadget into the width of the section (True | False) |
+ | |valign="top"|gadgetStretchWidth||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Desktop Margin Top|Desktop Margin Top]]||Adjust the top margin when laying out an inline gadget to line it up with others horizontally in desktop Apps. From v5.3. |
+ | |valign="top"|gadgetpaddingtop||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Details Attributes#Web Margin Top|Web Margin Top]]||Adjust the top margin when laying out an inline gadget to line it up with others horizontally in Web/Mobile Apps. From v5.3. |
+ | |valign="top"|gadgetpaddingtopweb||valign="top"|Int | ||
|- | |- | ||
|} | |} | ||
Line 28: | Line 99: | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width=" | + | !width="45%"|Description |
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
|- | |- | ||
− | |valign="top"|Absolute||Enable or disable absolute positioning (True | False) | + | |valign="top"|[[Geometry#Absolute|Absolute]]||Enable or disable absolute positioning (True | False) |
+ | |valign="top"|absolutePosition||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|Top||Top position in pixels | + | |valign="top"|[[Geometry#Top|Top]]||Top position in pixels |
+ | |valign="top"|absolutePositionY||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"|Left||Left position in pixels | + | |valign="top"|[[Geometry#Left|Left]]||Left position in pixels |
+ | |valign="top"|absolutePositionX||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"|Width||Width in pixels | + | |valign="top"|[[Geometry#Width|Width]]||Width in pixels |
+ | |valign="top"|absolutePositionWidth||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"|Height||Height in pixels | + | |valign="top"|[[Geometry#Height|Height]]||Height in pixels |
+ | |valign="top"|absolutePositionHeight||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"|CSS style||CSS style (separate attributes with ; or use app:/filename.css) | + | |valign="top"|[[CSS|CSS style]]||CSS style (separate attributes with ; or use app:/filename.css) |
+ | |valign="top"|cssStyle||valign="top"|Character | ||
|- | |- | ||
|} | |} | ||
Line 47: | Line 126: | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width=" | + | !width="45%"|Description |
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
|- | |- | ||
− | |valign="top"|Caption||The caption for the gadget | + | |valign="top"|[[Formitem Appearance#Caption|Caption]]||The caption for the gadget |
+ | |valign="top"|caption||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Formitem Appearance#Caption CSS style|Caption CSS style]]||The gadget caption CSS style (separate attributes with ';' or use ''app:/''filename.css or specify CSS classes separated by spaces). | ||
+ | |valign="top"|captionCSSstyle||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Colors|Background color]]||The background color for the caption | |valign="top"|[[Colors|Background color]]||The background color for the caption | ||
+ | |valign="top"|backColor||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Colors|Foreground color]]||The foreground color for the caption | |valign="top"|[[Colors|Foreground color]]||The foreground color for the caption | ||
+ | |valign="top"|foreColor||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|Font||The font for the caption | + | |valign="top"|[[Fonts|Font]]||The font for the caption |
+ | |valign="top"|captionFont||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|Icon||The image for the caption (png | jpg | gif).<br>Use app:/imagename.ext for app specific images. | + | |valign="top"|[[Formitem Appearance#Icon|Icon]]||The image for the caption (png | jpg | gif).<br>Use app:/imagename.ext for app specific images. |
+ | |valign="top"|captionIcon||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|Border width||The caption border width | + | |valign="top"|[[Formitem Appearance#Border width|Border width]]||The caption border width |
+ | |valign="top"|captionBorderWidth||valign="top"|Int | ||
|- | |- | ||
|valign="top"|[[Colors|Border color]]||The caption border color | |valign="top"|[[Colors|Border color]]||The caption border color | ||
+ | |valign="top"|captionBorderColor||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|Transparency||Specify a transparency percentage from 0 to 100 | + | |valign="top"|[[Shading and Transparency|Transparency]]||Specify a transparency percentage from 0 to 100 |
+ | |valign="top"|transparency||valign="top"|Int | ||
|- | |- | ||
|valign="top"|[[Gradients#Gradient colors|Gradient colors]]||Render the caption color as a gradient (True | False) | |valign="top"|[[Gradients#Gradient colors|Gradient colors]]||Render the caption color as a gradient (True | False) | ||
+ | |valign="top"|captionGradient||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Gradients#Gradient type|Gradient type]]||Specify the gradient type | |valign="top"|[[Gradients#Gradient type|Gradient type]]||Specify the gradient type | ||
+ | |valign="top"|captionGradientType||valign="top"|Int | ||
|- | |- | ||
|valign="top"|[[Gradients#Gradient start color|Gradient start color]]||Gradient start color | |valign="top"|[[Gradients#Gradient start color|Gradient start color]]||Gradient start color | ||
+ | |valign="top"|captionFromColor||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Gradients#Gradient end color|Gradient end color]]||Gradient end color | |valign="top"|[[Gradients#Gradient end color|Gradient end color]]||Gradient end color | ||
+ | |valign="top"|captionToColor||valign="top"|Character | ||
|- | |- | ||
|} | |} | ||
Line 78: | Line 174: | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width=" | + | !width="45%"|Description |
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
|- | |- | ||
− | |valign="top"|Tree items||A list of items to display in the Tree, e.g.<br>Static list of choices:<br>Apples,Oranges,Bananas<br>Dynamic list of choices from a table:<br>@tablename,expression<br>Dynamic list of choices from a table (SQL SELECT):<br>select expression from tablename | + | |valign="top"|[[Data Attributes#Tree items|Tree items]]||A list of items to display in the Tree, e.g.<br>Static list of choices:<br>Apples,Oranges,Bananas<br>Dynamic list of choices from a table:<br>@tablename,expression<br>Dynamic list of choices from a table (SQL SELECT):<br>select expression from tablename |
+ | |valign="top"|choiceList||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|Columns to group by||The number of columns to group by to form the tree hierarchy. When grouping data, use a SQL SELECT ORDER BY clause. | + | |valign="top"|[[Data Attributes#Columns to group by|Columns to group by]]||The number of columns to group by to form the tree hierarchy. When grouping data, use a SQL SELECT ORDER BY clause. |
+ | |valign="top"|treeGroupByColumns||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"|Selection column||The column to substitute into the Click/DblClick delegate. Use {} in the delegate where you want the text from this column to be placed. | + | |valign="top"|[[Data Attributes#Selection column|Selection column]]||The column to substitute into the Click/DblClick delegate. Use {} in the delegate where you want the text from this column to be placed. |
+ | |valign="top"|treeViewSelectionColumn||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"|CSS style||CSS style for the gadget (separate attributes with ; or use app:/filename.css) | + | |valign="top"|[[CSS|CSS style]]||CSS style for the gadget (separate attributes with ; or use app:/filename.css) |
+ | |valign="top"|gadgetCssStyle||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|Column icons||A comma separated list of column icons. | + | |valign="top"|[[Data Attributes#Column icons|Column icons]]||A comma separated list of column icons. |
+ | |valign="top"|treeColumnIcons||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|Hide column headers||Hide the column headers (True | False) | + | |valign="top"|[[Data Attributes#Hide column headers|Hide column headers]]||Hide the column headers (True | False) |
+ | |valign="top"|treeViewHideColumnHeaders||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Data Attributes#Header labels|Header labels]]||A comma separated list of header labels |
+ | |valign="top"|headerLabels||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Data Attributes#Column widths|Column widths]]||A comma separated list of column widths |
+ | |valign="top"|columnWidths||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Data Attributes#Column alignments|Column alignments]]||A comma separated list of column alignments e.g. left,right,center |
+ | |valign="top"|columnAlignments||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"| | + | |valign="top"|[[Data Attributes#Alternating row colors|Alternating row colors]]||Alternate row colors (True | False) |
+ | |valign="top"|treeViewAlternatingRowColors||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|Show indicators||Show expand/collapse indicators in the tree (True | False) | + | |valign="top"|[[Data Attributes#Row height|Row height]]||Row height for the Tree items |
+ | |valign="top"|treeViewRowHeight||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Font size|Font size]]||Font size for the Tree items | ||
+ | |valign="top"|treeViewFontSize||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Expand all|Expand all]]||Expand all Tree items when first loaded (True | False) | ||
+ | |valign="top"|treeViewExpandAll||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Expand depth|Expand depth]]||Expand all Tree items when first loaded to this depth | ||
+ | |valign="top"|treeViewExpandDepth||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Show indicators|Show indicators]]||Show expand/collapse indicators in the tree (True | False) | ||
+ | |valign="top"|treeViewShowIndicators||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Colors|Background color]]||The background color for the gadget | |valign="top"|[[Colors|Background color]]||The background color for the gadget | ||
+ | |valign="top"|gadgetBackColor||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Colors|Foreground color]]||The foreground color for the gadget | |valign="top"|[[Colors|Foreground color]]||The foreground color for the gadget | ||
+ | |valign="top"|gadgetForeColor||valign="top"|Character | ||
|- | |- | ||
|} | |} | ||
Line 111: | Line 234: | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width=" | + | !width="45%"|Description |
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
|- | |- | ||
− | |valign="top"|Hide header||Hide gadget header at runtime (True | False) | + | |valign="top"|[[Details Attributes#Hide_header|Hide header]]||Hide gadget header at runtime (True | False) |
+ | |valign="top"|gadgetHideHeader||valign="top"|Boolean | ||
|- | |- | ||
|} | |} | ||
Line 120: | Line 246: | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width=" | + | !width="45%"|Description |
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Init|Init]]||The delegate for the Init event | |valign="top"|[[Custom Delegates#Init|Init]]||The delegate for the Init event | ||
+ | |valign="top"|initAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Load|Load]]||The delegate for the Load event | |valign="top"|[[Custom Delegates#Load|Load]]||The delegate for the Load event | ||
+ | |valign="top"|loadAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Ready|Ready]]||The delegate for the Ready event | |valign="top"|[[Custom Delegates#Ready|Ready]]||The delegate for the Ready event | ||
+ | |valign="top"|readyAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Click|Click]]||The delegate for the item Clicked event | |valign="top"|[[Custom Delegates#Click|Click]]||The delegate for the item Clicked event | ||
+ | |valign="top"|ClickAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Double Click|Double Click]]||The delegate for the item Double Clicked event | |valign="top"|[[Custom Delegates#Double Click|Double Click]]||The delegate for the item Double Clicked event | ||
+ | |valign="top"|dblClickAction||valign="top"|Character | ||
|- | |- | ||
|} | |} | ||
Line 137: | Line 270: | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width=" | + | !width="45%"|Description |
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
|- | |- | ||
− | |valign="top"|Read roles||A comma separated list of roles that can read (and view) the data | + | |valign="top"|[[Users and Roles|Read roles]]||A comma separated list of roles that can read (and view) the data. |
+ | |valign="top"|permRead||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|Update roles||A comma separated list of roles that can perform update operations on the data | + | |valign="top"|[[Users and Roles|Update roles]]||A comma separated list of roles that can perform update operations on the data. |
+ | |valign="top"|permUpdate||valign="top"|Character | ||
|- | |- | ||
|} | |} | ||
Line 148: | Line 285: | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
!width="20%"|Attribute | !width="20%"|Attribute | ||
− | !width=" | + | !width="45%"|Description |
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
|- | |- | ||
− | |valign="top"|[[UI Presentation Rules#Desktop|Desktop]]||Include this gadget in a Desktop client (True | False). | + | |valign="top"|[[UI Presentation Rules#Desktop|Desktop]]||Include this gadget in a Desktop client (True | False). |
+ | |valign="top"|desktopUI||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Web|Web]]||Include this gadget in a Web client (True | False). | |valign="top"|[[UI Presentation Rules#Web|Web]]||Include this gadget in a Web client (True | False). | ||
+ | |valign="top"|webUI||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Tablet|Tablet]]||Include this gadget in a Tablet client (True | False). | |valign="top"|[[UI Presentation Rules#Tablet|Tablet]]||Include this gadget in a Tablet client (True | False). | ||
+ | |valign="top"|tabletUI||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Phone|Phone]]||Include this gadget in a Phone client (True | False). | |valign="top"|[[UI Presentation Rules#Phone|Phone]]||Include this gadget in a Phone client (True | False). | ||
+ | |valign="top"|mobileUI||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#UI States|UI States]]||UI states that affect this gadget. Specify multiple states as a comma separated list. | |valign="top"|[[UI Presentation Rules#UI States|UI States]]||UI states that affect this gadget. Specify multiple states as a comma separated list. | ||
+ | |valign="top"|state||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Initial UI state|Initial UI state]]||The initial UI state for this gadget. | |valign="top"|[[UI Presentation Rules#Initial UI state|Initial UI state]]||The initial UI state for this gadget. | ||
+ | |valign="top"|uiStateInit||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Readonly when|Readonly when]]||Gadget is readonly at runtime if specified expression evaluates to true. | |valign="top"|[[UI Presentation Rules#Readonly when|Readonly when]]||Gadget is readonly at runtime if specified expression evaluates to true. | ||
+ | |valign="top"|readonlyWhen||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Visible when|Visible when]]||Gadget is visible at runtime if specified expression evaluates to true. | |valign="top"|[[UI Presentation Rules#Visible when|Visible when]]||Gadget is visible at runtime if specified expression evaluates to true. | ||
+ | |valign="top"|visibleWhen||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[UI Presentation Rules#Hidden at runtime|Hidden at runtime]]||Hide this formitem at runtime (True | False). | ||
+ | |valign="top"|hiddenAtRuntime||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Display orientation|Display orientation]]||Display depending on mobile device orientation for Tablets and Phones. (Always | Portrait | Landscape) | |valign="top"|[[UI Presentation Rules#Display orientation|Display orientation]]||Display depending on mobile device orientation for Tablets and Phones. (Always | Portrait | Landscape) | ||
+ | |valign="top"|displayOrientation||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Apply rules on change|Apply rules on change]]||Apply UI presentation rules (Visible when and Readonly when) when data is changed interactively or when navigating records (True | False). | |valign="top"|[[UI Presentation Rules#Apply rules on change|Apply rules on change]]||Apply UI presentation rules (Visible when and Readonly when) when data is changed interactively or when navigating records (True | False). | ||
+ | |valign="top"|applyRulesOnChange||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[UI Presentation Rules#Responsive UI width breakpoint|Responsive UI width breakpoint]]||The responsive UI visibility width breakpoint in Web/Mobile Apps. From v5.4. | ||
+ | |valign="top"|responsivewidthvisibility||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[UI Presentation Rules#Responsive UI height breakpoint|Responsive UI height breakpoint]]||The responsive UI visibility height breakpoint in Web/Mobile Apps. From v5.4. | ||
+ | |valign="top"|responsiveheightvisibility||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[UI Presentation Rules#Responsive UI minimum width|Responsive UI minimum width]]||The responsive UI minimum width in Web/Mobile Apps. From v5.4. | ||
+ | |valign="top"|responsiveminwidth||valign="top"|Int | ||
|- | |- | ||
|} | |} | ||
[[Category:Attributes|4 Treeview Gadget]] | [[Category:Attributes|4 Treeview Gadget]] | ||
+ | [[Category:Formitems]] |
Latest revision as of 04:25, 1 October 2020
Contents
Overview
Treeview Gadgets can be loaded into a Form Section. They are data-bound tree grids that allow you to drill down through levels of hierarchical nodes.
You build Apps in Lianja App Builder visually using the Page Builder.
If you have not yet done so please read Understanding the Lianja Architecture and also Understanding ART to better understand this article.
An App consists of pages. Pages are made up of Sections. Form sections are made up of FormItems. We call these collectively "UI Elements" or "Visual Elements".
Setting Attributes Declaratively
You adjust the appearance and behavior of each UI Element in the Attributes Tab of the App Inspector.
The attributes available consist of some common ones as well as some specific to the UI Element being inspected.
Getting and Setting Attributes Programmatically
The setAttribute(name, value) method can be used to set the value of an Attribute:
Lianja.get("pageid.sectionid.fieldid").setAttribute("caption","Formitem1")
Note: on the desktop, the shortened form setAttr(name,value) is also available.
The getAttribute(name) method can be used to get the value of an Attribute:
cTitle = Lianja.get("pageid.sectionid.fieldid").getAttribute("caption")
Note: on the desktop, the shortened form getAttr(name) is also available.
See Also
TreeView Options, TreeView Section Attributes
Demo Apps (included in the Lianja App Builder distribution):
- TreeViewGadget App (example_treeviewgadget)
Attributes
Details
Attribute | Description | Name | Type |
---|---|---|---|
Name | The name for this gadget (unique to the section) | id | Character |
Full name | The full name for this gadget including its parent page and section, e.g. page1.section1.field1 | fullid | Character |
Alias name | The alias name for this gadget | aliasid | Character |
App Doc | The App Doc file for this gadget. This will be included in the App Doc when it is generated. | appdoc | Character |
Tag | The tag for this gadget | tag | Character |
Meta types | A comma separated list of metatype names | metatypes | Character |
Custom Props | A ';' separated list of custom prop key pairs, e.g. name=barry;company=lianja From v5.3. |
customprops | Character |
Type | The type of control: Gadget (readonly) | type | Character |
Gadget type | The type of gadget: treeview (readonly) | gadgetType | Character |
Margin | Margin size around the gadget | gadgetMargin | Int |
Fixed width | Fixed gadget width in pixels | gadgetFixedWidth | Int |
Fixed height | Fixed gadget height in pixels | gadgetFixedHeight | Int |
Inline | Render the gadget inline rather than it its own column (True | False) | gadgetInline | Boolean |
Stretch width | Auto stretch the width of the gadget into the width of the section (True | False) | gadgetStretchWidth | Boolean |
Desktop Margin Top | Adjust the top margin when laying out an inline gadget to line it up with others horizontally in desktop Apps. From v5.3. | gadgetpaddingtop | Int |
Web Margin Top | Adjust the top margin when laying out an inline gadget to line it up with others horizontally in Web/Mobile Apps. From v5.3. | gadgetpaddingtopweb | Int |
Geometry
Attribute | Description | Name | Type |
---|---|---|---|
Absolute | Enable or disable absolute positioning (True | False) | absolutePosition | Boolean |
Top | Top position in pixels | absolutePositionY | Int |
Left | Left position in pixels | absolutePositionX | Int |
Width | Width in pixels | absolutePositionWidth | Int |
Height | Height in pixels | absolutePositionHeight | Int |
CSS style | CSS style (separate attributes with ; or use app:/filename.css) | cssStyle | Character |
Caption
Attribute | Description | Name | Type |
---|---|---|---|
Caption | The caption for the gadget | caption | Character |
Caption CSS style | The gadget caption CSS style (separate attributes with ';' or use app:/filename.css or specify CSS classes separated by spaces). | captionCSSstyle | Character |
Background color | The background color for the caption | backColor | Character |
Foreground color | The foreground color for the caption | foreColor | Character |
Font | The font for the caption | captionFont | Character |
Icon | The image for the caption (png | jpg | gif). Use app:/imagename.ext for app specific images. |
captionIcon | Character |
Border width | The caption border width | captionBorderWidth | Int |
Border color | The caption border color | captionBorderColor | Character |
Transparency | Specify a transparency percentage from 0 to 100 | transparency | Int |
Gradient colors | Render the caption color as a gradient (True | False) | captionGradient | Boolean |
Gradient type | Specify the gradient type | captionGradientType | Int |
Gradient start color | Gradient start color | captionFromColor | Character |
Gradient end color | Gradient end color | captionToColor | Character |
Data
Attribute | Description | Name | Type |
---|---|---|---|
Tree items | A list of items to display in the Tree, e.g. Static list of choices: Apples,Oranges,Bananas Dynamic list of choices from a table: @tablename,expression Dynamic list of choices from a table (SQL SELECT): select expression from tablename |
choiceList | Character |
Columns to group by | The number of columns to group by to form the tree hierarchy. When grouping data, use a SQL SELECT ORDER BY clause. | treeGroupByColumns | Int |
Selection column | The column to substitute into the Click/DblClick delegate. Use {} in the delegate where you want the text from this column to be placed. | treeViewSelectionColumn | Int |
CSS style | CSS style for the gadget (separate attributes with ; or use app:/filename.css) | gadgetCssStyle | Character |
Column icons | A comma separated list of column icons. | treeColumnIcons | Character |
Hide column headers | Hide the column headers (True | False) | treeViewHideColumnHeaders | Boolean |
Header labels | A comma separated list of header labels | headerLabels | Character |
Column widths | A comma separated list of column widths | columnWidths | Character |
Column alignments | A comma separated list of column alignments e.g. left,right,center | columnAlignments | Character |
Alternating row colors | Alternate row colors (True | False) | treeViewAlternatingRowColors | Boolean |
Row height | Row height for the Tree items | treeViewRowHeight | Int |
Font size | Font size for the Tree items | treeViewFontSize | Int |
Expand all | Expand all Tree items when first loaded (True | False) | treeViewExpandAll | Boolean |
Expand depth | Expand all Tree items when first loaded to this depth | treeViewExpandDepth | Int |
Show indicators | Show expand/collapse indicators in the tree (True | False) | treeViewShowIndicators | Boolean |
Background color | The background color for the gadget | gadgetBackColor | Character |
Foreground color | The foreground color for the gadget | gadgetForeColor | Character |
Other Options
Attribute | Description | Name | Type |
---|---|---|---|
Hide header | Hide gadget header at runtime (True | False) | gadgetHideHeader | Boolean |
Custom Delegates
Attribute | Description | Name | Type |
---|---|---|---|
Init | The delegate for the Init event | initAction | Character |
Load | The delegate for the Load event | loadAction | Character |
Ready | The delegate for the Ready event | readyAction | Character |
Click | The delegate for the item Clicked event | ClickAction | Character |
Double Click | The delegate for the item Double Clicked event | dblClickAction | Character |
Permissions and Roles
Attribute | Description | Name | Type |
---|---|---|---|
Read roles | A comma separated list of roles that can read (and view) the data. | permRead | Character |
Update roles | A comma separated list of roles that can perform update operations on the data. | permUpdate | Character |
UI Presentation Rules
Attribute | Description | Name | Type |
---|---|---|---|
Desktop | Include this gadget in a Desktop client (True | False). | desktopUI | Boolean |
Web | Include this gadget in a Web client (True | False). | webUI | Boolean |
Tablet | Include this gadget in a Tablet client (True | False). | tabletUI | Boolean |
Phone | Include this gadget in a Phone client (True | False). | mobileUI | Boolean |
UI States | UI states that affect this gadget. Specify multiple states as a comma separated list. | state | Character |
Initial UI state | The initial UI state for this gadget. | uiStateInit | Character |
Readonly when | Gadget is readonly at runtime if specified expression evaluates to true. | readonlyWhen | Character |
Visible when | Gadget is visible at runtime if specified expression evaluates to true. | visibleWhen | Character |
Hidden at runtime | Hide this formitem at runtime (True | False). | hiddenAtRuntime | Boolean |
Display orientation | Display depending on mobile device orientation for Tablets and Phones. (Always | Portrait | Landscape) | displayOrientation | Character |
Apply rules on change | Apply UI presentation rules (Visible when and Readonly when) when data is changed interactively or when navigating records (True | False). | applyRulesOnChange | Boolean |
Responsive UI width breakpoint | The responsive UI visibility width breakpoint in Web/Mobile Apps. From v5.4. | responsivewidthvisibility | Int |
Responsive UI height breakpoint | The responsive UI visibility height breakpoint in Web/Mobile Apps. From v5.4. | responsiveheightvisibility | Int |
Responsive UI minimum width | The responsive UI minimum width in Web/Mobile Apps. From v5.4. | responsiveminwidth | Int |