Working with the Widget Designer
The Widget Designer offers a user-friendly, no-code interface for designing and customising user interfaces.
This allows you to tailor the appearance, behavior, and content of a user interface to your specific needs. Customisation options include changing colors, titles, font sizes, connecting data sources, and more.
This article shows the basic functionalities of the widget designer.
A basic understanding of creating folders, databases, and user interfaces is recommended before proceeding with this article.
Accessing the Widget Designer
There are three primary ways to design a user interface:
Visualise Data: Design charts and graphs to display information visually.
Record Data: Create forms to collect user input.
Start from Scratch: Design user interfaces from the ground up.
You can use any of the above methods to open the desired user interface on the Widget Designer page.
For instance, let's use the "Record Data" option.
On the app homepage, go to My Work module on the left.
Search and select the required folder. Click on the folder to open it.
Navigate to the User Interfaces tab.
Click the Plus icon and select Record Data.
Choose a data source. For the data source, you can select an existing Lucy Action or a database.
To select a database,
Go to the Databases tab. A list of database will appear.
Click on the desired database and click Select this source.
Click Looks Good.
A form user interface will display on the widget designer page. The widget designer's Design mode is activated by default.
Basic Functionalities of the Widget Designer
Whenever you open the widget designer, its default mode will be the Design mode.
The widget designer has two modes:
Design - Used to design and customise certain user interface.
Preview - Allows you to see how your user interface will appear to your users, providing a live version to visualise any changes you've made.
You can switch between the two modes as needed.
Features in the Widget Designer's Design Mode
The screen below displays the basic features of a widget designer in Design Mode.
Used to switch between Design mode and Preview Mode.
Share button: opens a window to share the user interface with others and perform other functionalities e.g., Add widget to a canvas.
Note: This button will appear only if you save the user interface.
Find the article here to gain more understanding on sharing a user interface:
Used to save changes done to the user interface.
Used to configure general settings related to the user interface.
e.g., To change the background of the entire page, add a name.
A workspace where you can design the respective user interface (e.g., form) on the widget designer page.
Displays some additional settings that is enabled in the Design mode.
The Fields tab displays a list of input fields., e.g. Text Input, Email Input.
You can select appropriate fields and add it to the user interface. Once added, you can customise each field's properties.
Click to move back to the User Interfaces tab of the selected folder.
Additional Features in Widget Designer's Design Mode
The following are some additional features available in the widget designer's design mode.
1
Also, users can unlock the padlock to resize the interface.
Note: Forms do not support resizing feature. However, it is available for the other user interfaces.
To Resize a User Interface:
Click and drag the bottom-right-corner of the user interface:
Enlarge: Drag the corner downwards.
Shrink: Drag the corner downwards.
Widen: Drag the corner to the right.
Narrow: Drag the corner to the left.
2
Used to switch between the Form screen and the post-submissions screen (screen displayed to users after submitting the form). This feature is available for forms.
Users can do required customisations to each screen by switching between the two screens.
3
Reverts the last action performed.
4
Reverses the last Undo action.
5
Used to Zoom out the user interface.
6
Used to Zoom in the user interface.
Form User Interface
A form consists of three customisable sections: a header, a body, and an item/field. Click on a section to open its properties panel for customisation.
All user interfaces, including forms, simple cards, item lists, bar charts, etc., are customisable. Click individual section in a user interface to open their respective properties panel.
Configuring Properties of the Header Section
Users can customise the appearance of the header section on the widget designer page. e.g., Add a title for the header section.
Find out more on configuring header properties in this article.
Configuring Properties of the Body Section
Users can customise the properties of the body section and the properties of each individual field/item on the widget’s body section using the widget designer.
Find out more on configuring widget’s body section properties in this article.
Widget Designer's Preview Mode
The Preview mode is used to preview a live session of the user interface.
To access widget designer's Preview mode:
On the widget designer page, click Preview mode.
A live version of the respective user interface will be opened in the preview mode.
Sharing a User Interface
After designing your user interface, you can share it. There are multiple ways to do that: copying a shareable link to your clipboard, opening the user interface in a new page, adding the user interface to an existing canvas, sending the user interface via email, sending the user interface as a push notification to mobile app, and more.
Learn how to effectively share a user interface. Find the article here.
Saving a User Interface as a Template
Accelerate your user interface design by saving existing user interfaces as templates.
Explore how to save a user interface as a template from here:
Exporting a User Interface
Export saved user interfaces as JSON files.
Find out how to export your user interface as a JSON file here.
Watch this video to gain a comprehensive understanding about the Lucy's Widget Designer.
Binding Data sources for Data Visualisation
Some user interafecs such as bar charts, radial gauges require linking a data source to them. The purpose of this binding is to establish a connection between the data source (which contains the underlying data) and the user interface that is responsible for displaying data. This connection ensures that changes in the data source are automatically reflected in the widget, and vice versa, facilitating real-time synchronisation between the data and the user interface.
e.g., A bar chart displaying sales figures for different products over a month.
Refer to this tutorial to learn how to bind a data source to a user interface.
Here is a short video on how you can bind a data source to a user interface for data visualisation.
Last updated
