How Do I Design a Component in SmartUX Studio?

In this video, you will learn the process of designing a component. You will learn how to create a Form, add Columns, Containers, and Rows, as well as Labels and Input fields. We will also cover Data Mapping, saving your work, and viewing the designed component in SmartUX Live Preview.

For the demo purpose, we are designing a component named Form. This component has two Label controls and two Edit controls created in Magic xpa Studio:

Once you have the Form component opened in SmartUX Studio, go to the UX Widgets option.

2. Using UX Widgets

Drag and drop the required widgets on the Canvas.

First, create a structure for the Component using Card, Container, couple of Rows, and a few Columns.

Now that we have a structure, add Edit and Label widgets. While dragging and dropping the Widgets, the Canvas can be switched to Expanded mode.

Clicking on Expand View Button on the top bar will expand the Canvas to give better view of the Component contents.

Toggle the view back to normal for Canvas. Now you can map the Widgets to Magic xpa controls. Select an individual Widget at a time for mapping controls.

Select the first Widget named Label. 

The Property Sheet for the selected Widget is opened in the Right pane as shown below.

From the Property Sheet, select open Data Mapping dialogue.

Select the required control.

We can also map a mg function for Text. 

10. Opening Dialog for Mapping mg Function

Open the dialogue for the same from the Property Sheet.

Select Data Mapping for mg functions. Alternatively, you can also map static values from Set Static HTML option.

Now choose the mg function for the control you want to map onto. Here, we consider mapping mg.getText for FirstNameLabel control.

13. Mapping Rest of Widgets

Once all widgets are mapped, go to Live Preview.

You can see the component in action.