Formitem Attributes
From Lianjapedia
Contents
Overview
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
Form Section Attributes, Gadget Attributes
Demo Apps (included in the Lianja App Builder distribution):
- Lianja Demo (lianjademo)
- Lianja Web UI Demo (example_webapp2)
- Lianja Mobile UI Demo (example_mobileapp1)
and many more
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 |
| 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 |
|---|---|---|---|
| Absolute | Enable or disable absolute positioning (True | False) | absolutePosition | Boolean |
| Top | Top position in pixels | absolutePositionY | Int |
| Left | Left position in pixels | absolutePositionX | Int |
| Width | Width in pixels | absolutePositionWidth | Int |
| Height | Height in pixels | absolutePositionHeight | Int |
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 |
| 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 |
|---|---|---|---|
| Caption | The caption for the field | caption | Character |
| Caption CSS style | The field 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). | captionIcon | Character |
| Border width | The caption border width | captionBorderWidth | Int |
| Border color | The caption border color | captionBorderColor | Character |
| Transparency | Specify a transparency percentage from 0 to 100 | transparency | Int |
| Gradient colors | Render the caption color as a gradient (True | False) | captionGradient | Boolean |
| Gradient type | Specify the gradient type | captionGradientType | Int |
| Gradient start color | Gradient start color | captionFromColor | Character |
| Gradient end color | Gradient end color | captionToColor | Character |
Data
| Attribute | Description | Name | Type |
|---|---|---|---|
| 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 |
| Tab order | The tab order for this field. From v6.3. | tabOrder | Int |
| 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 |
| 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 |
| Editable | The data is editable (True|False). | editable | Boolean |
| 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 |
| 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
| Attribute | Description | Name | Type |
|---|---|---|---|
| Init | The delegate for the Init event | initAction | Character |
| Load | The delegate for the Load event | loadAction | Character |
| Ready | The delegate for the Ready event | readyAction | Character |
| Activate | The delegate for the Activate event | activateAction | Character |
| Deactivate | The delegate for the Deactivate event | deactivateAction | Character |
| Got Focus | The delegate for the GotFocus event | gotFocusAction | Character |
| Lost Focus | The delegate for the LostFocus event | lostFocusAction | Character |
| Link Click | The delegate for the Hyperlink Click event. This is called with two arguments: functionname(controlsource,text) | linkClickAction | 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 |
| 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 |
