The Form Tools at the bottom of the Page Builder in the Pages Workspace are used to add new UI Elements to your App: Pages, Sections, Gadgets, Fields, Advanced Controls and Extensions. Using the Form Tools, you can also control common appearance attributes and create new Collections for grouping Pages in the Page Menu.
Collections are used to group Pages together in the Pages Menu. Click Collection in the Form Tools and you will be prompted to enter a name for your new collection.
In the Pages Menu, select and drag and drop existing Pages to add them to the newly created collection.
After dragging and dropping Employee Information, this Page has now been added to the HR collection.
Collections can also be created by right-clicking in the Pages Menu panel and selecting New collection....
Right-click on a collection name to display the context menu. This gives options to Rename... or Delete... the collection.
Add a Page of the following type:
|Blank||Creates a new Page in the App. The Page's Name (identifier), Title (as displayed in the Pages Menu) and Caption (as displayed in the Page Header) will be set to pageX where X is a number. These can be modified as required in the Page Attributes.|
|Page Center||Creates a new Page Center Page in the App. Page Center Pages are used for Page navigation and have a single Page Center Section containing tiles for Page selection. The Page Name, Title and Caption are given default values as for a Blank Page above.|
|VFP Forms||After you have imported a Visual FoxPro Form into the current App, it is listed here. A new Page is created in the App with a full page Custom Section that uses the imported VFP Form code. The Page Name, Title and Caption are given default values as for a Blank Page above.|
|VFP Classes||After you have imported a Visual FoxPro Class Library into the current App, it is listed here. A new Page is created in the App with a full page Custom Section that uses the imported VFP Class Library code. The Page Name, Title and Caption are given default values as for a Blank Page above.|
|Templates||After you have saved a Page as a Template, it is listed here.|
Add a Section of the following type:
|Form||Form Sections contain Fields and Gadgets and handle the layout automatically.|
|Grid||Grid Sections are used for displaying and editing multiple rows of data. In the desktop client, they can optionally have a split display with a built-in single-row form.|
|Image Strip||Image Strip Sections display a horizontal 'strip' of data-bound images. They can optionally include a text notes panel.|
|TabView||TabView Sections are tabbed containers for other Sections.|
|Attachments||Attachments Sections are grids used for data-bound document and image storage and retrieval.|
|Canvas||Canvas Sections allow highly customized layouts with a wide range of advanced containers and controls.|
|CatalogView||CatalogView Sections are data bound WebViews that display a catalog of items. Each page provides a table of cells comprising an image, a caption, a sub caption, some details and optional links to drill down to additional information about the selected catalog item.|
|TreeView||TreeView Sections are data-bound tree grids that allow you to drill down through levels of hierarchical nodes.|
|CarouselView||CarouselView Sections display a series of full-section images along with their captions. Images can scroll automatically or using on-screen controls. They are ideal as welcome pages.|
|CommentsView||CommentsView Sections are used for social interaction within business Apps. Users can collaborate directly inside the App with access to the entire conversation history.|
|DocumentView||DocumentView Sections are used to view pdf documents. DocumentView Sections include tools for printing, downloading, searching, zooming and navigating the document displayed without having to install any plugins.|
|GalleryView||GalleryView Sections are used to display a gallery of Tiles. Clicking on a Tile automatically displays a full-section Content panel.|
|VideoPlayer||VideoPlayer Sections are used to display a data-bound video player.|
|Report||Report Sections are used to display tabular reports.|
|Calendar||Calendar Sections provide a calendar interface to allow for the creation, display, update and deletion of appointments and other time planner events.|
|Org Chart||Org Chart Sections are used to display an organization chart with clickable nodes.|
|Page Center||Page Center Sections display Tiles for opening Pages. The interface is the equivalent of the Lianja App Center, but for Pages instead of Apps.|
|Charts||Chart Sections provide a quick and easy way to clearly and graphically communicate information about your data from the simplest pie or bar chart through to more sophisticated and complex graphs.|
|Timeline||Timeline Sections display timeline (chronological row versioning for Lianja database tables) information.|
|Notifications||Notifications Sections display timeline (chronological row versioning for Lianja database tables) notifications.|
|Templates||After you have saved a Section as a Template, it is listed here.|
Add a Gadget of the following type to a Form Section:
|Image||Image Gadgets display data-bound or file based images.|
|Richtexteditor||Richtexteditor Gadgets are rich text editors (HTML formatting).|
|Editbox||Editbox Gadgets are plain text editors.|
|Listview||Listview Gadgets display a list of selectable items.|
|Grid||Grid Gadgets are used for displaying and editing multiple rows of data.|
|Checklistview||Checklistview Gadgets display a group of selectable checkboxes or radio buttons.|
|Treeview||Treeview Gadgets are data-bound tree grids that allow you to drill down through levels of hierarchical nodes.|
|Component||Component Gadgets embed a custom UI component from the UI Page Library.|
|Chart||Chart Gadgets contain charts and graphs for data visualization.|
|Google Map||Google Map Gadgets display URL based bar charts.|
|Google Bar Chart||Google Bar Chart Gadgets display URL based bar charts.|
|Google Pie Chart||Google Pie Chart Gadgets display URL based bar charts.|
The Field option is available when you have a Form Section selected. Click Field and a new field will be added to the section after any existing fields or gadgets. The new field is not data-bound and has the Caption Untitled.
Add a Divider to a Form Section:
|Subtitle||A label with a caption.|
|Horizontal Separator||A horizontal line.|
|Column Divider||A label with a caption at the top of a column.|
|Spacer||An empty label with the same default background as a field.|
Select a control, or select multiple controls by pressing the Shift key while selecting, then choose the size.
For 'Same ...' options, select multiple Advanced 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. This can also be used on a Form Section to affect the shading for all its formitems.
'Transparency' options can be used on a Form Section to affect the transparency for all its formitems.
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.
Select one or more controls, then choose the alignment.
|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 Canvas Designer: Disable Click Events.|
|Enable/Disable move events||See Canvas Designer: Disable Move Events.|
The Themes menu lists the available App appearance themes. Click to apply the selected theme. See Understanding UI Theming in Lianja for more information.
The Extensions menu lists the available extension tools. Click to open the selected tool. See Tools and Extensibility for more information.