How Do I Create a Basic Widget?

1803 views

This guide provides a step by step walkthrough of how to create a basic Widget for SmartUX.

Before creating a Widget, you need to understand what the Widget is.

In SmartUX, a Widget refers to a reusable building block or a modular element that encapsulates specific functionalities or visual aspects within the application. The Widgets are designed to be reused across different parts of the application, promotes consistency and ease of maintenance, and fosters quick development.

Now that you understand what a SmartUX Widget is, you can create one.

1. Knowing SmartUX Widgets src Folder

Go to your current SmartUX Widgets folder. You get to see a few files and folders inside this folder.

The src folder holds various Widgets that we need.

The component-groups.json file contains the list of Widgets groups and their Labels.

2. Specifying Widgets Sequence and Categories

In component-groups-order.json, specify the sequence of Widgets and the categories in which they will appear on the UI.

The properties folder defines various properties for Widgets that you have. Some properties can be common among some Widgets while others could be specific for some specific Widgets depending on requirements.

The property-groups.json file defines the Names of Groups for properties. When you assign a property in a Widget’s definition, you also assign a group for the property there by their ID. In this json you provide a name for these Group.

Now let’s create a basic Widget.

3. Accessing src Folder

Go to the src folder.

4. Creating a Folder for Widget

Create a folder with the name of your Widget. For the demo purpose, a Widget named label is created here.

5. Creating Templates Folder

Inside the Widgets folder (in this case the label folder), create a templates folder.

6. Creating template.html File

Create template.html file inside templates folder.

The Template HTML should contain the base html of the Widget when you drag and drop it on the Canvas. For label, it will look as shown.

7. Creating component.json File

Now, create component.json file on the same path where the templates folder is.

The file component.json look like as shown for the label.

A basic widget would have –

The name attribute reflecting the Name of the Widget on SmartUX.
Signature, which is the unique logical identifier for the Widget. It should be unique for all the Widgets.
Properties is the list of properties for the Widget. For now, only the id property is added, which is already defined in Properties folder.
Finally, a description for the Widget.

The last thing that a Widget would need is icon.svg file. This icon is shown on the Widget’s pane for the corresponding Widget.

8. Updating component-groups-order.json File

Go back to the Widgets folder and update the component-groups-order.json.

9. Adding Widget Folder Name in Group

Add a Widget folder name in to one of the groups.

10. Opening a Project in SmartUX Studio

Open the project in SmartUX Studio.

11. Opening a Component

Open a Component.

12. Accessing Widgets

Go to the Widgets pane from the left pane.

13. Refreshing Widgets List

Click on Refresh Widgets button on SmartUX to get the latest list of SmartUX Widgets.

14. Viewing Newly Added Widgets

On refreshing you can see the recently added Widgets which you can use to design your Component.

To effortlessly perform all these tasks within SmartUX Studio, you can enjoy seamless access to user-friendly utilities by visiting the designated page.

Widget Operations Panel << Click Here

The Widget Operations Panel within SmartUX Studio allows users to create custom widgets, define widget properties, organize widget groups, manage property groups, and set up functions and actions—all in one convenient location.