Customizing the instance manager #
The Form layout editor allows to customize both the form for handling objects of a class, and the summary screen with information about an object of the same class. To open the editor for a class, right-click on it to open its
Class menu and select the
Set form layout... option. Alternatively, the same editor can be reached by clicking directly on the corresponding icon in the footer.
You can reorder the fields regardless of the order in which they appear in the class; to do so, drag and drop them onto the layout.
The Widgets tab allows you to introduce additional elements into the form:
- Derived attributes contains the derived attributes of the class, which by default are active but are not shown by the instance manager; you can drag them into the layout to make them visible, although they are still non-editable fields. If no derived attributes have been declared on the class, this tab is not present;
- Buttons contains buttons that can open a link (
Open URL) or run a Plugin of type FormActionHandler (
- Other widgets allows you to enrich the form with links, buttons for scripts, labels, separators and HTML code.
Create button opens the Condition editor, from which it is possible to define a Boolean condition that, depending on its truth value, may or may not alter the behavior of the widgets. The
Params... button provides quick access to some parameters that can be defined in the condition.
Under the form layout we find the
New section button, which allows to subdivide the form content by tabs; it can be pressed as many times as many tabs as you want to add. Right-clicking on one of them you can define nested sub-sections (
New sub-section), change the order of the tabs (
Move to) and remove them from the form (
To insert any form element into a new subsection or an existing one, you can right-click on it and choose the
Move to option from the context menu.
Reset to default button returns the layout to the default configuration, removing all customizations.
Once the form layout changes are confirmed by clicking
OK, the corresponding icon ( ) appears highlighted on the class.
Customizing the CSS of form elements #
Clicking on any element of the Form layout shows its CSS properties in the Property column of the table that appears at the bottom left. You can modify these properties by clicking directly on one of the cells in the Value column (e.g. customizing the font, color and spacing of the text, or the size of the form fields).
You can also edit more general properties by clicking on
Edit CSS properties at the top.
A widget is a UI component that allows you to manage a class, attribute, or role; examples of widgets are the Livetable for a class, a form field for an attribute, and a select for an association role of association to one. In the Web Client, these model elements can be represented with different widgets depending on the application view or form in which they appear.
For all attributes there is a Attribute manager, a widget that consists of a form field, whose layout depends on the data type of the represented attribute. For boolean attributes, different representations of the represented attribute are available.
The representation of roles is usually done via a widget that provides a tabular view. In some cases (e.g., for association roles), the set of Association managers includes additional widgets, such as dropdown menus (dropdown menu) and checkboxes.
By right-clicking on a role and selecting
Edit properties you can open the properties panel of its widget. From this panel you can choose which widget to use and customize it further.
The Livetable view is the most common Association manager and the default widget for any role. By clicking on
Add, depending on the multiplicity) you can access the Livetable of associable objects of the class referred by that role and select one or more records to associate. These records will then appear in the widget and can be inspected with
Open or removed from association with
Unset/Remove. With to-many multiplicity, the widget also supports all Livetable features.
An Editable multi-row table, as opposed to a common Multi-row table, allows you to edit objects in-line, that is, directly on the table.
Customizing the Livetable #
The customization of tabular views is made through the List layout editor; this panel is accessible in two ways:
From the GUI widgets configurator, click on the
Configbutton next to the choices for tabular widgets (single-row table, multi-row table and editable multi-row table). For the tabs
Association to oneand
Association to manyyou can define two different layouts, one for the tabular display of associated objects (
Associated) and one for the associable ones (
From the Form layout editor, right-click on the table and select the
Once the table properties panel is open, check the
Use custom layout option and click the
Note that the Editable multi-row table does not allow you to hide columns or group by them, nor can it be collapsed.
Let’s look at an example of a custom layout for the Employee class.
Employees have been grouped by team (Group by columns >
team_name); within this grouping they then appear according to the alphabetical order of last names (
Set sorting... >
Moreover, some information (such as contacts, number of active assignments, etc.) has been hidden from the initial table view. However, it is possible to restore the visibility of these columns in the Livetable.
Additional widgets for association roles #
Although the choice for representing roles and compositions is limited to Livetables (single-row, multi-row and Editable multi-row), Livebase offers a wider choice regarding the widgets you can use to make an association. In fact, in addition to the Livetable view, you can choose from the following options:
Dropdown menu #
It consists of a drop-down menu whose options are, by default, the object titles of the objects that can be associated with that role. This is the default widget when the role refers to a class with only one attribute. This drop-down menu can be customized by sorting the objects or changing the label used to represent the options (choosing any other attribute instead of the object title). With to-many multiplicity, the widget becomes a set of dropdown menus.
Set of radiobuttons #
Allows you to choose an object to associate with from a set of available objects of that class based on its label. This list can also be customized like the drop-down menu; the only difference is that this selector is exclusive to roles with to-one multiplicity.
It is quite similar to the classic drop-down menu, with two differences: the menu is unique even for many, but you can select more objects from the list by holding down CTRL; moreover if you reopen the menu, the already selected objects are highlighted.
It is similar to the Listbox, but each label has a clickable checkbox. Both widgets are exclusive for roles with to-many multiplicity. In case the role refers to a class with two or more attributes, you can use the Tree of checkboxes to group the objects according to one of the attributes, as in the figure.
Widget for composition roles #
The only widgets available for compositions to many are the tabular views that allow their full management (Livetable and Editable). The same happens when the composition is to one but is not stringent, i.e. it has multiplicity Zero or one (
01): each whole object directly incorporates the instance handler of its own part object.
Widgets for Boolean attributes #
Usually, for attributes with an input field there is only one widget. Boolean attributes are an exception to this rule, and are the only type of attribute that you can represent with several widgets. The choice is made by clicking on
Edit properties and selecting one of the following representations:
|Checkbox||Dropdown menu||Set of radiobuttons|
Set widget for a specific role #
From the Application Schema , right-click on a role to open its
Role menu and select the
Edit widget properties... option; from the drop-down menu, select the desired widget.
Customizing the class manager #
The GUI widgets configurator allows you to choose default widgets and layouts for all roles pointing to a given class (i.e. incoming roles); to open it, right-click on the class to open its
Class menu and select the
View GUI widgets option. Alternatively, click on the
Open GUI widgets configurator icon in the class footer.
The editor is divided into three tabs:
- Management: select the representation of the class manager, choosing between classic Livetable (Single-row or Multi-row table) and Livetable with support for in-line editing (Editable multi-row table).
- Association to one: configure the widget used by default to associate an object of the selected class when it is involved in an association to one.
- Association to many: configures the widget used by default to associate multiple objects of the selected class when it is involved in an association to many.
Config button opens the List layout editor, which allows further layout customizations (undoable by clicking the
The widgets selected in this panel appear in all forms that have not been manually edited. From the Form layout editor you can still override the default configuration, defining which widgets to use in specific forms.
Association to one and
Association to many tabs also show the number of incoming roles using each widget.
Customizing the application view menu #
Schemas tab, an Application Schema can be expanded by clicking on , thus accessing the configuration panel of its Application menu.
Here you can customize the menu layout for that specific application view, rearranging the items by clicking on them and dragging them with the mouse.
- buttons at the top of the Layout allow you to expand or collapse all menu items.
From the Palette side panel, you can add widgets and commands to the menu (similar to what you do in the Form layout editor):
Submenuadds a sub-menu (to add items to it, drag existing menu items into it);
Separatoradds a separator;
Spacerinserts a space;
HTML Snippetintegrates in the menu a fragment of HTML code (for example an image);
Open URLallows you to insert an external link;
Manage objectsopens the form for object management;
Create objectsopens the form for the creation of an object.
Let’s take a look at an example of customizing the Application menu:
In the image on the right we can see the result of the customizations: the menu of the Administration view has been divided into sub-sections (“Configuration”, “Ingredients”, “Products” and “Shippings”).
Below the form for the management of system users, a link to an external web page has also been added: in this case, the label “Help” directs the user to a help page with technical documentation). In addition, the last two items of the menu have been separated from the other items with separators.