Designing a User Interface from Scratch

This article is intended to guide you on designing and customising your own user interface.

To design your user interface, choose a pre-built widget template that suits your intended purpose. For instance, if you want to display a simple text and image, you could use a "Simple Card" template. If you want to embed a YouTube video, you could use a "YouTube Card" template. This approach can save time and effort, as you don't have to design everything from scratch.

Widget Templates

Widget templates are pre-designed templates that provide a foundation for designing user interfaces.

For example, let's use the "Simple Card" widget template. This template allows to configure a background image, icon, title and a clickable button. Upon clicking the button, we can trigger a variety of actions, including:

Opening an external link: Directs users to a specified website or webpage.
Opening an existing widget: Navigates users to another widget.
Executing a Lucy action: Initiates a specific Lucy action, such as sending a notification when the button is clicked.
Opening an existing add-on: Launches a particular add-on.
Opening a mobile screen: Launches a specific mobile screen, such as the Currency page, designed exclusively for mobile apps.

Designing a User Interface from Scratch

To design a user interface from the ground up:

On the app homepage, go to the My Work on the left.
Search and click on the folder you wish to open.
Navigate to the User Interfaces tab.
Click the + icon.
Choose the Start from Scratch option. This action will display a collection of widget templates to choose from.
Pick the desired Widget Template e.g., Simple Card.
Click Edit this Template to open the template on the widget designer page.
Customise the card as required.
1. Add a new background image.
  1. Click the background image to open the properties panel on the right.
  2. Click the Search icon.
  3. Choose a image from the gallery or if you already have one, click Upload your own to upload it.
  4. Background Position: Click on required circle to position the image on the card.
  5. Background Size: This property allows you to control how the image is scaled and displayed on the card. Choose the desired background size (e.g., Fill Area).
2. Customise the footer section of the card.
  1. Click the footer section to open the properties panel on the right.
  2. Background Colour: Select a background colour for the footer.
3. Add a new icon.
  1. Click the icon to open the properties panel on the right.
  2. Icon: Click the icon field to choose an icon from the Search Icons window.
  3. Colour: Select a icon colour.
  4. Size: Enter a suitable icon size.
4. Modify Text.
  1. Click the Title of the card.
  2. Text: Enter a appropriate title.
  3. Colour: Pick a title colour.
  4. Size: Change the title size.
  5. Text Align: Used to position the title within the card. Choose the required alignment option.
5. Customise the button.
  1. Click the button on the card and the properties panel will open on the right.
  2. Label: Type a clear label e.g., Register an asset.
  3. Edit Action: Click this button to open the Action Editor window. This window has five tabs: Open URL, Open Widget, Execute Action, Open Add-on, and Open Mobile Screen. Use these tabs to set what happens when the button is clicked.
    Open URL: You can configure a URL to be opened when the button is clicked.
    Open Widget: Used to select a specific widget to be opened when the button is clicked.
    Execute Action: Used to run a specific Lucy action, such as sending a notification when a work request is created. You can select a model, choose an appropriate action, and provide parameters. Additionally, configure the post-action behavior.
    Open Add-on: Used to configure a specific add-on to be opened when the button is clicked.
    Open Mobile Screen: Used to select a predefined mobile screen to be opened when the button is clicked.
  4. After configuring the action, click Done.
Once you're happy with your design, click the Save widget button to save your widget.
All your saved user interfaces will be listed under the User Interfaces tab of the respective folder.
1. To access and view the designed user interface later, go to the User Interfaces tab of the respective folder.
2. Click on the user interface to open it in a new window.

Watch the video below on designing a user interface from the ground up to gain a better understanding.

Viewing Your User Interfaces

You can find saved user interfaces in the User Interfaces tab of the corresponding folder.

Find the article here:

PreviousDesigning a User Interface to Capture User Feedback NextWorking with the Widget Designer

Last updated 6 months ago

Designing a User Interface from Scratch

To design a user interface from the ground up:

On the app homepage, go to the My Work on the left.

Search and click on the folder you wish to open.

Navigate to the User Interfaces tab.

Click the + icon.

Choose the Start from Scratch option. This action will display a collection of widget templates to choose from.

Pick the desired Widget Template e.g., Simple Card.

Click Edit this Template to open the template on the widget designer page.

Customise the card as required.

Add a new background image.
1. Click the background image to open the properties panel on the right.
2. Click the Search icon.
3. Choose a image from the gallery or if you already have one, click Upload your own to upload it.
4. Background Position: Click on required circle to position the image on the card.
5. Background Size: This property allows you to control how the image is scaled and displayed on the card. Choose the desired background size (e.g., Fill Area).
Customise the footer section of the card.
1. Click the footer section to open the properties panel on the right.
2. Background Colour: Select a background colour for the footer.
Add a new icon.
1. Click the icon to open the properties panel on the right.
2. Icon: Click the icon field to choose an icon from the Search Icons window.
3. Colour: Select a icon colour.
4. Size: Enter a suitable icon size.
Modify Text.
1. Click the Title of the card.
2. Text: Enter a appropriate title.
3. Colour: Pick a title colour.
4. Size: Change the title size.
5. Text Align: Used to position the title within the card. Choose the required alignment option.
Customise the button.
1. Click the button on the card and the properties panel will open on the right.
2. Label: Type a clear label e.g., Register an asset.
3. Edit Action: Click this button to open the Action Editor window. This window has five tabs: Open URL, Open Widget, Execute Action, Open Add-on, and Open Mobile Screen. Use these tabs to set what happens when the button is clicked.
  1. Open URL: You can configure a URL to be opened when the button is clicked.
  2. Open Widget: Used to select a specific widget to be opened when the button is clicked.
  3. Execute Action: Used to run a specific Lucy action, such as sending a notification when a work request is created. You can select a model, choose an appropriate action, and provide parameters. Additionally, configure the post-action behavior.
  4. Open Add-on: Used to configure a specific add-on to be opened when the button is clicked.
  5. Open Mobile Screen: Used to select a predefined mobile screen to be opened when the button is clicked.
4. After configuring the action, click Done.

Once you're happy with your design, click the Save widget button to save your widget.

All your saved user interfaces will be listed under the User Interfaces tab of the respective folder.

To access and view the designed user interface later, go to the User Interfaces tab of the respective folder.
Click on the user interface to open it in a new window.

Watch the video below on designing a user interface from the ground up to gain a better understanding.