Difference between revisions of "Advanced Canvas Control Attributes"
Yvonne.milne (Talk | contribs) (→Details) |
Yvonne.milne (Talk | contribs) (→Data) |
||
(25 intermediate revisions by 2 users not shown) | |||
Line 23: | Line 23: | ||
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 31: | Line 31: | ||
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. | ||
+ | |||
+ | ===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== | ||
Line 71: | Line 80: | ||
|- | |- | ||
|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"|[[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"|( | + | |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"|[[Details Attributes#Alias name|Alias name]]||The alias name for this formitem | ||
|valign="top"|aliasid||Character | |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"|[[Details Attributes#Tag|Tag]]||The tag for this formitem | ||
Line 81: | Line 96: | ||
|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 control: field (readonly) | |valign="top"|[[Details Attributes#Type|Type]]||The type of control: field (readonly) | ||
Line 130: | Line 148: | ||
|valign="top"|labelWidth||valign="top"|Character | |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"|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"|transparencyType||valign="top"|Character | ||
|- | |- | ||
Line 175: | Line 193: | ||
|valign="top"|captionBorderColor||valign="top"|Character | |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"|transparency||valign="top"|Int | ||
|- | |- | ||
Line 268: | Line 286: | ||
|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"|defaultValue||valign="top"|Character | ||
+ | |- | ||
+ | |valign="top"|[[Data Attributes#List items|List items]]||A list of choices (OptionGroup / ListBox). | ||
+ | |valign="top"|choiceList||valign="top"|Character | ||
+ | |- | ||
+ | |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"|[[Data Attributes#Allow multiple selections|Allow multiple selections]]||Allow multiple selections (True | False) (OptionGroup). | ||
+ | |valign="top"|treeCheckListMultiSelect||valign="top"|Boolean | ||
|- | |- | ||
|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"|[[Input Masks|Input mask type]]||The inputmask type (Custom | Currency | Date | Email Address | Number | Text | Time | Alphabetic | Upper Case | Upper Case Alphabetic) | ||
Line 301: | Line 328: | ||
|valign="top"|[[Data Attributes#Hyperlink|Hyperlink]]||Display as a hyperlink (True | False) | |valign="top"|[[Data Attributes#Hyperlink|Hyperlink]]||Display as a hyperlink (True | False) | ||
|valign="top"|editHyperLink||valign="top"|Boolean | |valign="top"|editHyperLink||valign="top"|Boolean | ||
+ | |- | ||
+ | |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"|[[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"|[[Formitem Appearance#Text alignment|Text alignment]]||Text alignment (Left | Center | Right) | ||
Line 316: | Line 349: | ||
|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"|[[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"|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"|editable||valign="top"|Boolean | ||
|- | |- | ||
− | |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"|[[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"|[[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"|dialogButton||valign="top"|Boolean | ||
|- | |- | ||
− | |valign="top"|[[Custom Delegates#Dialog button delegate|Dialog button delegate]]||The delegate for the DialogButtonClicked event | + | |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"|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. | ||
Line 331: | Line 376: | ||
|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"|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. | ||
Line 497: | Line 557: | ||
|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"|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 506: | Line 575: | ||
|- | |- | ||
|ActiveX | |ActiveX | ||
− | |No | + | |No (Windows desktop only) |
+ | |- | ||
+ | |Chart (from v8.0) | ||
+ | |Yes | ||
|- | |- | ||
|CheckBox | |CheckBox | ||
Line 515: | Line 587: | ||
|- | |- | ||
|CommandButton | |CommandButton | ||
+ | |Yes | ||
+ | |- | ||
+ | |Container (from v8.0) | ||
|Yes | |Yes | ||
|- | |- | ||
Line 524: | Line 599: | ||
|- | |- | ||
|EditBox | |EditBox | ||
+ | |Yes | ||
+ | |- | ||
+ | |GroupBox (from v8.0) | ||
|Yes | |Yes | ||
|- | |- | ||
Line 530: | Line 608: | ||
|- | |- | ||
|Image | |Image | ||
− | |Yes (static 'Background image'), No ('Data source'). [[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 536: | Line 614: | ||
|- | |- | ||
|LCDnumber | |LCDnumber | ||
− | | | + | |Yes (from v5.0) |
|- | |- | ||
|ListBox | |ListBox | ||
Line 545: | 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 560: | Line 638: | ||
|- | |- | ||
|Slider | |Slider | ||
− | | | + | |Yes (from v8.0) |
|- | |- | ||
|Spinner | |Spinner | ||
Line 566: | Line 644: | ||
|- | |- | ||
|Subtitle | |Subtitle | ||
− | | | + | |Yes |
|- | |- | ||
|TextBox | |TextBox | ||
Line 572: | Line 650: | ||
|- | |- | ||
|TreeGrid | |TreeGrid | ||
− | | | + | |Yes (from v8.0) |
|- | |- | ||
|WebView | |WebView | ||
Line 582: | Line 660: | ||
[[Category:Attributes|5 Advanced Canvas Controls]] | [[Category:Attributes|5 Advanced Canvas Controls]] | ||
[[Category:Formitems]] | [[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 |