Difference between revisions of "Canvas Section Attributes"
Yvonne.milne (Talk | contribs) (→Other Options) |
Yvonne.milne (Talk | contribs) (→Appearance) |
||
(23 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
You build Apps in Lianja App Builder visually using the [[:Category:Page_Builder|Page Builder]]. | You build Apps in Lianja App Builder visually using the [[:Category:Page_Builder|Page Builder]]. | ||
− | If you have not yet | + | 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". | 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". | ||
Line 14: | Line 14: | ||
You adjust the appearance and behavior of each UI Element in the '''Attributes''' Tab of the [[:Category:App_Inspector|App Inspector]]. | 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. | The attributes available consist of some common ones as well as some specific to the UI Element being inspected. | ||
Line 52: | Line 53: | ||
|valign="top"|[[Details Attributes#Name|Name]]||The name for this section (unique to the page) | |valign="top"|[[Details Attributes#Name|Name]]||The name for this section (unique to the page) | ||
|valign="top"|id||valign="top"|Character | |valign="top"|id||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Full name|Full name]]||The full name for this section including its parent page, e.g. page1.section1 | ||
+ | |valign="top"|fullid||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Details Attributes#Alias name|Alias name]]||The alias name for this section. | |valign="top"|[[Details Attributes#Alias name|Alias name]]||The alias name for this section. | ||
|valign="top"|aliasid||Character | |valign="top"|aliasid||Character | ||
+ | |- | ||
+ | |valign="top"|[[Dashboard Sections|Dashboard group]]||The dashboard section that this section belongs to. From v5.2. | ||
+ | |valign="top"|horizontalgroup||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Dashboard Sections|Horizontal stretch]]||The horizontal % stretch factor that this section should occupy. From v5.2. | ||
+ | |valign="top"|horizontalgroupstretchfactor||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Dashboard Sections|Vertical stretch]]||The vertical % stretch factor that this section should occupy. From v5.2. | ||
+ | |valign="top"|verticalgroupstretchfactor||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#App Doc|App Doc]]||The App Doc file for this section. This will be included in the [[App Doc]] when it is generated. | ||
+ | |valign="top"|appdoc||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Details Attributes#MetaData version|MetaData version]]||The MetaData version number. You can set this in the setupUI hook to prevent MetaData being applied multiple times. | |valign="top"|[[Details Attributes#MetaData version|MetaData version]]||The MetaData version number. You can set this in the setupUI hook to prevent MetaData being applied multiple times. | ||
Line 61: | Line 77: | ||
|valign="top"|[[MetaTypes|Meta types]]||A comma separated list of metatype names | |valign="top"|[[MetaTypes|Meta types]]||A comma separated list of metatype names | ||
|valign="top"|metatypes||valign="top"|Character | |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"|[[Details Attributes#Type|Type]]||The type of section: canvas (readonly) | |valign="top"|[[Details Attributes#Type|Type]]||The type of section: canvas (readonly) | ||
Line 112: | Line 131: | ||
|valign="top"|[[Details Attributes#Scrollable height|Scrollable height]]||The scrollable height of the Canvas inside the ScrollPanel | |valign="top"|[[Details Attributes#Scrollable height|Scrollable height]]||The scrollable height of the Canvas inside the ScrollPanel | ||
|valign="top"|minheight||valign="top"|Int | |valign="top"|minheight||valign="top"|Int | ||
+ | |- | ||
+ | |} | ||
+ | |||
+ | ==Visual Component Details== | ||
+ | {| class="wikitable" width="100%" | ||
+ | !width="20%"|Attribute | ||
+ | !width="45%"|Description | ||
+ | !width="25%"|Name | ||
+ | !width="10%"|Type | ||
+ | |- | ||
+ | |valign="top"|[[Visual_Components#Component_library_2|Component library]]||This specifies the Component library where the component will be saved. | ||
+ | |valign="top"|componentlib||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Visual_Components#Component_name|Component name]]||Save as this component name whenever the section is saved. | ||
+ | |valign="top"|componentname||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Visual_Components#Component_author|Component author]]||The author of this component. | ||
+ | |valign="top"|componentauthor||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Visual_Components#Component_version|Component version]]||The version of this component. | ||
+ | |valign="top"|componentversion||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Visual_Components#Component_description|Component description]]||The description of this component. | ||
+ | |valign="top"|componentdescription||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Visual_Components#Component_permissions|Component permissions]]||The permissions required for this component in Lianja Cloud App Builder. | ||
+ | |valign="top"|componentpermissions||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Visual_Components#Component_width|Component width]]||The width of this component when activated as a Form. | ||
+ | |valign="top"|componentwidth||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Visual_Components#Component_height|Component height]]||The height of this component when activated as a Form. | ||
+ | |valign="top"|componentheight||valign="top"|Int | ||
|- | |- | ||
|} | |} | ||
Line 169: | Line 221: | ||
|valign="top"|[[Formitem Appearance|Caption width]]||Width of the captions for fields in the section | |valign="top"|[[Formitem Appearance|Caption width]]||Width of the captions for fields in the section | ||
|valign="top"|labelWidth||valign="top"|Int | |valign="top"|labelWidth||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Section Appearance#Rounded UI|Rounded UI]]||Render the UI controls with a rounded UI for this section (True | False). From v9.4.22. | ||
+ | |valign="top"|roundedui||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Section Appearance#Border-radius|Border-radius]]||Border radius of items in the section | |valign="top"|[[Section Appearance#Border-radius|Border-radius]]||Border radius of items in the section | ||
Line 188: | Line 243: | ||
|valign="top"|hideHeaderAtRuntime||valign="top"|Boolean | |valign="top"|hideHeaderAtRuntime||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Section Header#Hide actionbar|Hide actionbar]]||Hide actionbar | + | |valign="top"|[[Section Header#Hide actionbar|Hide actionbar]]||Hide actionbar when stacked section is activated at runtime<br>(True | False) |
|valign="top"|hideActionBarAtRuntime||valign="top"|Boolean | |valign="top"|hideActionBarAtRuntime||valign="top"|Boolean | ||
|- | |- | ||
Line 196: | Line 251: | ||
|valign="top"|[[Section Header#Hide editing buttons|Hide editing buttons]]||Hide the Save/Cancel editing buttons in the section header (True | False). Don't change this unless you are handling these operations programatically. | |valign="top"|[[Section Header#Hide editing buttons|Hide editing buttons]]||Hide the Save/Cancel editing buttons in the section header (True | False). Don't change this unless you are handling these operations programatically. | ||
|valign="top"|hideEditingButtons||valign="top"|Boolean | |valign="top"|hideEditingButtons||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[Section Header#Show record count badge|Show record count badge]]||Show the record count badge in the section header (True | False). From v5.2. | ||
+ | |valign="top"|showreccount||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Section Header#Header CSS style|Header CSS style]]||CSS style (separate attributes with ; or use app:/filename.css) | |valign="top"|[[Section Header#Header CSS style|Header CSS style]]||CSS style (separate attributes with ; or use app:/filename.css) | ||
Line 229: | Line 287: | ||
|valign="top"|[[Section Header#Hide custom search icon|Hide custom search icon]]||Hide the custom search icon (True | False) | |valign="top"|[[Section Header#Hide custom search icon|Hide custom search icon]]||Hide the custom search icon (True | False) | ||
|valign="top"|hideCustomSearchIcon||valign="top"|Boolean | |valign="top"|hideCustomSearchIcon||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[Section Header#Show Custom search dialog|Show Custom search dialog]]||Show custom search dialog when custom search icon clicked (True | False) | ||
+ | |valign="top"|showcustomsearchdialog||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[Section Header#Show custom search dialog panel|Show custom search dialog panel]]||Show custom search dialog panel when custom search icon clicked<br>(True | False) | ||
+ | |valign="top"|showcustomsearchdialogpanel||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Section Header#Show info tips icon|Show info tips icon]]||Show the info tips icon in the section header (True | False) | |valign="top"|[[Section Header#Show info tips icon|Show info tips icon]]||Show the info tips icon in the section header (True | False) | ||
Line 276: | Line 340: | ||
|- | |- | ||
|valign="top"|[[Related Data#Parent section name|Parent section name]]||Name of related parent section | |valign="top"|[[Related Data#Parent section name|Parent section name]]||Name of related parent section | ||
− | |valign="top"| ||valign="top"| | + | |valign="top"|parentid||valign="top"|Character |
|- | |- | ||
|valign="top"|[[Related Data#Automatically relate|Automatically relate]]||Automatically relate the child section (True | False). If this is unchecked then you need to manually relate it in the parentdatachanged delegate. | |valign="top"|[[Related Data#Automatically relate|Automatically relate]]||Automatically relate the child section (True | False). If this is unchecked then you need to manually relate it in the parentdatachanged delegate. | ||
Line 282: | Line 346: | ||
|- | |- | ||
|valign="top"|[[Related Data#Parent key|Parent key]]||Parent key | |valign="top"|[[Related Data#Parent key|Parent key]]||Parent key | ||
− | |valign="top"| ||valign="top"| | + | |valign="top"|parentKeyExpr||valign="top"|Character |
|- | |- | ||
|valign="top"|[[Related Data#Child key|Child key]]||Child key | |valign="top"|[[Related Data#Child key|Child key]]||Child key | ||
Line 397: | Line 461: | ||
|valign="top"|[[Section Footers#Foreground color|Foreground color]]||Section footer foreground color | |valign="top"|[[Section Footers#Foreground color|Foreground color]]||Section footer foreground color | ||
|valign="top"|footerForeColor||Character | |valign="top"|footerForeColor||Character | ||
+ | |- | ||
+ | |valign="top"|[[Section Footers#CSS style|CSS style]]||CSS style (separate attributes with ; or use app:/filename.css or specify CSS classes separated by spaces). | ||
+ | |valign="top"|footercssstyle||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Section Footers#Custom menu|Custom menu]]||Section footer menu contents | |valign="top"|[[Section Footers#Custom menu|Custom menu]]||Section footer menu contents | ||
Line 421: | Line 488: | ||
|valign="top"|[[Accordion Behavior#Hide form NavBar|Hide form NavBar]]||Hide form Navigation Bar at runtime if this section is in an Accordion Stack (True | False) | |valign="top"|[[Accordion Behavior#Hide form NavBar|Hide form NavBar]]||Hide form Navigation Bar at runtime if this section is in an Accordion Stack (True | False) | ||
|valign="top"|hideFormNavBar||valign="top"|Boolean | |valign="top"|hideFormNavBar||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[Instant_Search#Hide_SearchBox|Hide SearchBox]]||Hide the Page Header Instant Search box when this section is selected in an Accordion Stack (True | False). | ||
+ | |valign="top"|hidesearchbox||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Section Appearance#Collapsable|Collapsable]]||The section is collapsible at runtime (True | False) | |valign="top"|[[Section Appearance#Collapsable|Collapsable]]||The section is collapsible at runtime (True | False) | ||
Line 430: | Line 500: | ||
|valign="top"|[[Data Attributes#Inherit dictionary rules|Inherit dictionary rules]]||Inherit the data dictionary rules (True | False) | |valign="top"|[[Data Attributes#Inherit dictionary rules|Inherit dictionary rules]]||Inherit the data dictionary rules (True | False) | ||
|valign="top"|applyDictionary||valign="top"|Boolean | |valign="top"|applyDictionary||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Dictionary overrides|Dictionary overrides]]||Empty dictionary entries override rules (True | False). From v9.4. | ||
+ | |valign="top"|dictionaryoverrides||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Details Attributes#Section to refresh when data modified|Section to refresh when data modified]]||valign="top"|Section to refresh when data is modified in this section | |valign="top"|[[Details Attributes#Section to refresh when data modified|Section to refresh when data modified]]||valign="top"|Section to refresh when data is modified in this section | ||
Line 438: | Line 511: | ||
|- | |- | ||
|valign="top"|[[Data Attributes#Enable when editing|Enable when editing]]||Disable editing until in 'Edit' mode (True | False) | |valign="top"|[[Data Attributes#Enable when editing|Enable when editing]]||Disable editing until in 'Edit' mode (True | False) | ||
− | |valign="top"| | + | |valign="top"|enabledonedit||valign="top"|Boolean |
|- | |- | ||
|valign="top"|[[Details Attributes#Snap objects to grid|Snap objects to grid]]||When adding objects to the canvas, snap to grid when drop (True | False) | |valign="top"|[[Details Attributes#Snap objects to grid|Snap objects to grid]]||When adding objects to the canvas, snap to grid when drop (True | False) | ||
− | |valign="top"| | + | |valign="top"|snapobjectstogrid||valign="top"|Boolean |
|- | |- | ||
|valign="top"|[[Details Attributes#Snap objects to grid size|Snap objects to grid size]]||Number of pixels to snap to grid when drop | |valign="top"|[[Details Attributes#Snap objects to grid size|Snap objects to grid size]]||Number of pixels to snap to grid when drop | ||
− | |valign="top"| | + | |valign="top"|snapobjectstogridsize||valign="top"|Int |
|- | |- | ||
|valign="top"|[[Data Attributes#Deferred add|Deferred add]]||When adding new records, do not commit a blank record until saved. (True | False) | |valign="top"|[[Data Attributes#Deferred add|Deferred add]]||When adding new records, do not commit a blank record until saved. (True | False) | ||
Line 466: | Line 539: | ||
|valign="top"|[[Custom Delegates#Custom Library|Custom library]]||The filename of the library containing code for event handlers and custom procedures/functions | |valign="top"|[[Custom Delegates#Custom Library|Custom library]]||The filename of the library containing code for event handlers and custom procedures/functions | ||
|valign="top"|customLibrary||valign="top"|Character | |valign="top"|customLibrary||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Custom Delegates#Print|Print]]||The delegate for the Print event. This is called when you click the 'Print' icon. From v4.2. | ||
+ | |valign="top"|printAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Expanded|Expanded]]||The delegate for the Expanded event | |valign="top"|[[Custom Delegates#Expanded|Expanded]]||The delegate for the Expanded event | ||
Line 535: | Line 611: | ||
|valign="top"|[[Custom Delegates#After Data Delete|After Data Delete]]||The delegate for the AfterDelete event | |valign="top"|[[Custom Delegates#After Data Delete|After Data Delete]]||The delegate for the AfterDelete event | ||
|valign="top"|afterDeleteAction||valign="top"|Character | |valign="top"|afterDeleteAction||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Custom Delegates#Before Refresh|Before Refresh action]]||The delegate for the BeforeRefresh event. From v6.2. | ||
+ | |valign="top"|beforeRefreshAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Refresh|Refresh]]||The delegate for the Refresh event | |valign="top"|[[Custom Delegates#Refresh|Refresh]]||The delegate for the Refresh event | ||
Line 541: | Line 620: | ||
|valign="top"|[[Custom Delegates#After Refresh|After Refresh action]]||The delegate for the AfterRefresh event. | |valign="top"|[[Custom Delegates#After Refresh|After Refresh action]]||The delegate for the AfterRefresh event. | ||
|valign="top"|afterRefreshAction||valign="top"|Character | |valign="top"|afterRefreshAction||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Custom Delegates#Before Edit|Before Edit]]||The delegate for the BeforeEdit event. From v5.4. | ||
+ | |valign="top"|beforeEditAction||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Custom Delegates#After Edit|After Edit]]||The delegate for the AfterEdit event. From v5.4. | ||
+ | |valign="top"|afterEditAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Init Form Defaults|Init Form Defaults]]||The delegate for the InitFormDefaults event called when adding a new record. | |valign="top"|[[Custom Delegates#Init Form Defaults|Init Form Defaults]]||The delegate for the InitFormDefaults event called when adding a new record. | ||
|valign="top"|initFormDefaults||valign="top"|Character | |valign="top"|initFormDefaults||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Custom Delegates#Init Form|Init Form]]||The delegate for the InitForm event called when creating a component form. | ||
+ | |valign="top"|initformAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Custom Delegates#Parent data changed|Parent data changed]]||The delegate for the ParentDataChanged event | |valign="top"|[[Custom Delegates#Parent data changed|Parent data changed]]||The delegate for the ParentDataChanged event | ||
Line 670: | Line 758: | ||
|valign="top"|[[UI Presentation Rules#Apply rules on parent change|Apply rules on parent change]]||Apply section UI presentation rules (Visible when and Readonly when) when parent data is changed by navigating records (True | False) | |valign="top"|[[UI Presentation Rules#Apply rules on parent change|Apply rules on parent change]]||Apply section UI presentation rules (Visible when and Readonly when) when parent data is changed by navigating records (True | False) | ||
|valign="top"|applyRulesOnParentChange||valign="top"|Boolean | |valign="top"|applyRulesOnParentChange||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[UI Presentation Rules#Search Panel Responsive UI width breakpoint|Search Panel Responsive UI width breakpoint]]||The Search Panel responsive UI width breakpoint in Web/Mobile Apps. From v5.4. | ||
+ | |valign="top"|searchpanelresponsivevisibility||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[UI Presentation Rules#Menu Responsive UI width breakpoint|Menu Responsive UI width breakpoint]]||valign="top"|The Menu responsive UI width breakpoint in Web/Mobile Apps. From v5.4. | ||
+ | |valign="top"|responsivemenuwidth||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[UI Presentation Rules#Responsive UI width breakpoint|Responsive UI width breakpoint]]||The section 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 section responsive UI visibility height breakpoint in Web/Mobile Apps. From v5.4. | ||
+ | |valign="top"|responsiveheightvisibility||valign="top"|Int | ||
|- | |- | ||
|} | |} |
Latest revision as of 05:21, 11 January 2024
Contents
Overview
Canvas Sections allow highly customized layouts with a wide range of advanced containers and controls.
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").setAttribute("title","Section1")
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").getAttribute("title")
Note: on the desktop, the shortened form getAttr(name) is also available.
See Also
Advanced Canvas Control Attributes, Canvas Designer
Demo Apps (included in the Lianja App Builder distribution):
- Lianja Custom Canvas Demo (lianjcustomcanvas)
- Lianja Canvas Section Web UI Demo (example_webapp3)
- Example Dynamic Canvas Layout (example_canvaslayoutjs)
- Lianja Web UI User Registration Form Demo (example_registrationform)
- Lianja JavaScript RPC Demo (example_jsrpc)
- Lianja Canvas Query Page Demo (example_canvasquerypage)
Attributes
Details
Attribute | Description | Name | Type |
---|---|---|---|
Name | The name for this section (unique to the page) | id | Character |
Full name | The full name for this section including its parent page, e.g. page1.section1 | fullid | Character |
Alias name | The alias name for this section. | aliasid | Character |
Dashboard group | The dashboard section that this section belongs to. From v5.2. | horizontalgroup | Character |
Horizontal stretch | The horizontal % stretch factor that this section should occupy. From v5.2. | horizontalgroupstretchfactor | Character |
Vertical stretch | The vertical % stretch factor that this section should occupy. From v5.2. | verticalgroupstretchfactor | Character |
App Doc | The App Doc file for this section. This will be included in the App Doc when it is generated. | appdoc | Character |
MetaData version | The MetaData version number. You can set this in the setupUI hook to prevent MetaData being applied multiple times. | metaDataVersion | Int |
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 section: canvas (readonly) | type | Character |
Caption | The section caption displayed in the section header | title | Character |
Database | The database for this section | database | Character |
Table | The table for this section | table | Character |
OrderBy | Optionally specify an order for non-child sections. (From v4.1) | orderby | Character |
SQL statement | The SQL statement used to populate a Virtual Table. Use {} macros in the WHERE condition to relate parent-->child sections and ORDER BY to order the display of records. This is native SQL for the target SQL database and may call stored procedures as well as SQL Select. | sql | Character |
Timelines enabled | Enable database timelines for this section | timelinesEnabled | Boolean |
Filter | The filter expression that restricts the records that will be included in the data | filter | Character |
Where condition | The dynamic WHERE condition for a Virtual Table that restricts which records will be retrieved | wherecond | Character |
Search field | The search field for the section | searchField | Character |
Height | The section height | height | Int |
Fixed height | Fix the section height (True | False) | fixedHeight | Boolean |
Auto layout percent | Auto layout percentage of page size. If set to 0, then all sections on a page are resized to an equal height | autoLayoutPercentage | Int |
Readonly | Section is readonly (True | False) | readOnly | Boolean |
Scrollable | Section is scrollable (True | False) | scrollable | Boolean |
Scrollable width | The scrollable width of the Canvas inside the ScrollPanel | minwidth | Int |
Scrollable height | The scrollable height of the Canvas inside the ScrollPanel | minheight | Int |
Visual Component Details
Attribute | Description | Name | Type |
---|---|---|---|
Component library | This specifies the Component library where the component will be saved. | componentlib | Character |
Component name | Save as this component name whenever the section is saved. | componentname | Character |
Component author | The author of this component. | componentauthor | Character |
Component version | The version of this component. | componentversion | Character |
Component description | The description of this component. | componentdescription | Character |
Component permissions | The permissions required for this component in Lianja Cloud App Builder. | componentpermissions | Character |
Component width | The width of this component when activated as a Form. | componentwidth | Int |
Component height | The height of this component when activated as a Form. | componentheight | Int |
Appearance
Attribute | Description | Name | Type |
---|---|---|---|
Background color | Section background color | backColor | Character |
Foreground color | Section foreground color | foreColor | Character |
CSS style | CSS style (separate attributes with ; or use app:/filename.css) | cssStyle | Character |
Gradient colors | Render the background color as a gradient (True | False) | sectionGradient | Boolean |
Gradient type | Specify the gradient type | sectionGradientType | Int |
Gradient start color | Gradient start color | sectionFromColor | Character |
Gradient end color | Gradient end color | sectionToColor | Character |
Caption position | The position of the captions (None | Above | Beside | RightToLeft) | labelType | Character |
Caption size | The size of the caption font (Small | Medium | Large | Largest) | labelSize | Character |
Data size | The size of the data font (Small | Medium | Large | Largest) | dataSize | Character |
Transparency | Specify a transparency percentage from 0 to 100 | transparency | Int |
Background image | The background image for the section (png | jpg | gif). Use app:/imagename.ext for app specific images. |
picture | Character |
Stretch image | Stretch the background image to fill the section (True | False) | stretch | Boolean |
Margin | Margin size around the section | margin | Int |
Spacing | Spacing between items in the section | spacing | Int |
Caption width | Width of the captions for fields in the section | labelWidth | Int |
Rounded UI | Render the UI controls with a rounded UI for this section (True | False). From v9.4.22. | roundedui | Boolean |
Border-radius | Border radius of items in the section | borderRadius | Int |
Add spacer at bottom | Add spacer at bottom of section (True | False) | spacerVisible | Boolean |
Header
Attribute | Description | Name | Type |
---|---|---|---|
Hide header | Hide section header at runtime(True | False) | hideHeaderAtRuntime | Boolean |
Hide actionbar | Hide actionbar when stacked section is activated at runtime (True | False) |
hideActionBarAtRuntime | Boolean |
Hide navigation buttons | Hide actionbar navigation buttons in the section header (True | False) | hideNavButtons | Boolean |
Hide editing buttons | Hide the Save/Cancel editing buttons in the section header (True | False). Don't change this unless you are handling these operations programatically. | hideEditingButtons | Boolean |
Show record count badge | Show the record count badge in the section header (True | False). From v5.2. | showreccount | Boolean |
Header CSS style | CSS style (separate attributes with ; or use app:/filename.css) | headerCssStyle | Character |
Header icon | The image for the Header (png | jpg | gif). Use app:/imagename.ext for app specific images. |
headerIcon | Character |
Gradient colors | Render the Header background color as a gradient (True | False) | headerGradient | Boolean |
Gradient type | Specify the gradient type | headerGradientType | Int |
Gradient start color | Gradient start color | headerFromColor | Character |
Gradient end color | Gradient end color | headerToColor | Character |
Show OK/Cancel buttons | Show OK/Cancel buttons in the section header (True | False) | showOkCancelButtons | Boolean |
Show Add/Delete buttons | Show Add/Delete buttons in the section header (True | False) | showAddDeleteButtons | Boolean |
Show Print button | Show Print button in the section header (True | False) | showPrintButton | Boolean |
Show Edit button | Show Edit button in the section header (True | False) | showEditButton | Boolean |
Hide custom search icon | Hide the custom search icon (True | False) | hideCustomSearchIcon | Boolean |
Show Custom search dialog | Show custom search dialog when custom search icon clicked (True | False) | showcustomsearchdialog | Boolean |
Show custom search dialog panel | Show custom search dialog panel when custom search icon clicked (True | False) |
showcustomsearchdialogpanel | Boolean |
Show info tips icon | Show the info tips icon in the section header (True | False) | showInfoTipsIcon | Boolean |
Show help icon | Show the help icon in the section header (True | False) | showHelpIcon | Boolean |
Help topic | Help topic to display when the help icon is clicked in the section header | helpTopic | Character |
Custom Header Style
Attribute | Description | Name | Type |
---|---|---|---|
Use custom header style | Use a custom header style (True | False) | headercustomstyle | Boolean |
Header background color | Header background color | headerbackcolor | Character |
Header foreground color | Header foreground color | headerforecolor | Character |
Header bottom border | Display the header bottom border (True | False) | headerbottomborder | Boolean |
Header bottom border height | Height (in pixels) of the header bottom border (if displayed) | headerbottomborderheight | Int |
Header bottom border color | Header bottom border color | headerbottombordercolor | Character |
Related Data
Attribute | Description | Name | Type |
---|---|---|---|
Parent section name | Name of related parent section | parentid | Character |
Automatically relate | Automatically relate the child section (True | False). If this is unchecked then you need to manually relate it in the parentdatachanged delegate. | autoRelateChildSection | Boolean |
Parent key | Parent key | parentKeyExpr | Character |
Child key | Child key | childKeyExpr | Character |
Menu
Attribute | Description | Name | Type |
---|---|---|---|
Visible | Section menu visible (True | False) | sectionMenuVisible | Boolean |
Height | Section menu height | sectionMenuHeight | Int |
Background color | Section menu background color | sectionMenuBackColor | Character |
Foreground color | Section menu foreground color | sectionMenuForeColor | Character |
Custom menu panel | The .rsp or .jssp page used to create the custom menu panel. This page should generate dynamic HTML5/JavaScript. | customSectionMenuPanel | Character |
Custom menu | Section menu contents | customSectionMenu | Character |
Custom action | Action to perform when a menu item is selected | sectionMenuAction | Character |
Search Panel
Attribute | Description | Name | Type |
---|---|---|---|
Visible | Section search panel visible (True | False) | searchPanelVisible | Boolean |
Height | Section search panel height | searchPanelHeight | Int |
Background color | Section search panel background color | searchPanelBackColor | Character |
Foreground color | Section search panel foreground color | searchPanelForeColor | Character |
Auto create | Automatically create search panel for all Section search fields | searchPanelAutoCreate | Boolean |
Custom search panel | The delegate used to create the custom search panel | searchPanelAction | Character |
Subtitle
Attribute | Description | Name | Type |
---|---|---|---|
Visible | Section subtitle visible (True | False) | subtitleVisible | Boolean |
Caption | Section subtitle caption | subtitleCaption | Character |
Height | Section subtitle height | subtitleHeight | Int |
Background color | Section subtitle background color | subtitleBackColor | Character |
Foreground color | Section subtitle foreground color | subtitleForeColor | Character |
Font | Section subtitle font | subtitleFont | Int |
CSS style | CSS style | subtitleCssStyle | Character |
Attribute | Description | Name | Type |
---|---|---|---|
Visible | Section footer visible (True | False) | footerVisible | Boolean |
Caption | Section footer caption | footerText | Character |
Height | Section footer height | footerHeight | Int |
Background color | Section footer background color | footerBackColor | Character |
Foreground color | Section footer foreground color | footerForeColor | Character |
CSS style | CSS style (separate attributes with ; or use app:/filename.css or specify CSS classes separated by spaces). | footercssstyle | Character |
Custom menu | Section footer menu contents | customOptionsMenu | Character |
Custom action | Action to perform when a footer menu item is selected | customOptionsMenuAction | Character |
Footer button CSS | Footer button CSS style | footerButtonCss | Character |
Footer button width | Footer button width | footerButtonWidth | Int |
Other Options
Attribute | Description | Name | Type |
---|---|---|---|
Hide form NavBar | Hide form Navigation Bar at runtime if this section is in an Accordion Stack (True | False) | hideFormNavBar | Boolean |
Hide SearchBox | Hide the Page Header Instant Search box when this section is selected in an Accordion Stack (True | False). | hidesearchbox | Boolean |
Collapsable | The section is collapsible at runtime (True | False) | collapsableAtRuntime | Boolean |
Exclude from accordion | The section is excluded from accordion behavior at runtime (True | False) | excludeAccordionAtRuntime | Boolean |
Inherit dictionary rules | Inherit the data dictionary rules (True | False) | applyDictionary | Boolean |
Dictionary overrides | Empty dictionary entries override rules (True | False). From v9.4. | dictionaryoverrides | Boolean |
Section to refresh when data modified | Section to refresh when data is modified in this section | refreshSectionOnChange | Character |
Return tabs | Treat the return key as a Tab on the fields in this section (True | False) | returnTabs | Boolean |
Enable when editing | Disable editing until in 'Edit' mode (True | False) | enabledonedit | Boolean |
Snap objects to grid | When adding objects to the canvas, snap to grid when drop (True | False) | snapobjectstogrid | Boolean |
Snap objects to grid size | Number of pixels to snap to grid when drop | snapobjectstogridsize | Int |
Deferred add | When adding new records, do not commit a blank record until saved. (True | False) | deferredadd | Boolean |
Hide search icon | Hide the search icon at runtime (True | False) | hideSearchIcon | Boolean |
Custom Delegates
Attribute | Description | Name | Type |
---|---|---|---|
Scripting language | The default scripting language for custom code in this section (Inherit | Recital | Visual FoxPro | Python | JavaScript | PHP) | scriptingLanguage | Character |
Custom library | The filename of the library containing code for event handlers and custom procedures/functions | customLibrary | Character |
The delegate for the Print event. This is called when you click the 'Print' icon. From v4.2. | printAction | Character | |
Expanded | The delegate for the Expanded event | expandedAction | Character |
Collapsed | The delegate for the Collapsed event | collapsedAction | Character |
Hotkey | The delegate for the Hotkey event (e.g. F1-F10, Ctrl+F1). The key is passed as a parameter, e.g. 'F2'. From v3.2. | hotkeyAction | Character |
Enabled When | The delegate for the EnabledWhen event | enabledWhenAction | Character |
Visible When | The delegate for the VisibleWhen event | visibleWhenAction | Character |
Valid When | The delegate for the ValidWhen event | validWhenAction | Character |
Activate | The delegate for the Activate event | activateAction | Character |
Deactivate | The delegate for the Deactivate event | deactivateAction | Character |
Init | The delegate for the Init event | initAction | Character |
Destroy | The delegate for the Destroy event | destroyAction | Character |
Load | The delegate for the Load event | loadAction | Character |
Ready | The delegate for the Ready event | readyAction | Character |
Unload | The delegate for the Unload event | unloadAction | Character |
Resized | The delegate for the Resized event | resized | Character |
Change | The delegate for the Change event | changedAction | Character |
Link Click | The delegate for the Hyperlink/Button Click event. This is called with two arguments: functionname(controlsource,text) | linkClickAction | Character |
Before Data Create | The delegate for the BeforeCreate event | beforeCreateAction | Character |
After Data Create | The delegate for the AfterCreate event | afterCreateAction | Character |
After Data Changed | The delegate for the dataChanged event (after data is read) | dataChangedAction | Character |
Before Data Update | The delegate for the BeforeUpdate event | beforeUpdateAction | Character |
After Data Update | The delegate for the AfterUpdate event | afterUpdateAction | Character |
Before Data Delete | The delegate for the BeforeDelete event | beforeDeleteAction | Character |
After Data Delete | The delegate for the AfterDelete event | afterDeleteAction | Character |
Before Refresh action | The delegate for the BeforeRefresh event. From v6.2. | beforeRefreshAction | Character |
Refresh | The delegate for the Refresh event | refreshAction | Character |
After Refresh action | The delegate for the AfterRefresh event. | afterRefreshAction | Character |
Before Edit | The delegate for the BeforeEdit event. From v5.4. | beforeEditAction | Character |
After Edit | The delegate for the AfterEdit event. From v5.4. | afterEditAction | Character |
Init Form Defaults | The delegate for the InitFormDefaults event called when adding a new record. | initFormDefaults | Character |
Init Form | The delegate for the InitForm event called when creating a component form. | initformAction | Character |
Parent data changed | The delegate for the ParentDataChanged event | parentDataChangedAction | Character |
Dialog button delegate | The delegate for the DialogButtonClicked event. If a dialogbutton on a Field has no delegate, the Section delegate will be called. If the section has no delegate, then the Page delegate will be called. | dialogButtonAction | Character |
Timer | The delegate for the Timer event | timerAction | Character |
Timer interval | The timer interval in seconds that the Timer event will be called at runtime | timerInterval | Int |
State Changed | The delegate for the Statechanged event. | stateChangedAction | Character |
Custom footer menu | The delegate for the footer menu event | customMenuAction | Character |
Custom search command | The delegate for the search event | customSearch | Character |
Custom section menu | The delegate for the section menu event | customSectionMenuAction | Character |
Gestures
Attribute | Description | Name | Type |
---|---|---|---|
Gestures enabled | Enable gestures for this page: swipe, pan, pinch, tap and tapandhold (True | False). If enabled, then the Gestures delegate will be called with two arguments, e.g. 'swipe','left' or 'swipe','right'. |
gesturesEnabled | Boolean |
Swipe left gesture | The delegate for the gestureSwipeLeft event. | gestureSwipeLeftAction | Character |
Swipe right gesture | The delegate for the gestureSwipeRight event. | gestureSwipeRightAction | Character |
Swipe up gesture | The delegate for the gestureSwipeUp event. | gestureSwipeUpAction | Character |
Swipe down gesture | The delegate for the gestureSwipeDown event. | gestureSwipeDownAction | Character |
Pan gesture | The delegate for the gesturePan event. | gesturePanAction | Character |
Pinch gesture | The delegate for the gesturePinch event. | gesturePinchAction | Character |
Tap gesture | The delegate for the gestureTap event. | gestureTapAction | Character |
Tap and hold gesture | The delegate for the gestureTapAndHold event. | gestureTapAndHoldAction | Character |
Gestures | The catch all delegate for the gestures event. | gesturesAction | Character |
Permissions and Roles
Attribute | Description | Name | Type |
---|---|---|---|
Create roles | A comma separated list of roles that can perform create operations on data in the section. | permcreate | Character |
Read roles | A comma separated list of roles that can read (and view) the section. | permRead | Character |
Update roles | A comma separated list of roles that can perform update operations on data in the section. | permUpdate | Character |
Delete roles | A comma separated list of roles that can perform delete operations on data in the section. | permDelete | Character |
UI Presentation Rules
Attribute | Description | Name | Type |
---|---|---|---|
Desktop | Include this section in a Desktop client (True | False). | desktopUI | Boolean |
Web | Include this section in a Web client (True | False). | webUI | Boolean |
Tablet | Include this section in a Tablet client (True | False). | tabletUI | Boolean |
Phone | Include this section in a Phone client (True | False). | mobileUI | Boolean |
UI States | UI states that affect this section. Specify multiple states as a comma separated list. | state | Character |
Initial UI state | The initial UI state for this section. This will be applied to the section and all its fields and gadgets. | uiStateInit | Character |
Readonly when | Section is readonly at runtime if specified expression evaluates to true. | readonlyWhen | Character |
Visible when | Section is visible at runtime if specified expression evaluates to true. | visibleWhen | Character |
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 |
Apply rules on parent change | Apply section UI presentation rules (Visible when and Readonly when) when parent data is changed by navigating records (True | False) | applyRulesOnParentChange | Boolean |
Search Panel Responsive UI width breakpoint | The Search Panel responsive UI width breakpoint in Web/Mobile Apps. From v5.4. | searchpanelresponsivevisibility | Int |
Menu Responsive UI width breakpoint | The Menu responsive UI width breakpoint in Web/Mobile Apps. From v5.4. | responsivemenuwidth | Int |
Responsive UI width breakpoint | The section responsive UI visibility width breakpoint in Web/Mobile Apps. From v5.4. | responsivewidthvisibility | Int |
Responsive UI height breakpoint | The section responsive UI visibility height breakpoint in Web/Mobile Apps. From v5.4. | responsiveheightvisibility | Int |