Lesson 7: Drag and Drop Widgets in Column Cell Container to display records in Table

398 views

Welcome to Lesson 7 of our SmartUX Demo Application series. This guide will walk you through the drag-and-drop Label widget to display the records of the Table in SmartUX. This guide will take you through different sections of components, widgets and their properties. Follow the engaging instructions below to complete the process and enhance your training functionalities. In the previous lesson, you created a table body and assigned style classes for alignment. Let’s move forward to display records in the table.

Upon successful completion of the specified steps, the result will reflect the desired outcome as shown in the image below:

1. Drag and Drop the Label widget for the ID Column

Now drag and drop the Label widget inside the first column container.
Click on the gear icon of the Data Mapping properties from the Properties Sheet of Label.
This will open a window to Select Data Model.

Drag and Drop the Label widget for ID Column

2. Data Mapping for Member_ID Label Widget

Select the “Member_ID” Edit control Data Model.
Click the Save button to map the Data Model.

Data Mapping for Member_ID Label Widget

3. Map Text property with mg.getValue function for Member_ID

In the Properties Sheet of the Label, click on the gear icon of the Text property.
This will open a window for the Select Mg* Function.
In this Text property, you can either input the text you desire or you can get the value of the “Member_ID” Edit control from Magic xpa using the “mg.getValue” function.
This function will fetch value from the Magic xpa control to the Label widget.

Map Text property with mg.getValue function for Member_ID

4. Select mg.getValue function for Member_ID

Select the Data Mapping Radio button at the “Select Mg* Function” window.
Expand the “Member_ID” Edit control.
Select the “mg.getValue” function and click the Save button.

Select mg.getValue function for Member_ID

5. Mark the Label widget for Member_ID as “Inside Table”

Now the Text is mapped with mg.getValue function for Member_ID.
Select the Checkbox of the property “Is Inside Table”.
This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

Mark the Label widget for Member_ID as 'Inside Table'

6. Drag and Drop the Label widget for Title Column

Follow the same steps as you did for the previous step but for the next columns.
Now drag and drop the Label widget inside the container of the second column “Title”.
Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
This will open a window to Select Data Model.

Drag and Drop the Label widget for Title Column

7. Data Mapping for Title Label Widget

Select the “Title” Edit control Data Model.
Click the Save button to map the Data Model.

Data Mapping for Title Label Widget

8. Map Text property with mg.getValue function for Title

In the Properties Sheet of the Label, click on the gear icon of the Text property.
This will open a window for the Select Mg* Function.
In this Text property, you can either input the text you desire or you can get the value of the “Title” Edit control from Magic xpa using the “mg.getValue” function.
This function will fetch value from the Magic xpa control to the Label widget.

Map Text property with mg.getValue function for Title

9. Select mg.getValue function for Member_ID

Select the Data Mapping Radio button at the “Select Mg* Function” window.
Expand the “Title” Edit control.
Select the “mg.getValue” function and click the Save button.

Select mg.getValue function for Member_ID

10. Mark the Label widget for the Title as “Inside Table”

Now the Text is mapped with mg.getValue function for “Title”.
Select the Checkbox of the property “Is Inside Table”.
This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

Mark the Label widget for the Title as 'Inside Table'

11. Drag and Drop the Label widget for the First Name Column

Follow the similar steps as you did for the previous step but for the next columns.
Now drag and drop the Label widget inside the container of the third column “First Name”.
Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
This will open a window to Select Data Model.

Drag and Drop the Label widget for First Name Column

12. Data Mapping for First_Name Label Widget

Select the “First_Name” Edit control Data Model.
Click the Save button to map the Data Model.

Data Mapping for First_Name Label Widget

13. Map Text property with mg.getValue function for First Name

In the Properties Sheet of the Label, click on the gear icon of the Text property.
This will open a window for the Select Mg* Function.
In this Text property, you can either input the text you desire or you can get the value of the “First_Name” Edit control from Magic xpa using the “mg.getValue” function.
This function will fetch value from the Magic xpa control to the Label widget.

Map Text property with mg.getValue function for First Name

14. Select mg.getValue function for First_Name

Select the Data Mapping Radio button at the “Select Mg* Function” window.
Expand the “First_Name” Edit control.
Select the “mg.getValue” function and click the Save button.

Select mg.getValue function for First_Name

15. Mark the Label widget for the First Name as “Inside Table”

Now the Text is mapped with mg.getValue function for “First Name”.
Select the Checkbox of the property “Is Inside Table”.
This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

Mark the Label widget for the First Name as 'Inside Table'

16. Drag and Drop the Label widget for the Last Name Column

Follow the similar steps as you did for the previous step but for the next columns.
Now drag and drop the Label widget inside the container of the fourth column “Last Name”.
Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
This will open a window to Select Data Model.

Drag and Drop the Label widget for Last Name Column

17. Data Mapping for Last_Name Label Widget

Select the “Last_Name” Edit control Data Model.
Click the Save button to map the Data Model.

Data Mapping for Last_Name Label Widget

18. Map Text property with mg.getValue function for Last Name

In the Properties Sheet of the Label, click on the gear icon of the Text property.
This will open a window for the Select Mg* Function.
In this Text property, you can either input the text you desire or you can get the value of the “Last_Name” Edit control from Magic xpa using the “mg.getValue” function.
This function will fetch value from the Magic xpa control to the Label widget.

Map Text property with mg.getValue function for Last Name

19. Select mg.getValue function for Last_Name

Select the Data Mapping Radio button at the “Select Mg* Function” window.
Expand the “Last_Name” Edit control.
Select the “mg.getValue” function and click the Save button.

Select mg.getValue function for Last_Name

20. Mark the Label widget for the Last Name as “Inside Table”

Now the Text is mapped with mg.getValue function for “Last Name”.
Select the Checkbox of the property “Is Inside Table”.
This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

Mark the Label widget for the Last Name as 'Inside Table'

21. Drag and Drop the Label widget for the Birth Date Column

Follow the similar steps as you did for the previous step but for the next columns.
Now drag and drop the Label widget inside the container of the fifth column “Birth Date”.
Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
This will open a window to Select Data Model.

Drag and Drop the Label widget for Birth Date Column

22. Data Mapping for Birth_Date Label Widget

Select the “Birth_Date” Edit control Data Model.
Click the Save button to map the Data Model.

Data Mapping for Birth_Date Label Widget

23. Map Text property with mg.getValue function for Birth Date

In the Properties Sheet of the Label, click on the gear icon of the Text property.
This will open a window for the Select Mg* Function.
In this Text property you can either input the text you desire or you can get the value of the “Birth_Date” Edit control from Magic xpa using the “mg.getValue” function.
This function will fetch value from the Magic xpa control to the Label widget.

Map Text property with mg.getValue function for Birth Date

24. Select mg.getValue function for Birth_Date

Select the Data Mapping Radio button at the “Select Mg* Function” window.
Expand the “Birth_Date” Edit control.
Select the “mg.getValue” function and click the Save button.

Select mg.getValue function for Birth_Date

25. Mark the Label widget for the Birth Date as “Inside Table”

Now the Text is mapped with mg.getValue function for “Birth Date”.
Select the Checkbox of the property “Is Inside Table”.
This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

Mark the Label widget for the Birth Date as 'Inside Table'

26. Drag and Drop the Label widget for Gender Column

Follow the similar steps as you did for the previous step but for the next columns.
Now drag and drop the Label widget inside the container of the sixth column “Gender”.
Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
This will open a window to Select Data Model.

Drag and Drop the Label widget for Gender Column

27. Data Mapping for Gender Label Widget

Select the “Gender” Edit control Data Model.
Click the Save button to map the Data Model.

Data Mapping for Gender Label Widget

28. Map Text property with mg.getValue function for Gender

In the Properties Sheet of the Label, click on the gear icon of the Text property.
This will open a window for the Select Mg* Function.
In this Text property, you can either input the text you desire or you can get the value of the “Gender” Edit control from Magic xpa using the “mg.getValue” function.
This function will fetch value from the Magic xpa control to the Label widget.

Map Text property with mg.getValue function for Gender

29. Select mg.getValue function for Gender

Select the Data Mapping Radio button at the “Select Mg* Function” window.
Expand the “Gender” Edit control.
Select the “mg.getValue” function and click the Save button.

Select mg.getValue function for Gender

30. Mark the Label widget for the Gender as “Inside Table”

Now the Text is mapped with mg.getValue function for “Gender”.
Select the Checkbox of the property “Is Inside Table”.
This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

Mark the Label widget for the Gender as 'Inside Table'

31. Drag and Drop the Button widget for the Action Column

Drag and drop the Button widget for modify operation, inside the container of the seventh column “Action”.
Click on the gear icon of the Data Mapping property from the Properties Sheet of the Button.
This will open a window to Select Data Model.

Drag and Drop the Button widget for Action Column

32. Data Mapping for Modify Action Button Widget

Select the “btn_Modify” Button to control the Data Model.
Click the Save button to map the Data Model.

Data Mapping for Modify Action Button Widget

33. Set Modify operation button widget Properties

Select the Checkbox of the property “Is Inside Table”.
This property will add [rowId]=”row.rowId” to the Button HTML tag to identify it is inside the Table.
In the Labels & Icons section remove the Button Text from the Label property.
In the Style Override section input the Class property as “editbtn”.

Set Modify operation button widget Properties

34. Drag and Drop another button widget for the Action Column

Drag and drop another Button widget for the Delete operation, inside the container of the seventh column “Action”.
Click on the gear icon of the Data Mapping property from the Properties Sheet of the Button.
This will open a window to Select Data Model.

Drag and Drop another button widget for the Action Column

35. Data Mapping for Delete Action Button Widget

Select the “btn_Delete” Button control from the Data Model.
Click the Save button to map the Data Model.

Data Mapping for Delete Action Button Widget

36. Set Delete operation button widget Properties

Select the Checkbox of the property “Is Inside Table”.
This property will add [rowId]=”row.rowId” to the Button HTML tag to identify it is inside the Table.
In the Labels & Icons section remove the Button Text from the Label property.
In the Style Override section input the Class property as “deletebtn”.
Save the component changes by clicking on the Save on the top right corner.

Set Delete operation button widget Properties

37. Enter in Live Preview

Now everything is set let’s enter into the Live Preview mode.

Enter in Live Preview

38. Member List Table with Records

Now you can see the records from the Member List table.
These records will also be visible in design mode in Canvas as the SmartUX Studio is a WYSIWYG Studio.
Here the Birth Date Column displays the Date in a different format.
We will refine the Birth Date Column in the next Lesson.
Also, we have dropped a Subform on the Canvas, we will add a display condition for the Card and the Subform widget.

Member List Table with Records

This guide covered the process of navigating through different sections, selecting options, filling in information, and saving changes. Master these steps to streamline training processes. Follow the detailed and engaging instructions provided to seamlessly configure the necessary components within the application.