skip to main content

Customizing the Web Client

The Application Schema allows to customize certain aspects of the Web Client user interface, including the layout of forms and tables and the menu items in the application view.

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.

Designer employee application form layout editor

Example of Form layout editor

The panel looks like in the figure, with the form layout on the right (where each field represents an attribute or a role enabled in the class) and the Widgets and Rules tabs on the left.

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 (Open Plugin);
  • Other widgets allows you to enrich the form with links, buttons for scripts, labels, separators and HTML code.

Widgets tab

From the Rules tab, rules can be defined through Javascript code to dynamically enable or disable some widgets of the form, according to different conditions.

The 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.

The condition editor of the Rules panel

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 (Remove).

The Move to command 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.

The Reset to default button returns the layout to the default configuration, removing all customizations.

A class with the modified Form layout 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.

Modifying a single Form layout element

Widgets #

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 Gui icons edit 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.

Modify layout for a single role

Example of widget properties for an association role.

Livetable #

The Livetable view is the most common Association manager and the default widget for any role. By clicking on Set (or 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.

Representation relation role table single

Single-row table

Representation relation role table multiple

Multi-row table

Customizing the Livetable #

List layout editor

Example of List layout editor for a single-row table or multi-row table

The customization of tabular views is made through the List layout editor; this panel is accessible in two ways:

  1. From the GUI widgets configurator, click on the Config button next to the choices for tabular widgets (single-row table, multi-row table and editable multi-row table). For the tabs Association to one and Association to many you can define two different layouts, one for the tabular display of associated objects (Associated) and one for the associable ones (Associable);

  2. From the Form layout editor, right-click on the table and select the Edit properties option.

Edit properties on Livetable

Once the table properties panel is open, check the Use custom layout option and click the Open button.

Edit Livetable Properties

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.

Example customization from the List layout editor

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... > last_name).

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:

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.

Representation relation role dropdown

Dropdown menu

Representation relation role set of dropdowns

Set of dropdowns

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.

Representation relation role set of radio button

Listbox #

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.

Representation relation role list single

Single-selection listbox

Representation relation role list multiple

Multi-selection listbox

Checkbox #

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.

Representation relation role set of checkbox

Set of checkboxes

Representation relation role tree of checkbox

Tree of checkboxes

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 Gui icons edit Edit properties and selecting one of the following representations:

CheckboxDropdownButtons
CheckboxDropdown menuSet 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.

Edit widget of a role

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.

The Config button opens the List layout editor, which allows further layout customizations (undoable by clicking the Reset button).

Designer employee gui widget configurator association to one

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.

The Association to one and Association to many tabs also show the number of incoming roles using each widget.

Customizing the application view menu #

From the Schemas tab, an Application Schema can be expanded by clicking on , thus accessing the configuration panel of its Application menu.

Accounting 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.

The + and - 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):

  • Widgets

    • Submenu adds a sub-menu (to add items to it, drag existing menu items into it);
    • Separator adds a separator;
    • Spacer inserts a space;
    • HTML Snippet integrates in the menu a fragment of HTML code (for example an image);
  • Commands

    • Open URL allows you to insert an external link;
    • Manage objects opens the form for object management;
    • Create objects opens the form for the creation of an object.

Example #

Let’s take a look at an example of customizing the Application menu:

The Application menu

Example of customizing the Administration view menu

Example in the GWT Client 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.