Controls
See also: Introduction to Styling, Property Sets, Styling Assistants, Control Common Properties
A control is any element that can be added to a page e.g. input field, table, menu, text etc. Most controls are visible, but this is not necessarily the case. Available controls are listed below and can be added onto a page by dragging from the Palette View to either the WYSIWYG View or the Outline View or by dragging a field or table from the Fields View or Tables View.
Some controls act as a container, meaning that other controls can be added to the control as children e.g. a Panel Control. Container controls have a layout, which defines how its child controls are positioned within the container.
Controls are styled using Styling Assistants. There is one of these assistants for each control and their purpose is to enable you to quickly and easily apply style without the need to understand the complexities of CSS. Once style has been configured for a control, it can be saved in a Property Set and then re-used with other controls. See Introduction to Styling for more information.
An alternative to using the Styling Assistants is to apply CSS classes directly to controls. In-line style can also be used via advanced options provided within the Styling Assistants.
All controls have properties that define the behaviour of the control and are shown in the Properties View when a control is selected in either the WYSIWYG View or the Outline View. Options exist to load and save properties to/from Property Sets which are stored in presentation templates. Properties can also be accessed from a script by referring to controlName.property. For many control properties, it is possible to specify that they should either have a local value or that they should inherit their value from somewhere else, usually a value in a linked Property Set – see local/inherited control properties.
Click on the links below for details of each control and a list of supported properties.
The following controls are available from the Palette View:
|
A simple container rendered using an <article> HTML tag, typically used for standalone docs |
|
|
A simple container rendered using an <aside> HTML tag, typically used for side-panels etc |
|
|
Embedded audio content |
|
|
A barcode that can be added to a web page or a print page |
|
|
Represents a column in a bootstrap grid – only available in bootstrap mode |
|
|
Represents a bootstrap container – only available in bootstrap mode |
|
|
Represents a row in a bootstrap grid – only available in bootstrap mode |
|
|
Clickable button |
|
|
A button within a Table Control |
|
|
An HTML <canvas> tag that can be used as a target for graphical content such as charts |
|
|
A dynamic menu item within either a horizontal or vertical menu |
|
|
Field |
|
|
Controls enabling users to easily upload files from their local file system. |
|
|
Ebase finish button |
|
|
A simple container rendered as a <header> that typically contains footer texts and links |
|
|
A grid layout control |
|
|
A container with title bar and additional texts |
|
|
A simple container rendered as a <header> that typically contains header texts and links etc |
|
|
HTML heading tags <h1> - <h6> |
|
|
Horizontal line |
|
|
Horizontal Menu |
|
|
Allows HTML to be added |
|
|
Hyperlink, either internal (runs FPL script) or external |
|
|
Embed another HTML page into the current page |
|
|
An image in a non-table location |
|
|
An image within a Table Control |
|
|
Includes an external HTML or JSP file |
|
|
An ordered/unordered list for use with dynamic content |
|
|
Displays a list item within a List Control as a hyperlink |
|
|
An ordered/unordered list for use with static content |
|
|
Displays a list item within a List Control as a text |
|
|
A simple container rendered using a <main> HTML tag, used for the main content of a page |
|
|
An individual menu item within either a horizontal or vertical menu |
|
|
Acts as a location for error and warning messages |
|
|
A simple container rendered as a <nav> that typically contains navigation links |
|
|
Ebase next page navigation button |
|
|
Represents a page break when the page is printed to a PDF |
|
|
A panel containing Ebase page navigation buttons and Ebase save/restore buttons |
|
|
A page level container with a page header text and additional texts |
|
|
A simple container rendered as a <div> |
|
|
Ebase previous page navigation button |
|
|
Table where each row is displayed across multiple lines |
|
|
Table where the content is displayed as an ordered/unordered list |
|
|
Ebase restore button (save/restore feature) |
|
|
Ebase save button (save/restore feature) |
|
|
A simple container rendered as a <section> |
|
|
Horizontal and/or vertical spacer |
|
|
An individual Tab within a Tab Set |
|
|
Tab Set |
|
|
Table |
|
|
Table Column |
|
|
A horizontal scroll page within a Table Control |
|
|
Text |
|
|
A container with a title bar and configurable corners |
|
|
Vertical Menu |
|
|
Embedded video content |
The following system controls are not available from the Palette View, but can be configured:
|
A special control representing the page – this control cannot be deleted |
|
|
Represents a part-page component |
|
|
An individual cell within a Grid Control |
|
|
A single table row within a Repeater |
|
|
A single table row within a Repeater List |