Difference between revisions of "Advanced Canvas Control Attributes"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) (→Data) |
||
(57 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | =Overview= | ||
+ | Advanced Canvas Controls can be added to a [[Canvas Section Attributes|Canvas Section]] to produce highly customized layouts. | ||
+ | |||
+ | [[File:canvas_section.png|middle|768px|link={{filepath:canvas_section.png}}]] | ||
+ | |||
+ | |||
+ | With a [[Canvas Section Attributes|Canvas Section]] selected - note the blue border showing the selected section in the screenshot below - click '''Advanced''' in the [[Form Tools]] to list the available controls. | ||
+ | |||
+ | Clicking the dashed (----) line at the top of the list gives the list its own floating window as shown here. | ||
+ | |||
+ | Select a control to add it to the Canvas Section then position it as required. | ||
+ | |||
+ | [[File:canvas_section2.png|middle|768px|link={{filepath:canvas_section2.png}}|Form Tools: Advanced Canvas Controls]] | ||
+ | |||
+ | |||
+ | You can also drag and drop table fields from the [[Pages Files Tab]] of the [[App Inspector]] into a [[Canvas Section Attributes|Canvas Section]] and then position them as required. | ||
+ | |||
+ | These are then automatically data-bound controls. | ||
+ | |||
+ | [[File:canvas_section3.png|middle|768px|link={{filepath:canvas_section3.png}}|Drag and drop fields]] | ||
+ | |||
+ | |||
+ | 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. | ||
+ | |||
+ | ===Additional Help=== | ||
+ | * Select the [[Attributes#Skills_Levels|Skills Level]] to change the attributes displayed. | ||
+ | * Toggle the [[Page Builder Assistant]] from the Window menu in the [[App Builder MenuBar]] to display and edit key attributes. | ||
+ | * Hover the mouse over the caption of a formitem to show the Attributes Quickview for that UI element (from v5.3). | ||
+ | |||
+ | [[{{ns:file}}:canvas_controls_attributes_quickview.png|800px|left|border|link={{filepath:canvas_controls_attributes_quickview.png}}|Attributes]] | ||
+ | <br clear=all> | ||
+ | |||
==Getting and Setting Attributes== | ==Getting and Setting Attributes== | ||
The '''setAttribute(name, value)''' method can be used to set the value of an Attribute: | The '''setAttribute(name, value)''' method can be used to set the value of an Attribute: | ||
Line 4: | Line 49: | ||
<pre>Lianja.get("pageid.sectionid.fieldid").setAttribute("caption","Formitem1")</pre> | <pre>Lianja.get("pageid.sectionid.fieldid").setAttribute("caption","Formitem1")</pre> | ||
− | Note: the shortened form '''setAttr(name,value)''' is also available. | + | 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: | The '''getAttribute(name)''' method can be used to get the value of an Attribute: | ||
Line 10: | Line 55: | ||
<pre>cTitle = Lianja.get("pageid.sectionid.fieldid").getAttribute("caption")</pre> | <pre>cTitle = Lianja.get("pageid.sectionid.fieldid").getAttribute("caption")</pre> | ||
− | Note: the shortened form '''getAttr(name)''' is also available. | + | Note: on the desktop, the shortened form '''getAttr(name)''' is also available. |
+ | =See Also= | ||
+ | [[Advanced Canvas Control Custom Delegates]], [[Canvas Section Attributes]] | ||
+ | |||
+ | 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== | ==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 field (unique to the section) | |valign="top"|[[Details Attributes#Name|Name]]||The name for this field (unique to the section) | ||
+ | |valign="top"|id||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Full name|Full name]]||The full name for this formitem including its parent page and section, e.g. page1.section1.field1 | ||
+ | |valign="top"|fullid||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Control type|Control type]]||The type of control, e.g. Commandbutton (readonly) | ||
+ | |valign="top"|controltype||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#Alias name|Alias name]]||The alias name for this formitem | ||
+ | |valign="top"|aliasid||Character | ||
+ | |- | ||
+ | |valign="top"|[[Details Attributes#App Doc|App Doc]]||The App Doc file for this formitem. 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 formitem | ||
+ | |valign="top"|tag||Character | ||
|- | |- | ||
|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"|[[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 control: field (readonly) | |valign="top"|[[Details Attributes#Type|Type]]||The type of control: field (readonly) | ||
+ | |valign="top"|type||valign="top"|Character | ||
|- | |- | ||
|} | |} | ||
Line 28: | Line 108: | ||
{| 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"|[[Geometry#Top|Top]]||Top position in pixels | |valign="top"|[[Geometry#Top|Top]]||Top position in pixels | ||
+ | |valign="top"|top||valign="top"|Int | ||
|- | |- | ||
|valign="top"|[[Geometry#Left|Left]]||Left position in pixels | |valign="top"|[[Geometry#Left|Left]]||Left position in pixels | ||
+ | |valign="top"|left||valign="top"|Int | ||
|- | |- | ||
|valign="top"|[[Geometry#Width|Width]]||Width in pixels | |valign="top"|[[Geometry#Width|Width]]||Width in pixels | ||
+ | |valign="top"|width||valign="top"|Int | ||
|- | |- | ||
|valign="top"|[[Geometry#Height|Height]]||Height in pixels | |valign="top"|[[Geometry#Height|Height]]||Height in pixels | ||
+ | |valign="top"|height||valign="top"|Int | ||
|- | |- | ||
|valign="top"|[[Geometry#Background widget|Background widget]]||Lower this widget underneath as a background widget (True | False) | |valign="top"|[[Geometry#Background widget|Background widget]]||Lower this widget underneath as a background widget (True | False) | ||
+ | |valign="top"|backgroundWidget||valign="top"|Boolean | ||
|- | |- | ||
|} | |} | ||
Line 45: | Line 132: | ||
{| 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"|[[CSS|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 | ||
|- | |- | ||
|valign="top"|[[Formitem Appearance#Caption position|Caption position]]||The position of the caption (None | Above | Beside | RightToLeft) | |valign="top"|[[Formitem Appearance#Caption position|Caption position]]||The position of the caption (None | Above | Beside | RightToLeft) | ||
+ | |valign="top"|labelType||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Formitem Appearance#Caption size|Caption size]]||The size of the caption (Small | Medium | Large | Largest) | |valign="top"|[[Formitem Appearance#Caption size|Caption size]]||The size of the caption (Small | Medium | Large | Largest) | ||
+ | |valign="top"|labelSize||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Formitem Appearance#Caption width|Caption width]]||The width of the caption in pixels. | |valign="top"|[[Formitem Appearance#Caption width|Caption width]]||The width of the caption in pixels. | ||
+ | |valign="top"|labelWidth||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Shading and Transparency|Shading]]||The shading to be applied to the field (None | Light | Dark) | + | |valign="top"|[[Shading and Transparency#Shading|Shading]]||The shading to be applied to the field (None | Light | Dark) |
+ | |valign="top"|shadingType||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Shading and Transparency|Transparency]]||The transparency type to be applied to the field (None | Light | Dark | Custom) | + | |valign="top"|[[Shading and Transparency#Transparency type|Transparency type]]||The transparency type to be applied to the field (None | Light | Dark | Custom) |
+ | |valign="top"|transparencyType||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Formitem Appearance#Border radius|Border radius]]||Specify a border radius | |valign="top"|[[Formitem Appearance#Border radius|Border radius]]||Specify a border radius | ||
+ | |valign="top"|borderRadius||valign="top"|Int | ||
|- | |- | ||
|} | |} | ||
Line 66: | Line 162: | ||
{| 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"|[[Formitem Appearance#Show caption|Show caption]]||Show the caption for the field (True | False) | |valign="top"|[[Formitem Appearance#Show caption|Show caption]]||Show the caption for the field (True | False) | ||
+ | |valign="top"|showCaption||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Formitem Appearance#Caption|Caption]]||The caption for the field | |valign="top"|[[Formitem Appearance#Caption|Caption]]||The caption for the field | ||
+ | |valign="top"|caption||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Formitem Appearance#Caption CSS style|Caption CSS style]]||The 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"|[[Fonts|Font]]||The font for the caption | |valign="top"|[[Fonts|Font]]||The font for the caption | ||
+ | |valign="top"|captionFont||valign="top"|Character | ||
|- | |- | ||
|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"|[[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"|[[Formitem Appearance#Border width|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"|[[Shading and Transparency|Transparency]]||Specify a transparency percentage from 0 to 100 | + | |valign="top"|[[Shading and Transparency#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 | ||
|- | |- | ||
|} | |} | ||
==Data== | ==Data== | ||
+ | Note: individual attributes are not applicable to all Advanced Canvas Controls. | ||
{| 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"|[[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"|[[Data Attributes#Inherit dictionary caption|Inherit dictionary caption]]||Inherit the data dictionary caption (True | False) | ||
+ | |valign="top"|applyDictionaryCaption||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Data Attributes#Data source|Data source]]||The table and column that this field is bound to. Specify m.varname to bind to a memory variable. | |valign="top"|[[Data Attributes#Data source|Data source]]||The table and column that this field is bound to. Specify m.varname to bind to a memory variable. | ||
+ | |valign="top"|controlSource||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Data CSS style|Data CSS style]]||The field data CSS style (separate attributes with ';' or use ''app:/''filename.css or specify CSS classes separated by spaces). | ||
+ | |valign="top"|dataCSSstyle||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Control CSS style|Control CSS style]]||The control CSS style (separate attributes with ';' or use ''app:/''filename.css or specify CSS classes separated by spaces). | ||
+ | |valign="top"|controlCSSstyle||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Caption|Caption]]||The caption for the control. | ||
+ | |valign="top"|controlCaption||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Icon image|Icon image]]||The icon image for the control (png | jpg | gif).<br>Use app:/imagename.ext for app specific images. | ||
+ | |valign="top"|controlIcon||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Data Attributes#Anchor|Anchor]]||The anchor value for the control. | |valign="top"|[[Data Attributes#Anchor|Anchor]]||The anchor value for the control. | ||
+ | |valign="top"|controlAnchor||valign="top"|Int | ||
|- | |- | ||
|valign="top"|[[Data Attributes#Tab order|Tab order]]||The tab order for this field. | |valign="top"|[[Data Attributes#Tab order|Tab order]]||The tab order for this field. | ||
+ | |valign="top"|tabOrder||valign="top"|Int | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Data Attributes#ActiveX control|ActiveX control]]||ActiveX component control to embed. |
+ | |valign="top"|objid||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Instant Search# | + | |valign="top"|[[Instant Search#Search field|Search field]]||This field is its Section Search field (True | False) |
+ | |valign="top"|searchField||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Instant Search# | + | |valign="top"|[[Instant Search#Default search field|Default search field]]||This field is its Section default search field (True | False) |
+ | |valign="top"|defaultSearchFieldOrder||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Instant Search# | + | |valign="top"|[[Instant Search#User selectable search field|User selectable search field]]||The user can select this as the Section search field interactively by clicking on it (True | False) |
+ | |valign="top"|userSelectableSearchField||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Instant Search#Hide search field indicator|Hide search field indicator]]||Hide the search field indicator (True | False) |
+ | |valign="top"|hideSearchKeyIndicator||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Section Search Panels|Search panel field]]||Include this field in an auto created Section search panel (True | False) |
+ | |valign="top"|searchPanelField||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Data Attributes#Recalculate|Recalculate | + | |valign="top"|[[Data Attributes#Relate on change|Relate on change]]||Relate child Sections when data is changed interactively (True | False) |
+ | |valign="top"|relateOnChange||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Recalculate|Recalculate]]||Recalculate readonly and calculated fields when data is changed interactively (True | False) | ||
+ | |valign="top"|refreshCalculatedOnChange||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Data Attributes#Ignore after change|Ignore after change]]||After data is edited (TextBox only), the 'Change' delegate only is called and it is assumed to update the field. This provides the ability to handle custom search logic in the App for this field (True | False) | |valign="top"|[[Data Attributes#Ignore after change|Ignore after change]]||After data is edited (TextBox only), the 'Change' delegate only is called and it is assumed to update the field. This provides the ability to handle custom search logic in the App for this field (True | False) | ||
+ | |valign="top"|ignoreUpdteAfterChange||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[Colors|Background color]]||The background color for the data | |valign="top"|[[Colors|Background color]]||The background color for the data | ||
+ | |valign="top"|dataBackColor||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Colors|Foreground color]]||The foreground color for the data | |valign="top"|[[Colors|Foreground color]]||The foreground color for the data | ||
+ | |valign="top"|dataForeColor||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Fonts|Font]]||The font for the data | |valign="top"|[[Fonts|Font]]||The font for the data | ||
+ | |valign="top"|dataFont||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Formitem Appearance|Data size]]||The size of the data (Small | Medium | Large | Largest) | + | |valign="top"|[[Formitem Appearance#Data size|Data size]]||The size of the data (Small | Medium | Large | Largest) |
+ | |valign="top"|dataSize||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Data Attributes#Default|Default]]||Default value as an expression, e.g. date(), 0.0, space(10) | |valign="top"|[[Data Attributes#Default|Default]]||Default value as an expression, e.g. date(), 0.0, space(10) | ||
+ | |valign="top"|defaultValue||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Data Attributes#List items|List items]]||A list of choices (OptionGroup / ListBox). |
+ | |valign="top"|choiceList||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Data Attributes#GroupBox caption|GroupBox caption]]||An optional caption for the GroupBox containing the CheckListView items (OptionGroup). |
+ | |valign="top"|headerLabels||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Data Attributes#Allow multiple selections|Allow multiple selections]]||Allow multiple selections (True | False) (OptionGroup). |
+ | |valign="top"|treeCheckListMultiSelect||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Input Masks | + | |valign="top"|[[Input Masks|Input mask type]]||The inputmask type (Custom | Currency | Date | Email Address | Number | Text | Time | Alphabetic | Upper Case | Upper Case Alphabetic) |
+ | |valign="top"|inputMaskType||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Input Masks|Input mask]]||The inputmask for the field, e.g. @c2, @c4, @!, @^, 999,999.99 or ?regularexpression |
+ | |valign="top"|inputMask||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Input Masks#Placeholder text|Placeholder text]]||Text to display as grayed-out placeholder text when the field is empty and does not have focus |
+ | |valign="top"|placeHolderText||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Input Masks#Password input|Password input]]||Echo characters input as * for entering passwords (True | False) |
+ | |valign="top"|password||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Data Attributes# | + | |valign="top"|[[Data Attributes#Return tabs|Return tabs]]||Treat the return key as a Tab on this field (True | False) |
+ | |valign="top"|returnTabs||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Data Attributes# | + | |valign="top"|[[Data Attributes#Mandatory_input|Mandatory input]]||Data must be entered in this field (True | False) |
+ | |valign="top"|mandatory||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Choices]]||Restrict data input to a list of choices, 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"|[[Data Attributes# | + | |valign="top"|[[Data Attributes#Validation|Validation]]||Data input validation expression.<br>Note the use of {}, which is substituted with the current data entered, e.g.<br>Contained in a list:<br>inlist("{}","Apples","Oranges","Bananas")<br>Lookup the value entered in a table:<br>rlookup("{}",customers,"custnames") |
+ | |valign="top"|validation||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Data Attributes#Error message|Error message]]||The error message to display if data input validation fails |
+ | |valign="top"|validationErrorMessage||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Help Attributes#Tooltips|Tooltip]]||The tooltip to display |
+ | |valign="top"|editToolTip||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Data Attributes#Hyperlink|Hyperlink]]||Display as a hyperlink (True | False) |
+ | |valign="top"|editHyperLink||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[ | + | |valign="top"|[[Data Attributes#Cell editor type|Cell editor type]]||The cell editor type (Text | Html | Stringlist). From v5.3. |
+ | |valign="top"|celleditor||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Help Attributes#Context Menu|Context Menu | + | |valign="top"|[[Data Attributes#StringList|StringList]]||A comma-separated list of strings that are available in the [[StringList Editor]]. This can be specified as a [[SQL SELECT|SQL Select]] statement or a {macro()} procedure call that generate the list dynamically. The [[StringList Editor]] is available for editing varchar/memo fields when the [[#Cell editor type|Cell editor type]] is specified as 'Stringlist'. From v5.3. |
+ | |valign="top"|stringlist||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Formitem Appearance#Text alignment|Text alignment]]||Text alignment (Left | Center | Right) | ||
+ | |valign="top"|editAlignment||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Autosuggestions#Autosuggestions|Autosuggestions]]||Autosuggest a list of values as the user types, 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"|autoSuggest||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Autosuggestions#Autosuggestion headers|Autosuggestion headers]]||A comma separated list of column headers to display for the Autosuggestions | ||
+ | |valign="top"|autoSuggestHeaders||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Autosuggestions#Autosuggestion column to search|Autosuggestion column to search]]||The column to search for Autosuggestions | ||
+ | |valign="top"|autoSuggestColumn||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Help Attributes#Context Menu|Context Menu]]||The context menu to popup when a user right-clicks on the field. Specify this as a comma separated list. | ||
+ | |valign="top"|contextMenu||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Formitem Appearance#Layout direction|Layout direction]]||The Layout direction for this field: Vertical | Horizontal. Applies to OptionGroup. From v8.0. | ||
+ | |valign="top"|controllayoutdirection||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Data Attributes#Editable|Editable]]||The data is editable (True|False) | |valign="top"|[[Data Attributes#Editable|Editable]]||The data is editable (True|False) | ||
+ | |valign="top"|editable||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Data Attributes# | + | |valign="top"|[[Data Attributes#URL|URL]]||URL to render in the webview/chart. Use {expr} macros to substitute data. |
+ | |valign="top"|url||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Dialog button delegate|Dialog button delegate | + | |valign="top"|[[Data Attributes#Dialog button|Dialog button]]||The control has a dialog button that can be clicked to call the DialogButtonClicked delegate (True|False). |
+ | |valign="top"|dialogButton||valign="top"|Boolean | ||
+ | |- | ||
+ | |valign="top"|[[Custom Delegates#Dialog button menu|Dialog button menu]]||Clicking the Dialog button drops down a menu of the specified comma-separated options. From v9.1.12. | ||
+ | |valign="top"|dialogButtonMenu||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Custom Delegates#Dialog button delegate|Dialog button delegate]]||The delegate for the DialogButtonClicked event. | ||
+ | |valign="top"|dialogButtonAction||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Custom Delegates#Dialog button menu delegate|Dialog button menu delegate]]||The delegate for the DialogButtonMenu event. From v9.1.12. | ||
+ | |valign="top"|dialogButtonMenuAction||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Data Mapping|Get data mapping]]||Custom data mapping when reading data. Specify this as an expression. | |valign="top"|[[Data Mapping|Get data mapping]]||Custom data mapping when reading data. Specify this as an expression. | ||
+ | |valign="top"|dataMappingGet||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Data Mapping|Set data mapping]]||Custom data mapping when writing data. Specify this as an expression. | |valign="top"|[[Data Mapping|Set data mapping]]||Custom data mapping when writing data. Specify this as an expression. | ||
+ | |valign="top"|dataMappingSet||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Minimum value|Minimum value]]||The minimum value for a ProgressBar or Slider. | ||
+ | |valign="top"|sliderminimumvalue||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Maximum value|Maximum value]]||The maximum value for a ProgressBar or Slider. | ||
+ | |valign="top"|slidermaximumvalue||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Orientation|Orientation]]||The Orientation for a ProgressBar or Slider (Horizontal|Vertical). | ||
+ | |valign="top"|sliderorientation||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Tick interval|Tick interval]]||The Tick interval for a Slider. | ||
+ | |valign="top"|slidertickinterval||valign="top"|Int | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#Tick position|Tick position]]||The Tick position for a Slider (None|Both Sides|Above|Below|Left|Right). | ||
+ | |valign="top"|slidertickposition||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Help Attributes#Help topic|Help topic]]||The help topic to display for this field when F1 is pressed. | |valign="top"|[[Help Attributes#Help topic|Help topic]]||The help topic to display for this field when F1 is pressed. | ||
+ | |valign="top"|helpTopic||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[Data Attributes#Custom attributes|Custom attributes]]||A semicolon separated list of custom attributes which can be used in CSS selectors, e.g.<br>mandatory=1;border=1;hilite=red<br>You should reference these attributes as user_xxx from any delegates or in any custom CSS theming. | |valign="top"|[[Data Attributes#Custom attributes|Custom attributes]]||A semicolon separated list of custom attributes which can be used in CSS selectors, e.g.<br>mandatory=1;border=1;hilite=red<br>You should reference these attributes as user_xxx from any delegates or in any custom CSS theming. | ||
+ | |valign="top"|customAttributes||valign="top"|Character | ||
|- | |- | ||
|} | |} | ||
==Custom Delegates== | ==Custom Delegates== | ||
+ | Note: individual Custom Delegates are not applicable to all Advanced Canvas Controls. See [[Advanced Canvas Control Custom Delegates]] for 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"|[[Custom Delegates#Default Action|Default Action | + | |valign="top"|[[Custom Delegates#Default Action|Default Action]]||The default action for this control. For CommandButtons this will be performed on a Click event. For other applicable controls, it will be performed on the Change event. |
+ | |valign="top"| ||valign="top"| | ||
|- | |- | ||
|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#Activate|Activate | + | |valign="top"|[[Custom Delegates#Activate|Activate]]||The delegate for the Activate event |
+ | |valign="top"|activateAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Deactivate|Deactivate | + | |valign="top"|[[Custom Delegates#Deactivate|Deactivate]]||The delegate for the Deactivate event |
+ | |valign="top"|deactivateAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Enabled When|Enabled When | + | |valign="top"|[[Custom Delegates#Enabled When|Enabled When]]||The delegate for the EnabledWhen event |
+ | |valign="top"|enabledWhenAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Visible When|Visible When | + | |valign="top"|[[Custom Delegates#Visible When|Visible When]]||The delegate for the VisibleWhen event |
+ | |valign="top"|visibleWhenAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Click|Click | + | |valign="top"|[[Custom Delegates#Click|Click]]||The delegate for the Click event. |
+ | |valign="top"|ClickAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Link Click|Link Click | + | |valign="top"|[[Custom Delegates#Link Click|Link Click]]||The delegate for the LinkClicked event. |
+ | |valign="top"|linkClickAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#After Row Change|After Row Change | + | |valign="top"|[[Custom Delegates#After Row Change|After Row Change]]||The delegate for the AfterRowChange event. |
+ | |valign="top"|afterRowChangeAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Destroy|Destroy | + | |valign="top"|[[Custom Delegates#Destroy|Destroy]]||The delegate for the Destroy event. |
+ | |valign="top"|destroyAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Double Click|Double Click | + | |valign="top"|[[Custom Delegates#Double Click|Double Click]]||The delegate for the dblClick event. |
+ | |valign="top"|dblClickAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Got Focus|Got Focus | + | |valign="top"|[[Custom Delegates#Got Focus|Got Focus]]||The delegate for the GotFocus event. |
+ | |valign="top"|gotFocusAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Interactive Change|Interactive Change | + | |valign="top"|[[Custom Delegates#Interactive Change|Interactive Change]]||The delegate for the InteractiveChange event. This is called after each key is pressed. |
+ | |valign="top"|interactiveChangeAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Change|Change | + | |valign="top"|[[Custom Delegates#Change|Change]]||The delegate for the Changed event. This is called when the Enter key or the Tab key are pressed. |
+ | |valign="top"|changedAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Data Changed|Data Changed | + | |valign="top"|[[Custom Delegates#Data Changed|Data Changed]]||The delegate for the dataChanged event. This is called when navigating between records. |
+ | |valign="top"|dataChangedAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Hotkey|Hotkey | + | |valign="top"|[[Custom Delegates#Hotkey|Hotkey]]||The delegate for the Hotkey event (e.g. F1-F10, Ctrl+F1). The key is passed as a parameter, e.g. 'F2'. |
+ | |valign="top"|hotkeyAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Lost Focus|Lost Focus | + | |valign="top"|[[Custom Delegates#Lost Focus|Lost Focus]]||The delegate for the LostFocus event |
+ | |valign="top"|lostFocusAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Middle Click|Middle Click | + | |valign="top"|[[Custom Delegates#Middle Click|Middle Click]]||The delegate for the MiddleClick event |
+ | |valign="top"|middleClickAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Mouse Enter|Mouse Enter | + | |valign="top"|[[Custom Delegates#Mouse Enter|Mouse Enter]]||The delegate for the MouseEnter event |
+ | |valign="top"|mouseEnterAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Mouse Leave|Mouse Leave | + | |valign="top"|[[Custom Delegates#Mouse Leave|Mouse Leave]]||The delegate for the MouseLeave event |
+ | |valign="top"|mouseLeaveAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Mouse Down|Mouse Down | + | |valign="top"|[[Custom Delegates#Mouse Down|Mouse Down]]||The delegate for the MouseDown event |
+ | |valign="top"|mouseDownAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Mouse Up|Mouse Up | + | |valign="top"|[[Custom Delegates#Mouse Up|Mouse Up]]||The delegate for the MouseUp event |
+ | |valign="top"|mouseUpAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Mouse Move|Mouse Move | + | |valign="top"|[[Custom Delegates#Mouse Move|Mouse Move]]||The delegate for the MouseMove event |
+ | |valign="top"|mouseMoveAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Resize|Resize | + | |valign="top"|[[Custom Delegates#Resize|Resize]]||The delegate for the Resize event |
+ | |valign="top"|resizeAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Right Click|Right Click | + | |valign="top"|[[Custom Delegates#Right Click|Right Click]]||The delegate for the RightClick event |
+ | |valign="top"|rightClickAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Unload|Unload | + | |valign="top"|[[Custom Delegates#Unload|Unload]]||The delegate for the Unload event |
+ | |valign="top"|unloadAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Context Menu|Context Menu | + | |valign="top"|[[Custom Delegates#Context Menu|Context Menu]]||The delegate for the Context Menu event |
+ | |valign="top"|contextMenuAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Timer|Timer | + | |valign="top"|[[Custom Delegates#Timer|Timer]]||The delegate for the Timer event |
+ | |valign="top"|timerAction||valign="top"|Character | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Timer interval|Timer interval | + | |valign="top"|[[Custom Delegates#Timer interval|Timer interval]]||The timer interval in seconds that the Timer event will be called at runtime |
+ | |valign="top"|refreshInterval||valign="top"|Int | ||
|- | |- | ||
|} | |} | ||
Line 255: | Line 506: | ||
{| 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"|[[Users and Roles|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"|[[Users and Roles|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 266: | Line 521: | ||
{| 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 formitem in a Desktop client (True | False). | + | |valign="top"|[[UI Presentation Rules#Desktop|Desktop]]||Include this formitem in a Desktop client (True | False). |
+ | |valign="top"|desktopUI||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Web|Web]]||Include this formitem in a Web client (True | False). | |valign="top"|[[UI Presentation Rules#Web|Web]]||Include this formitem in a Web client (True | False). | ||
+ | |valign="top"|webUI||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Tablet|Tablet]]||Include this formitem in a Tablet client (True | False). | |valign="top"|[[UI Presentation Rules#Tablet|Tablet]]||Include this formitem in a Tablet client (True | False). | ||
+ | |valign="top"|tabletUI||valign="top"|Boolean | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Phone|Phone]]||Include this formitem in a Phone client (True | False). | |valign="top"|[[UI Presentation Rules#Phone|Phone]]||Include this formitem 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 formitem. Specify multiple states as a comma separated list. | |valign="top"|[[UI Presentation Rules#UI States|UI States]]||UI states that affect this formitem. 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 formitem. | |valign="top"|[[UI Presentation Rules#Initial UI state|Initial UI state]]||The initial UI state for this formitem. | ||
+ | |valign="top"|uiStateInit||valign="top"|Character | ||
|- | |- | ||
|valign="top"|[[UI Presentation Rules#Readonly when|Readonly when]]||Formitem is readonly at runtime if specified expression evaluates to true. | |valign="top"|[[UI Presentation Rules#Readonly when|Readonly when]]||Formitem 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]]||Formitem is visible at runtime if specified expression evaluates to true. | |valign="top"|[[UI Presentation Rules#Visible when|Visible when]]||Formitem 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 | ||
|- | |- | ||
|} | |} | ||
Line 296: | Line 575: | ||
|- | |- | ||
|ActiveX | |ActiveX | ||
− | |No | + | |No (Windows desktop only) |
+ | |- | ||
+ | |Chart (from v8.0) | ||
+ | |Yes | ||
|- | |- | ||
|CheckBox | |CheckBox | ||
Line 305: | Line 587: | ||
|- | |- | ||
|CommandButton | |CommandButton | ||
+ | |Yes | ||
+ | |- | ||
+ | |Container (from v8.0) | ||
|Yes | |Yes | ||
|- | |- | ||
Line 314: | Line 599: | ||
|- | |- | ||
|EditBox | |EditBox | ||
+ | |Yes | ||
+ | |- | ||
+ | |GroupBox (from v8.0) | ||
|Yes | |Yes | ||
|- | |- | ||
Line 320: | Line 608: | ||
|- | |- | ||
|Image | |Image | ||
− | |No ([[Image Gadget Attributes|Image Gadget]] in a Form Section is | + | |Yes (from v7.0). Prior to v7.0: Yes (static 'Background image'), No ('Data source'). [[Image Gadget Attributes|Image Gadget]] in a Form Section is an alternative. |
|- | |- | ||
|Label | |Label | ||
Line 326: | Line 614: | ||
|- | |- | ||
|LCDnumber | |LCDnumber | ||
− | | | + | |Yes (from v5.0) |
|- | |- | ||
|ListBox | |ListBox | ||
− | | | + | |Yes (from v4.1). |
|- | |- | ||
|Numeric TextBox | |Numeric TextBox | ||
Line 335: | Line 623: | ||
|- | |- | ||
|OptionButton | |OptionButton | ||
− | | | + | |Yes (from v5.0) |
|- | |- | ||
|OptionGroup | |OptionGroup | ||
− | | | + | |Yes (from v5.0) |
|- | |- | ||
|Progress Bar | |Progress Bar | ||
− | | | + | |Yes (from v8.0) |
|- | |- | ||
|Rich Text Editor | |Rich Text Editor | ||
− | | | + | |Yes (from v8.0) |
|- | |- | ||
|Separator | |Separator | ||
Line 350: | Line 638: | ||
|- | |- | ||
|Slider | |Slider | ||
− | | | + | |Yes (from v8.0) |
|- | |- | ||
|Spinner | |Spinner | ||
Line 356: | Line 644: | ||
|- | |- | ||
|Subtitle | |Subtitle | ||
− | | | + | |Yes |
|- | |- | ||
|TextBox | |TextBox | ||
Line 362: | Line 650: | ||
|- | |- | ||
|TreeGrid | |TreeGrid | ||
− | | | + | |Yes (from v8.0) |
|- | |- | ||
|WebView | |WebView | ||
− | | | + | |Yes |
|- | |- | ||
|} | |} | ||
− | |||
− | |||
− | |||
[[Category:Attributes|5 Advanced Canvas Controls]] | [[Category:Attributes|5 Advanced Canvas Controls]] | ||
+ | [[Category:Formitems]] | ||
+ | [[Category:Lianja v8.0]] |
Latest revision as of 07:04, 9 August 2023
Contents
Overview
Advanced Canvas Controls can be added to a Canvas Section to produce highly customized layouts.
With a Canvas Section selected - note the blue border showing the selected section in the screenshot below - click Advanced in the Form Tools to list the available controls.
Clicking the dashed (----) line at the top of the list gives the list its own floating window as shown here.
Select a control to add it to the Canvas Section then position it as required.
You can also drag and drop table fields from the Pages Files Tab of the App Inspector into a Canvas Section and then position them as required.
These are then automatically data-bound 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.
Additional Help
- Select the Skills Level to change the attributes displayed.
- Toggle the Page Builder Assistant from the Window menu in the App Builder MenuBar to display and edit key attributes.
- Hover the mouse over the caption of a formitem to show the Attributes Quickview for that UI element (from v5.3).
Getting and Setting Attributes
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
Advanced Canvas Control Custom Delegates, Canvas Section Attributes
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 field (unique to the section) | id | Character |
Full name | The full name for this formitem including its parent page and section, e.g. page1.section1.field1 | fullid | Character |
Control type | The type of control, e.g. Commandbutton (readonly) | controltype | Character |
Alias name | The alias name for this formitem | aliasid | Character |
App Doc | The App Doc file for this formitem. This will be included in the App Doc when it is generated. | appdoc | Character |
Tag | The tag for this formitem | 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: field (readonly) | type | Character |
Geometry
Attribute | Description | Name | Type |
---|---|---|---|
Top | Top position in pixels | top | Int |
Left | Left position in pixels | left | Int |
Width | Width in pixels | width | Int |
Height | Height in pixels | height | Int |
Background widget | Lower this widget underneath as a background widget (True | False) | backgroundWidget | Boolean |
Appearance
Attribute | Description | Name | Type |
---|---|---|---|
CSS style | CSS style (separate attributes with ; or use app:/filename.css) | cssStyle | Character |
Caption position | The position of the caption (None | Above | Beside | RightToLeft) | labelType | Character |
Caption size | The size of the caption (Small | Medium | Large | Largest) | labelSize | Character |
Caption width | The width of the caption in pixels. | labelWidth | Character |
Shading | The shading to be applied to the field (None | Light | Dark) | shadingType | Character |
Transparency type | The transparency type to be applied to the field (None | Light | Dark | Custom) | transparencyType | Character |
Border radius | Specify a border radius | borderRadius | Int |
Caption
Attribute | Description | Name | Type |
---|---|---|---|
Show caption | Show the caption for the field (True | False) | showCaption | Boolean |
Caption | The caption for the field | caption | Character |
Caption CSS style | The 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
Note: individual attributes are not applicable to all Advanced Canvas Controls.
Attribute | Description | Name | Type |
---|---|---|---|
Inherit dictionary rules | Inherit the data dictionary rules (True | False) | applyDictionary | Boolean |
Inherit dictionary caption | Inherit the data dictionary caption (True | False) | applyDictionaryCaption | Boolean |
Data source | The table and column that this field is bound to. Specify m.varname to bind to a memory variable. | controlSource | Character |
Data CSS style | The field data CSS style (separate attributes with ';' or use app:/filename.css or specify CSS classes separated by spaces). | dataCSSstyle | Character |
Control CSS style | The control CSS style (separate attributes with ';' or use app:/filename.css or specify CSS classes separated by spaces). | controlCSSstyle | Character |
Caption | The caption for the control. | controlCaption | Character |
Icon image | The icon image for the control (png | jpg | gif). Use app:/imagename.ext for app specific images. |
controlIcon | Character |
Anchor | The anchor value for the control. | controlAnchor | Int |
Tab order | The tab order for this field. | tabOrder | Int |
ActiveX control | ActiveX component control to embed. | objid | Character |
Search field | This field is its Section Search field (True | False) | searchField | Boolean |
Default search field | This field is its Section default search field (True | False) | defaultSearchFieldOrder | Boolean |
User selectable search field | The user can select this as the Section search field interactively by clicking on it (True | False) | userSelectableSearchField | Boolean |
Hide search field indicator | Hide the search field indicator (True | False) | hideSearchKeyIndicator | Boolean |
Search panel field | Include this field in an auto created Section search panel (True | False) | searchPanelField | Boolean |
Relate on change | Relate child Sections when data is changed interactively (True | False) | relateOnChange | Boolean |
Recalculate | Recalculate readonly and calculated fields when data is changed interactively (True | False) | refreshCalculatedOnChange | Boolean |
Ignore after change | After data is edited (TextBox only), the 'Change' delegate only is called and it is assumed to update the field. This provides the ability to handle custom search logic in the App for this field (True | False) | ignoreUpdteAfterChange | Boolean |
Background color | The background color for the data | dataBackColor | Character |
Foreground color | The foreground color for the data | dataForeColor | Character |
Font | The font for the data | dataFont | Character |
Data size | The size of the data (Small | Medium | Large | Largest) | dataSize | Character |
Default | Default value as an expression, e.g. date(), 0.0, space(10) | defaultValue | Character |
List items | A list of choices (OptionGroup / ListBox). | choiceList | Character |
GroupBox caption | An optional caption for the GroupBox containing the CheckListView items (OptionGroup). | headerLabels | Character |
Allow multiple selections | Allow multiple selections (True | False) (OptionGroup). | treeCheckListMultiSelect | Boolean |
Input mask type | The inputmask type (Custom | Currency | Date | Email Address | Number | Text | Time | Alphabetic | Upper Case | Upper Case Alphabetic) | inputMaskType | Character |
Input mask | The inputmask for the field, e.g. @c2, @c4, @!, @^, 999,999.99 or ?regularexpression | inputMask | Character |
Placeholder text | Text to display as grayed-out placeholder text when the field is empty and does not have focus | placeHolderText | Character |
Password input | Echo characters input as * for entering passwords (True | False) | password | Boolean |
Return tabs | Treat the return key as a Tab on this field (True | False) | returnTabs | Boolean |
Mandatory input | Data must be entered in this field (True | False) | mandatory | Boolean |
Choices | Restrict data input to a list of choices, 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 |
Validation | Data input validation expression. Note the use of {}, which is substituted with the current data entered, e.g. Contained in a list: inlist("{}","Apples","Oranges","Bananas") Lookup the value entered in a table: rlookup("{}",customers,"custnames") |
validation | Character |
Error message | The error message to display if data input validation fails | validationErrorMessage | Character |
Tooltip | The tooltip to display | editToolTip | Character |
Hyperlink | Display as a hyperlink (True | False) | editHyperLink | Boolean |
Cell editor type | The cell editor type (Text | Html | Stringlist). From v5.3. | celleditor | Character |
StringList | A comma-separated list of strings that are available in the StringList Editor. This can be specified as a SQL Select statement or a {macro()} procedure call that generate the list dynamically. The StringList Editor is available for editing varchar/memo fields when the Cell editor type is specified as 'Stringlist'. From v5.3. | stringlist | Character |
Text alignment | Text alignment (Left | Center | Right) | editAlignment | Character |
Autosuggestions | Autosuggest a list of values as the user types, 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 |
autoSuggest | Character |
Autosuggestion headers | A comma separated list of column headers to display for the Autosuggestions | autoSuggestHeaders | Character |
Autosuggestion column to search | The column to search for Autosuggestions | autoSuggestColumn | Int |
Context Menu | The context menu to popup when a user right-clicks on the field. Specify this as a comma separated list. | contextMenu | Character |
Layout direction | The Layout direction for this field: Vertical | Horizontal. Applies to OptionGroup. From v8.0. | controllayoutdirection | Character |
Editable | The data is editable (True|False) | editable | Boolean |
URL | URL to render in the webview/chart. Use {expr} macros to substitute data. | url | Character |
Dialog button | The control has a dialog button that can be clicked to call the DialogButtonClicked delegate (True|False). | dialogButton | Boolean |
Dialog button menu | Clicking the Dialog button drops down a menu of the specified comma-separated options. From v9.1.12. | dialogButtonMenu | Character |
Dialog button delegate | The delegate for the DialogButtonClicked event. | dialogButtonAction | Character |
Dialog button menu delegate | The delegate for the DialogButtonMenu event. From v9.1.12. | dialogButtonMenuAction | Character |
Get data mapping | Custom data mapping when reading data. Specify this as an expression. | dataMappingGet | Character |
Set data mapping | Custom data mapping when writing data. Specify this as an expression. | dataMappingSet | Character |
Minimum value | The minimum value for a ProgressBar or Slider. | sliderminimumvalue | Int |
Maximum value | The maximum value for a ProgressBar or Slider. | slidermaximumvalue | Int |
Orientation | The Orientation for a ProgressBar or Slider (Horizontal|Vertical). | sliderorientation | Character |
Tick interval | The Tick interval for a Slider. | slidertickinterval | Int |
Tick position | The Tick position for a Slider (None|Both Sides|Above|Below|Left|Right). | slidertickposition | Character |
Help topic | The help topic to display for this field when F1 is pressed. | helpTopic | Character |
Custom attributes | A semicolon separated list of custom attributes which can be used in CSS selectors, e.g. mandatory=1;border=1;hilite=red You should reference these attributes as user_xxx from any delegates or in any custom CSS theming. |
customAttributes | Character |
Custom Delegates
Note: individual Custom Delegates are not applicable to all Advanced Canvas Controls. See Advanced Canvas Control Custom Delegates for details.
Attribute | Description | Name | Type |
---|---|---|---|
Default Action | The default action for this control. For CommandButtons this will be performed on a Click event. For other applicable controls, it will be performed on the Change event. | ||
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 |
Activate | The delegate for the Activate event | activateAction | Character |
Deactivate | The delegate for the Deactivate event | deactivateAction | Character |
Enabled When | The delegate for the EnabledWhen event | enabledWhenAction | Character |
Visible When | The delegate for the VisibleWhen event | visibleWhenAction | Character |
Click | The delegate for the Click event. | ClickAction | Character |
Link Click | The delegate for the LinkClicked event. | linkClickAction | Character |
After Row Change | The delegate for the AfterRowChange event. | afterRowChangeAction | Character |
Destroy | The delegate for the Destroy event. | destroyAction | Character |
Double Click | The delegate for the dblClick event. | dblClickAction | Character |
Got Focus | The delegate for the GotFocus event. | gotFocusAction | Character |
Interactive Change | The delegate for the InteractiveChange event. This is called after each key is pressed. | interactiveChangeAction | Character |
Change | The delegate for the Changed event. This is called when the Enter key or the Tab key are pressed. | changedAction | Character |
Data Changed | The delegate for the dataChanged event. This is called when navigating between records. | dataChangedAction | Character |
Hotkey | The delegate for the Hotkey event (e.g. F1-F10, Ctrl+F1). The key is passed as a parameter, e.g. 'F2'. | hotkeyAction | Character |
Lost Focus | The delegate for the LostFocus event | lostFocusAction | Character |
Middle Click | The delegate for the MiddleClick event | middleClickAction | Character |
Mouse Enter | The delegate for the MouseEnter event | mouseEnterAction | Character |
Mouse Leave | The delegate for the MouseLeave event | mouseLeaveAction | Character |
Mouse Down | The delegate for the MouseDown event | mouseDownAction | Character |
Mouse Up | The delegate for the MouseUp event | mouseUpAction | Character |
Mouse Move | The delegate for the MouseMove event | mouseMoveAction | Character |
Resize | The delegate for the Resize event | resizeAction | Character |
Right Click | The delegate for the RightClick event | rightClickAction | Character |
Unload | The delegate for the Unload event | unloadAction | Character |
Context Menu | The delegate for the Context Menu event | contextMenuAction | 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 | refreshInterval | Int |
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 formitem in a Desktop client (True | False). | desktopUI | Boolean |
Web | Include this formitem in a Web client (True | False). | webUI | Boolean |
Tablet | Include this formitem in a Tablet client (True | False). | tabletUI | Boolean |
Phone | Include this formitem in a Phone client (True | False). | mobileUI | Boolean |
UI States | UI states that affect this formitem. Specify multiple states as a comma separated list. | state | Character |
Initial UI state | The initial UI state for this formitem. | uiStateInit | Character |
Readonly when | Formitem is readonly at runtime if specified expression evaluates to true. | readonlyWhen | Character |
Visible when | Formitem 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 |
Web/Mobile App Support
Control | Supported in Web/Mobile Apps |
---|---|
ActiveX | No (Windows desktop only) |
Chart (from v8.0) | Yes |
CheckBox | Yes |
ComboBox | Yes |
CommandButton | Yes |
Container (from v8.0) | Yes |
Date TextBox | Yes |
DateTime TextBox | Yes |
EditBox | Yes |
GroupBox (from v8.0) | Yes |
Hyperlink | Yes |
Image | Yes (from v7.0). Prior to v7.0: Yes (static 'Background image'), No ('Data source'). Image Gadget in a Form Section is an alternative. |
Label | Yes |
LCDnumber | Yes (from v5.0) |
ListBox | Yes (from v4.1). |
Numeric TextBox | Yes |
OptionButton | Yes (from v5.0) |
OptionGroup | Yes (from v5.0) |
Progress Bar | Yes (from v8.0) |
Rich Text Editor | Yes (from v8.0) |
Separator | Yes |
Slider | Yes (from v8.0) |
Spinner | Yes |
Subtitle | Yes |
TextBox | Yes |
TreeGrid | Yes (from v8.0) |
WebView | Yes |