> For the complete documentation index, see [llms.txt](https://help.iviva.com/lucy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.iviva.com/lucy/my-work-folders/user-interfaces/working-with-the-widget-designer.md).

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

{% hint style="info" %}
A basic understanding of creating [folders](/lucy/my-work-folders.md), [databases](/lucy/my-work-folders/databases/creating-and-editing-databases.md), and [user interfaces ](/lucy/my-work-folders/user-interfaces/designing-a-user-interface.md)is recommended before proceeding with this article.
{% endhint %}

### Accessing the Widget Designer

There are three primary ways to[ design a user interface:](/lucy/my-work-folders/user-interfaces/designing-a-user-interface.md)

1. [Visualise Data:](/lucy/my-work-folders/user-interfaces/designing-a-user-interface/designing-a-user-interface-to-visualise-information.md) Design charts and graphs to display information visually.
2. [Record Data:](/lucy/my-work-folders/user-interfaces/designing-a-user-interface/designing-a-user-interface-to-capture-user-feedback.md) Create forms to collect user input.
3. [Start from Scratch: ](/lucy/my-work-folders/user-interfaces/designing-a-user-interface/designing-a-user-interface-from-scratch.md)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.

1. On the app **homepage**, go to **My Work** module on the left.
2. Search and select the required folder. Click on the folder to open it.
3. Navigate to the **User Interfaces** tab. 
4. Click the **Plus** icon and select **Record Data**.
5. Choose a data source. For the data source, you can select an existing Lucy Action or a database.
6. To select a database,
   1. Go to the Databases tab. A list of database will appear.
   2. Click on the desired database and click Select this source.
   3. Click Looks Good.
7. A form user interface will display on the widget designer page. The widget designer's Design mode is activated by default.

<figure><img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FKIGMd8moo7hPRZJhpNKQ%2Fimage.png?alt=media&amp;token=527e16e4-9cb5-4f3c-8223-1d8da4640eb9" alt=""><figcaption><p>Widget Designer in the Design mode</p></figcaption></figure>

## <mark style="color:blue;">Basic Functionalities of the Widget Designer</mark>

Whenever you open the widget designer, its default mode will be the **Design** mode.

The widget designer has two modes:&#x20;

1. **Design** - Used to design and customise certain user interface.&#x20;
2. **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.&#x20;

You can switch between the two modes as needed.

### <mark style="color:blue;">Features in the Widget Designer's Design Mode</mark>

The screen below displays the basic features of a widget designer in **Design** Mode.

<figure><img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2Fj3uHciw6c9NGjQGFeIPI%2FGroup%20295.png?alt=media&amp;token=cfcf42cb-912c-4b91-abb2-0acc339c2868" alt=""><figcaption><p>Widget Designer's Design Mode</p></figcaption></figure>

<table><thead><tr><th width="109" data-type="number">Number</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>1</td><td>Used to switch between <strong>Design</strong> mode and <strong>Preview</strong> Mode. </td><td></td></tr><tr><td>2</td><td><p><strong>Share</strong> button: opens a window to share the user interface with others and perform other functionalities <em>e.g., Add widget to a canvas.</em> </p><p><em><mark style="color:blue;">Note: This button will appear only if you save the user interface.</mark></em></p><p></p><p>Find the article here to gain more understanding on sharing a user interface:</p><p><a data-mention href="/lucy/my-work-folders/user-interfaces/sharing-a-user-interface.md">Sharing a User Interface</a></p></td><td></td></tr><tr><td>3</td><td>Used to save changes done to the user interface.</td><td></td></tr><tr><td>4</td><td><p>Used to configure general settings related to the user interface. </p><p><em>e.g., To change the background of the entire page, add a name.</em></p></td><td></td></tr><tr><td>5</td><td>A workspace where you can design the respective user interface (<em>e.g., form)</em> on the widget designer page.</td><td></td></tr><tr><td>6</td><td>Displays some additional settings that is enabled in the <strong>Design</strong> mode.</td><td></td></tr><tr><td>7</td><td><p>The Fields tab displays a list of input fields., <em>e.g. Text Input, Email Input.</em></p><p>You can select appropriate fields and add it to the user interface. Once added, you can customise each field's properties.</p></td><td></td></tr><tr><td>8</td><td>Click to move back to the <strong>User Interfaces</strong> tab of the selected folder.</td><td></td></tr><tr><td>9</td><td>Click to view more options: <a href="/lucy/my-work-folders/user-interfaces/saving-a-widget-as-a-template.md">Save widget as a Template</a> and <a href="/lucy/my-work-folders/user-interfaces/exporting-a-user-interface.md">Export Widget</a>.</td><td></td></tr></tbody></table>

### <mark style="color:blue;">Additional Features in Widget Designer's Design Mode</mark>

The following are some additional features available in the widget designer's design mode.

<figure><img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FJpbKMRREVpt8JQeberkL%2FLC_Working%20with%20Widget%20Designer_s2.png?alt=media&amp;token=9bf665ed-51a4-46ab-87a8-1d4061143690" alt=""><figcaption><p>Additional features in widget designer's Design mode</p></figcaption></figure>

*

<table><thead><tr><th width="118">Number</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td><p>By default, the <strong>padlock</strong> icon is locked(<img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2Fay5t5eFny7uwL6CM0J3i%2Fimage.png?alt=media&amp;token=8e9fe714-30ae-4726-9731-1b4e84fcc5c3" alt="">) to restrict moving the user interface around the widget designer page. Click the padlock icon to unlock it and move the widget around the page.</p><p>Also, users can unlock the padlock to resize the interface.</p><p></p><p><em><mark style="color:blue;">Note: Forms do not support resizing feature. However, it is available for the other user interfaces.</mark></em></p><p></p><p>To Resize a User Interface:</p><ul><li>Click the <img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FbQUtWW9nPNId5gXmqJKu%2Fimage.png?alt=media&amp;token=51ffa5d8-43d9-4de2-9f98-301e0dc56ea5" alt="">icon to enable resizing.</li><li><p>Click and drag the bottom-right-corner of the user interface:</p><ul><li>Enlarge: Drag the corner downwards.</li><li>Shrink: Drag the corner downwards.</li><li>Widen<strong>:</strong> Drag the corner to the right.</li><li>Narrow: Drag the corner to the left.</li></ul></li></ul></td></tr><tr><td>2</td><td><p>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.</p><ul><li><img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FMNIYRqYO5OuZNNsOTYPi%2FFORM%20TOGGLE%20BUTTON.png?alt=media&amp;token=92489c36-d3ad-4b5d-8080-c2096d955880" alt="">If the Form button is enabled, form interface will be displayed.</li><li><img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FNMHCnNKozh8vLb4cNtTA%2FResponse%20Toggle%20Button.png?alt=media&amp;token=8c7c39ee-91e9-40b5-8080-32fb0fbc6ceb" alt="">If the Response button is enabled, post-submissions screen will be displayed.</li></ul><p>Users can do required customisations to each screen by switching between the two screens.</p></td></tr><tr><td>3</td><td>Reverts the last action performed. </td></tr><tr><td>4</td><td>Reverses the last Undo action.</td></tr><tr><td>5</td><td>Used to Zoom out the user interface.</td></tr><tr><td>6</td><td>Used to Zoom in the user interface.</td></tr></tbody></table>

### <mark style="color:blue;">Form User Interface</mark>

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.

<figure><img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FxasJpFL8np70erMG5wGG%2F_Working%20with%20Widget%20Designer_s3.png?alt=media&amp;token=4dd14122-b1c6-4c7b-aaf3-69d1148075d5" alt="" width="375"><figcaption><p>Sections in a Form</p></figcaption></figure>

### <mark style="color:blue;">Configuring Properties of the Header Section</mark>

Users can customise the appearance of the header section on the widget designer page. *e.g., Add a title for the header section.*&#x20;

Find out more on configuring header properties in [this ](/lucy/my-work-folders/user-interfaces/designing-a-user-interface/designing-a-user-interface-to-capture-user-feedback.md)article.

{% content-ref url="/pages/plstk7HvR1gE6fGvvQMw" %}
[Designing a User Interface to Capture User Feedback](/lucy/my-work-folders/user-interfaces/designing-a-user-interface/designing-a-user-interface-to-capture-user-feedback.md)
{% endcontent-ref %}

### <mark style="color:blue;">Configuring Properties of the Body Section</mark>

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 ](/lucy/my-work-folders/user-interfaces/designing-a-user-interface/designing-a-user-interface-to-capture-user-feedback.md)article.

{% content-ref url="/pages/plstk7HvR1gE6fGvvQMw" %}
[Designing a User Interface to Capture User Feedback](/lucy/my-work-folders/user-interfaces/designing-a-user-interface/designing-a-user-interface-to-capture-user-feedback.md)
{% endcontent-ref %}

### <mark style="color:blue;">Widget Designer's Preview Mode</mark>

The **Preview** mode is used to preview a live session of the user interface.&#x20;

To access widget designer's Preview mode:

1. On the widget designer page, click **Preview** mode.
2. A live version of the respective user interface will be opened in the preview mode.

<figure><img src="https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FDRMfhylwijbvQgXbOZxk%2F_Working%20with%20Widget%20Designer_s4.png?alt=media&amp;token=55f319cc-fff9-453a-b90d-a9eb9a46514d" alt=""><figcaption><p>Widget Designer's Preview Mode</p></figcaption></figure>

### <mark style="color:blue;">Sharing a User Interface</mark>

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.

{% content-ref url="/pages/rT4FAa8T8th52xkvePCh" %}
[Sharing a User Interface](/lucy/my-work-folders/user-interfaces/sharing-a-user-interface.md)
{% endcontent-ref %}

### <mark style="color:blue;">Saving a User Interface as a Template</mark>

Accelerate your user interface design by saving existing user interfaces as templates.

Explore how to save a user interface as a template from here:

{% content-ref url="/pages/V8A91n63oviTQrLjgT8B" %}
[Saving a Widget as a Template](/lucy/my-work-folders/user-interfaces/saving-a-widget-as-a-template.md)
{% endcontent-ref %}

### <mark style="color:blue;">Exporting a User Interface</mark>

Export saved user interfaces as JSON files.

Find out how to export your user interface as a JSON file here.

{% content-ref url="/pages/sc7WG400LrAPTNvM1BxT" %}
[Exporting a User Interface](/lucy/my-work-folders/user-interfaces/exporting-a-user-interface.md)
{% endcontent-ref %}

Watch this video to gain a comprehensive understanding about the Lucy's Widget Designer.

{% embed url="<https://drive.google.com/file/d/1Q6P_GOlBoTME47AvFaIzuty4l17lQpkB/view?usp=drive_link>" %}

### <mark style="color:blue;">Binding Data sources for Data Visualisation</mark>&#x20;

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.

{% content-ref url="/pages/pqI2BARVQwSBsMi5HRga" %}
[Designing a User Interface to Visualise Information](/lucy/my-work-folders/user-interfaces/designing-a-user-interface/designing-a-user-interface-to-visualise-information.md)
{% endcontent-ref %}

Here is a short video on how you can bind a data source to a user interface for data visualisation.

{% embed url="<https://drive.google.com/file/d/1apIs06BiCGYFEah1wzyXyYHoBrcCkGrk/view?usp=drive_link>" %}