3. How to use widgets – user interface building blocks

In Workmaster, the user interface (UI) within a page is built using widgets, which provide the functionality for creating interactive applications.

What is a widget?

Each widget is a distinct element within the page and occupies space on the screen. A widget provides functions such as data entry and validation, data list management, charts, images, and videos, navigation and popups, and many more.

All widgets have some common features associated with how they appear on screen, such as their position, size, color, text content and background images. These settings or 'properties' can be edited in the non-widget specific section of the Property Editor.

Each type of widget also has settings specific to what it does. For example the Icon widget displays a selectable icon, and this selection appears in the widget section of the Property Editor.

Most widgets can contain other widgets. Container Widgets are those whose purpose is to organize contained widgets - for example in grids or lists. Even non container widgets can sometime contain other widgets. In this case standard features for controlling their content is still available. Widgets can contain others are shown with a special diagonally shaded area in the Widget Tree when they are empty.

Widgets allow text as their content - this is known as 'content text'. Content text can be edited by double clicking on the widget's area in the Page Editor. If it allows text content, the editor will let you directly enter text into the widget area.

Below are some core widgets that come with Workmaster, and what they do:

Core Widgets and Their Functions

This section introduces several essential widgets used to create interactive and dynamic user interfaces:

1. Page Container Widget

A Page Container is a specialized widget that displays other pages within its area. This allows a single page, such as a Frame Page, to change its content dynamically without needing to reload or refresh the entire page. We will revisit the use of page containers when we learn how to use rules to control widget behaviors based on user actions or data changes.

For more on page containers, refer to the Page Container section in the User Manual.

2. Layout Containers (Layout Widgets)

Layout Containers are widgets used to organize content in structured formats such as tables, grids, or side-by-side arrangements. These containers help maintain a clean and organized layout for the page’s widgets.

To learn how to implement layout containers effectively, visit the Layouts section in the User Manual.

3. Fields (Data Entry Widgets)

Data Entry Widgets are used to collect input from users. These widgets include fields like text inputs, dropdowns, date pickers, and checkboxes.

To learn more about adding and configuring data entry fields, refer to the Field and Headers section in the User Manual.

4. Data List Widget (Repeat Element)

The Data List Widget is used to show repeating data that is retrieved from data models and queries. Items withing the Data List will be repeated for each unit of data retrieved from the underlying query or data model.

For more on using data list widgets, refer to the Data List section in the User Manual.

Click on the Save button to store your changes.

How to Work with Widgets in Workmaster

Follow the detailed instructions provided in the Widget Panel #Working with Widgets in Workmaster to effectively work with widgets in the platform.

To reinforce your understanding of using widgets in Workmaster, we highly encourage you to complete Exercises #Exercise 3: Populating Pages with Widgets.