Lesson 4: Add and Design the Members List Component

572 views

Welcome to Lesson 4 of our SmartUX Demo Application series. This guide will walk you through adding the Members List Component in SmartUX. Follow the engaging instructions below to complete the process and enhance your training functionalities.

1. Add Component

As you switch to SmartUX studio, click on the Add Component.

Add Component

2. Select Members List Program

The Add Component will open the Add Program window.
Select Members List program “MList”.
Now click on the “Next” button.

Select Members List Program

3. Select Component Template

For the Selected “MList” program, Choose the component template.
Here select Blank Template as a component template.

Select Component Template

4. Enable Expanded View and View Code

Here click on the highlighted area to enable the View Code and Expanded View for the Component Canvas.

Enable Expanded View and View Code

5. Select the Container

Once you enter Expanded View, you will see the Widgets on the Canvas.
Select the Container widget and do the Form Name mapping to it.

Select the Container

6. Select the Data Model for the Container

Select the “MList” form to Map with the Form Name property of the Container widget.
Click on the “Save” button to map.

Select Data Model for Container

7. Switch to the UX Widgets Pane

Switch to the UX Widgets Pane to drag and drop the required widgets on the Canvas.

Switch UX Widgets Pane

8. The Card Widget

Drag and Drop the Card widget from the UX Widgets pane inside the Container widget.
In the Card Properties sheet click on the gear icon of the Data property to map it with a group control.

The Card Widget

9. The Main Group

Select the “MainGroup” Group control from the Data Model list.
Click on the Save button to do the mapping.

The Main Group

10. Change the ID of the Card Widget

In the properties sheet of the Card widget.
Change the ID to “MainGroup”.

Change ID of the Card Widget

11. Add the Container to the MainGroup Card

Drag and Drop the Container widget inside the MainGroup Card widget.
In the Properties Sheet of Container widget, under the Styling Overrides Section, input the Class property as “allSideSpacing-containers”.

Add the Container to MainGroup Card

12. Add a Row widget to Container

Drag and Drop the Row widget inside the Container widget.

Add Row widget to Container

13. Add Heading to the Row

Drag and Drop the Heading H4 inside the Row widget.
In the Properties Sheet of the Heading widget:
- Change the Text property to “Members”.
- In the Class property input “horizontal-line-bottom”.

Add Heading to the Row

14. Add a Column widget inside the Row

Drag and Drop the Column widget inside the Row.
In the Properties Sheet of Column widget input the Class property with:
- align-items-end
- smallSpacingBottomOutsideContainer
- smallSpacingTopOutsideContainer

Add Column widget inside Row

15. Add Create Member Button to the Column

Drag and Drop the Button widget inside the Column.
Click on the Data Mapping gear icon in the Properties Sheet of the Button widget.

Add Create Member Button to the Column

16. Data Mapping to Create Member Button

Select the Data Model “Btn_CreateMember” Button.
Click on the Save button to save the Data Mapping.

Data Mapping to Create Member Button

17. Setting Create Member Button properties

In the Properties Sheet of the Create Member button widget.
Under the “Display Logic” Section, set the “Button Style” property to “Raised Button”.
Change “Button Color” to “Primary”.
Under the Labels & Icons section, input the “Label” property as “Create Member”.
Change the “Label Type” property to “Label and Icon”.
In the Icon property input text as “people”.

Setting Create Member Button properties

This guide covered the process of adding the Members List component in SmartUX, including selecting programs, configuring classes, and saving changes systematically. The Members List Component is not complete yet. The next step will be adding the Table to the Component.