Lesson 10: Add Member Contact Component and Generate Table using Action Handler

507 views

Welcome to Lesson 10 of our SmartUX Demo Application series. This guide will walk you through setting up the Member Contact Component and designing its table. From adding members to configuring classes and buttons, each step is crucial in creating an organized and visually appealing interface for training. Every step provides clear instructions on navigating and using the necessary features to complete your application’s task successfully.

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

1. Add Component to SmartUX

Click on the Add Component.
This will open a Select Program window with a List of Web Client Programs from Magic xpa.

Add Component to SmartUX

2. Select the “MContact” Program for the Member Contact

As we are adding a component for Member Contact information, Select the “MContact” Program.
Click on the Next button.
This will take you to the Component Template screen.

Select 'MContact' Program for the Member Contact

3. Select the Component Template for the MContact Program

Here Select the Blank template as the Component Template for the “MContact” program.
Click on the Finish button.

Select Component Template for MContact Program

4. Enable Expanded View and View Code and Map Form Name to Container

Click on the Expanded View icon to enable Expanded View.
Click on the View Code icon to open a section below the Canvas to see the HTML source code of dropped Widgets.
Select the Container widget on the Canvas.
Click on the gear icon associated with the Form Name property for mapping.

Enable Expanded View and View Code and Map Form Name to Container

5. Select Form Name Data Model to Container

Here on the Select Data Model window, select “MContact” Form Data Model.
Click on the Save button to map.

Select Form Name Data Model to Container

6. Drag and Drop the Row Widget inside Container

Drag and drop the Row widget inside the Container.

Drag and Drop the Row Widget inside Container

7. Drag and drop the Column widget and assign Class Property

Drag and drop the Column widget inside the Row.
In the Class property of Column input “align-items-end”.

Drag and drop the Column widget and assign Class Property

8. Drag and drop the Button widget inside the Last dropped Column

Drag and drop the Button widget inside the Last dropped Column.
In the Properties Sheet of Button click on the gear icon associated with the Data Mapping property.
This will open a Select Data Model window to map.

Drag and drop the Button widget inside the Last dropped Column

9. Select the Data Model for the Add Button

Select the “btnCreate_Contact” Button Data Model.
Click on the Save button to map it with the widget.

Select the Data Model for the Add Button

10. Set properties for the Save button

Set properties for the Button widget.
Under the Display Logic section change the Button Style to “Raised Button”.
Change the Button Color property to “Primary”.
Under Label & Icons fill in the Label property with “Add” text.
Change the Label Type property to “Label and Icon”.
Fill in the Icon property with “control_point” text.

Set properties for the Save button

11. Drag and Drop Row and assign Class property

Drag and drop the Row widget inside the Container below the first Row.
In the Class property of the Row widget fill “smallSpacingTopOutsideContainer”.

Drag and Drop Row and assign Class property

12. Drag and drop the Column widget in the last dropped Row

Drag and drop the Column widget inside the last dropped Row.

Drag and drop the Column widget in last dropped Row

13. Drag and drop the Table widget for the Member Contact Table

Now drag and drop the Table Body widget inside the last dropped Column widget.
This Table will be used for displaying Member Contact Information in Member Card Phone and Email Accordion.

Drag and drop Table widget for Member Contact Table

14. Mapping Table body

Select the Table on the Canvas.
Click on the Data Mapping gear icon in the Properties Sheet of Table.
This will open the “Select Data Model” window.
To perform automated generation of the Table it is mandatory to map the Table widget with its correct Data Model.

Mapping Table body

15. Select the Data Model for Table

Select the Data Model “TableMContact” Table control.
Click on the “Save” button to save the Data Mapping.

Select the Data Model for Table

16. “Sync columns with XPA” Action Property

The “Sync columns with XPA” Action property is an Action handler.
This property is specially created to avoid manual work of end users for Table generation.
Once you map the Data Model for the table click on the “Sync columns with XPA”.
It will generate the Table for you.

'Sync columns with XPA' Action Property

17. Auto-generated MContact Table using “Sync columns with XPA”

Here you can see the “Sync columns with XPA” property has fetched all the Columns present inside the MContact Table.
This Action handler also generated the widgets that are there on the Magic xpa form.
This reduces the manual efforts of the end user and generates a Table on one click.

Auto-generated MContact Table using 'Sync columns with XPA'

18. Set Class property to Column Header Cell “Type”

Now the Table is generated let’s apply Class property.
Click on the Column Header Cell “Type”.
In the Properties Sheet of Column Header Cell fill in the Class property with “text-center”.

Set Class property to Column Header Cell 'Type'

19. Set Class property to Column Header Cell “Value”

Click on the Column Header Cell “Value”.
In the Properties Sheet of Column Header Cell fill in the Class property with “text-center”.

Set Class property to Column Header Cell 'Value'

20. Set Class property to Column Header Cell “IsPrimary”

Click on the Column Header Cell “IsPrimary”.
In the Properties Sheet of Column Header Cell fill in the Class property with “text-center”.

Set Class property to Column Header Cell 'IsPrimary'

21. Set Class property to Column Header Cell “Action”

Click on the Column Header Cell “Action”.
In the Properties Sheet of Column Header Cell fill in the Class property with “text-center” and “table-col-sm”.

Set Class property to Column Header Cell 'Action'

22. From the Outline pane Go To Property Sheet of Column Cell 1

You just set the Class property to Table Column Header Cell.
Now set the Class property to Column Cell.
Switch to the Outline tree pane beside the Properties Sheet pane on the left side of SmartUX studio.
Click on the “Go To Property Sheet” icon of the “column-cell.1”.
This will take you to the Properties Sheet of Column Cell.
As the Column Cell is not visible to select in the table you can select it from the Outline tree to set its properties.

From Outline pane Go To Property Sheet of Column Cell 1

23. Set Class property for “column-cell.1”

In the Properties Sheet of Column Cell fill in the Class property with “text-center”.

Set Class property for 'column-cell.1'

24. From the Outline pane Go To Property Sheet of Column Cell 2

Switch to the Outline tree pane beside the Properties Sheet pane on the left side of SmartUX studio.
Click on the “Go To Property Sheet” icon of the “column-cell.2”.
This will take you to the Properties Sheet of Column Cell.
As the Column Cell is visible to select in the table you can select it from the Outline tree to set its properties.

From the Outline pane Go To Property Sheet of Column Cell 2

25. Set Class property for “column-cell.2”

In the Properties Sheet of Column Cell fill in the Class property with “text-center”.

Set Class property for 'column-cell.2'

26. From the Outline pane Go To Property Sheet of Column Cell 3

Switch to the Outline tree pane beside the Properties Sheet pane on the left side of SmartUX studio.
Click on the “Go To Property Sheet” icon of the “column-cell.3”.
This will take you to the Properties Sheet of Column Cell.
As the Column Cell is not visible to select in the table you can select it from the Outline tree to set its properties.

From the Outline pane Go To Property Sheet of Column Cell 3

27. Set Class property for “column-cell.3”

In the Properties Sheet of Column Cell fill in the Class property with “text-center”.

Set Class property for 'column-cell.3'

28. From the Outline pane Go To Property Sheet of Column Cell 4

Switch to the Outline tree pane beside the Properties Sheet pane on the left side of SmartUX studio.
Click on the “Go To Property Sheet” icon of the “column-cell.4”.
This will take you to the Properties Sheet of Column Cell.
As the Column Cell is not visible to select in the table you can select it from the Outline tree to set its properties.

From the Outline pane Go To Property Sheet of Column Cell 4

29. Set Class property for “column-cell.4”

In the Properties Sheet of Column Cell fill in the Class property with “text-center” and “table-col-sm”.

Set Class property for 'column-cell.4'

30. Set Select Input properties of Type Column for In Row Edit

Now you have set the Class property for all Column Cells.
Let’s change widgets inside the Column for In Row Editing.
This will hide the existing widget in Read-Only mode and will be visible in the Create or Modify mode of the Table.
Select the Select Input widget from the Type Column.
In the Properties Sheet of Select Input widget check the “Is Inside Table” checkbox.
Change the Show Control property to “In Row Edit”.

Set Select Input properties of Type Column for In Row Edit

31. Drag and drop the Label inside the Type column Container

Now the Select Input widget is not visible in the Type column.
Drag and drop the Label widget inside the Type column Container.
In the Properties Sheet of Label click on the gear icon associated with the Data Mapping property.
This will open a Select Data Model window.

Drag and drop Label inside the Type column Container

32. Select the Data Model for the Label from the Type Column

Select “ComboContactType” ComboBox Data Model.
Click on the Save button to save the mapping.

Select Data Model for Label from Type Column

33. Set Text property for Label from Type Column

In the Properties Sheet of Label click on the gear icon associated with the Text property.
This will open a Select Mg* Function window.

Set Text property for Label from Type Column

34. Fill in the function to display the Select Input value as Label

Under the Set Static HTML remove the existing text.
Fill in the below text in the provided field.

{{ mg.getDisplayValue(mgc.ComboContactType, row.rowId) }}

Click on the Save button to apply the text to the Label.

Fill in the function to display Select Input value as Label

35. Set Table Action properties for Label from Type Column

Now in the Properties Sheet of the Label go to Table Actions section.
Check the “Is Inside Table” property Checkbox.
Change the Show Control property to “In Row Read”.

Set Table Action properties for Label from Type Column

36. Set Input properties of Value Column for In-Row Edit

Let’s change widgets inside the Value Column for In Row Editing.
This will hide the existing widget in Read-Only mode and will be visible in the Create or Modify mode of the Table.
Select the Input widget from the Value Column.
In the Properties Sheet of Input widget check the “Is Inside Table” checkbox.
Change the Show Control property to “In Row Edit”.

Set Input properties of Value Column for In-Row Edit

37. Set Input widget properties of Value Column for In-Row Edit

Let’s change widgets inside the Value Column for In Row Editing.
This will hide the existing widget in Read-Only mode and will be visible in the Create or Modify mode of the Table.
Select the Input widget from the Value Column.
In the Properties Sheet of Input widget check the “Is Inside Table” checkbox.
Change the Show Control property to “In Row Edit”.
In the Display Logic section change the Appearance property to Outline.

Set Input widget properties of Value Column for In-Row Edit

38. Drag and drop the Label inside the Value column Container

Now the Input widget is not visible in the Type column.
Drag and drop the Label widget inside the Type column Container.
In the Properties Sheet of Label click on the gear icon associated with the Data Mapping property.
This will open a Select Data Model window.

Drag and drop Label inside the Value column Container

39. Select the Data Model for the Label from the Value Column

Select “Contact_Information_Value” Edit Data Model.
Click on the Save button to save the mapping.

Select Data Model for Label from Value Column

40. Set Text property for Label from Value Column

In the Properties Sheet of Label click on the gear icon associated with the Text property.
This will open a Select Mg* Function window.

Set Text property for Label from Value Column

41. Select a Mg* Function to get Value for Label

In the Select Mg* Function window select Data Mapping radio.
Expand the Contact_Information_Value (Edit).
Select the “mg.getValue” function for the Label widget.
Click on the Save button to map the function.

Select a Mg* Function to get Value for Label

42. Set Table Action properties for Label from Value Column

Now in the Properties Sheet of the Label go to Table Actions section.
Check the “Is Inside Table” property Checkbox.
Change the Show Control property to “In Row Read”.

Set Table Action properties for Label from Value Column

43. Set Checkbox widget properties of Value Column for In-Row Edit

Let’s change widgets inside the IsPrimary Column for In Row Editing.
This will hide the existing widget in Read-Only mode and will be visible in the Create or Modify mode of the Table.
Select the Checkbox widget from the IsPrimary Column.
Remove the text present in the Label property.
In the Properties Sheet of Check Box widget check the “Is Inside Table” checkbox.
Change the Show Control property to “In Row Edit”.

Set Checkbox widget properties of Value Column for In-Row Edit

44. Drag and drop the Label inside the IsPrimary column Container

Now the Checkbox widget is not visible in the Type column.
Drag and drop the Label widget inside the Type column Container.
In the Properties Sheet of Label click on the gear icon associated with the Data Mapping property.
This will open a Select Data Model window.

Drag and drop Label inside the IsPrimary column Container

45. Select the Data Model for the Label from the Type Column

Select “CheckBox_IsPrimary” Checkbox Data Model.
Click on the Save button to save the mapping.

Select Data Model for Label from Type Column

46. Set Text property for Label from IsPrimary Column

In the Properties Sheet of Label click on the gear icon associated with the Text property.
This will open a Select Mg* Function window.

Set Text property for Label from IsPrimary Column

47. Select a Mg* Function to get Value for Label

In the Select Mg* Function window select Data Mapping radio.
Expand the CheckBox_IsPrimary (Checkbox).
Select the “mg.getValue” function for the Label widget.
Click on the Save button to map the function.

Select a Mg* Function to get Value for Label

48. Set Table Action properties for Label from IsPrimary Column

Now in the Properties Sheet of the Label go to Table Actions section.
Check the “Is Inside Table” property Checkbox.
Change the Show Control property to “In Row Read”.

Set Table Action properties for Label from IsPrimary Column

49. Set Button widget properties of Action Column for Inside Table

Now in the Properties Sheet of the Button go to the Table Actions section.
Check the “Is Inside Table” property Checkbox.
Under the Labels & Icons section remove the text from the Label property.
In the Styling Overrides section fill in the Class property with “deletebtn”.

Set Button widget properties of Action Column for Inside Table

50. Save all the actions performed

Click on the Save button from the top right corner to save all the steps performed for the “MContact” component.

Save all the actions performed

51. Enter in Live Preview

Click on the Live Preview button beside the Save button to enter in Live Preview mode.

Enter in Live Preview

52. Click here

Now you are in Live Preview, navigate to Members List from the sidebar navigation.
Click on the Modify button to edit the existing Member information.
This will take you to the Member Information screen in modify mode.

Click here

53. Member Information with Phone and Email Accordion

Here in the Member Information screen, you can see now the Data under the Phone and Email Accordion.
This is the result of the efforts you put into creating the MContact component.

Switch to 'localhost:60243'

54. Email Information Accordion

Here you can see the Email information under the Email Accordion.
You can now try to add or delete the information.

Email Information Accordion

The guide covered setting up the Member Contact Component, adding members, designing tables, configuring buttons, and aligning elements for an engaging employee training interface. These detailed steps ensure a well-structured and visually appealing design for effective training sessions. The guide covered the process of adding a Member Contact Component and designing its table through a series of precise instructions, enabling you to efficiently navigate and utilize the required features in your application for training.