Canvas Sections allow highly customized layouts with a wide range of advanced containers and controls.
The Canvas Designer is a drag-and-drop editor providing pixel-perfect positioning of UI Controls In a Canvas Section.
Using the Canvas Designer you can drag-and-drop table columns to create UI Controls that are automatically data-bound.
Adding a Canvas Section
To add a Canvas Section to a Page, select Canvas from the Sections menu in the Form Tools.
Drag and Drop Columns
Add automatically data-bound UI controls to your Canvas Section using drag and drop.
Make sure the Tables tab is selected.
Click on its name to select a table from the Table Names panel.
Then just drag a column from the Column Names tab and drop it where you want it to be positioned in the Canvas Section.
Select a control then drag it to reposition it aided by the crosshairs, rulers and tooltip showing x, y coordinates, width x height and anchor values. (These aids from Lianja v4.1).
Click the top left corner of the Canvas Section to toggle the display of the grid lines.
The Pages Files Tab stays selected as you drag and drop the columns and fine-tune the position of the controls.
To edit the control's attributes, select the Attributes Tab in the App Inspector (if the App Inspector is closed, double-click on the control's caption to open the Attributes dialog).
Advanced Canvas Controls
Click on a control in the Advanced menu to add it to the selected Canvas Section, then click on the control's border and drag it to reposition it as with the drag and drop fields above.
|ActiveX||Control for embedded ActiveX component (Windows desktop)|
|CheckBox||Control for boolean state - True (checked) or False (unchecked)|
|ComboBox||Control combining a TextBox and a ListBox|
|Date TextBox||Control combining a date TextBox and a popup calendar|
|DateTime TextBox||Control combining a date/time TextBox and a popup calendar|
|Hyperlink||Hyperlink label control|
|Image||Control for displaying images|
|Label||Textual label control|
|LCDnumber||Numeric label control with LCD-like digits|
|ListBox||Control with a single column list|
|Numeric TextBox||Textbox control for numeric values|
|OptionButton||Control to select/deselect an option|
|OptionGroup||Container used to group OptionButtons|
|Progress Bar||Bar control for minimum, current (%) and maximum numeric values|
|Rich Text Editor||Rich text editor control|
|Separator||Separator label control|
|Slider||Vertical or horizontal numeric slider with minimum and maximum values|
|Spinner||Numeric TextBox control with increment/decrement controls|
|Subtitle||Subtitle label control|
|TreeGrid||Tree grid control|
|WebView||Embedded WebKit Control|
|Send to back||Send the selected control(s) to the back (for overlapping controls).|
|Bring to front||Bring the selected control(s) to the front (for overlapping controls).|
|Enable/Disable click events||See below.|
|Enable/Disable move events||See below.|
Select a control, or select multiple controls by pressing the Shift key while selecting, then choose the size.
For 'Same ...' options, select multiple controls by pressing the Shift key while selecting then choose an option to match the attribute(s) of all the selected controls to that of the first selected control.
For 'shading' options, select one or more controls, then choose the option.
'Transparency' options do not apply to Canvas Section controls.
Select multiple controls by pressing the Shift key while selecting then choose an option to align or match the attribute(s) of all the selected controls to that of the first selected control.
The Align menu's Text submenu allows you to change the data text alignment of Advanced Controls.
Select one or more controls, then choose the alignment.
Disable Click Events
To make it easier to click on Advanced Canvas Controls to select them, particularly for CommandButtons, the Headerbar has a toggle to enable and disable click events. Click events are enabled in the Page Builder by default. Click the toggle to disable them so they do not fire when you click on a control. Click the toggle again to re-enable them.
Disable Move Events
To make it easier to click on Advanced Canvas Controls to select them, particularly when shift-selecting multiple controls, the Headerbar has a toggle to enable and disable move events. Move events are enabled in the Page Builder by default. Click the toggle to disable them so you do not accidentally move a control when you click on it. Click the toggle again to re-enable them.