Difference between revisions of "Advanced Canvas Control Attributes"

From Lianjapedia
Jump to: navigation, search
(Overview)
(Web/Mobile App Support)
Line 536: Line 536:
 
|-
 
|-
 
|LCDnumber
 
|LCDnumber
|No
+
|Yes (from v5.0)
 
|-
 
|-
 
|ListBox
 
|ListBox
Line 545: Line 545:
 
|-
 
|-
 
|OptionButton
 
|OptionButton
|No
+
|Yes (from v5.0)
 
|-
 
|-
 
|OptionGroup
 
|OptionGroup
|No
+
|Yes (from v5.0)
 
|-
 
|-
 
|Progress Bar
 
|Progress Bar
Line 566: Line 566:
 
|-
 
|-
 
|Subtitle
 
|Subtitle
|No
+
|Yes
 
|-
 
|-
 
|TextBox
 
|TextBox

Revision as of 20:37, 10 December 2018

Overview

Advanced Canvas Controls can be added to a Canvas Section to produce highly customized layouts.

Canvas section.png


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.

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 and then position them as required.

These are then automatically data-bound controls.

Drag and drop fields


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.

Bm-attributes.png

The attributes available consist of some common ones as well as some specific to the UI Element being inspected.

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 (tbc) Character
Alias name The alias name for this formitem aliasid Character
Tag The tag for this formitem tag Character
Meta types A comma separated list of metatype names metatypes 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 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
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
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 delegate The delegate for the DialogButtonClicked event dialogButtonAction 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

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

Web/Mobile App Support

Control Supported in Web/Mobile Apps
ActiveX No
CheckBox Yes
ComboBox Yes
CommandButton Yes
Date TextBox Yes
DateTime TextBox Yes
EditBox Yes
Hyperlink Yes
Image Yes (static 'Background image'), No ('Data source'). Image Gadget in a Form Section is supported)
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 No
Rich Text Editor No (EditBox is supported)
Separator Yes
Slider No
Spinner Yes
Subtitle Yes
TextBox Yes
TreeGrid No
WebView Yes