Lesson 9: Add and Design Member Card Component

618 views

Welcome to Lesson 9 of our SmartUX Demo Application series. This guide will walk you through the process of adding and designing a Member Card Component in the Training. Follow the detailed instructions to create a visually appealing and functional member card for your training program.

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 a Program for the Member Card

As we are adding a component for Member Card, Select the MCard Program.
Click on the Next button.
This will take you to the Component Template screen.

Select a Program for Member Card

3. Select Component Template for MCard Program

Here Select Blank Template as Component Template for the MCard program.
Click on the Finish button.

Select Component Template for MCard Program

4. Enable Expanded View and View Code for Mcard Component

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.

Enable Expanded View and View Code for Mcard Component

5. Map Form Name to Container

Select the Container widget on the Canvas.
Click on the gear icon associated with the Form Name property for mapping.

Map Form Name to Container

6. Select Form Name Data Model to Container

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

Select Form Name Data Model to Container

7. Assign Class property to Container

In the Class property of Container fill “allSideSpacing-containers”.

Assign Class property to Container

8. Drag and Drop Row and assign Class property

Drag and drop the Row widget inside the Container.
In the Class property of the Row widget fill “horizontal-line-bottom”.

Drag and Drop Row and assign Class property

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

Drag and drop the Column widget inside the Row.
In the Breakpoints property of the Column widget, Select 12 from the Small (sm) dropdown list.
In the Class property of Column input “smallSpacingTopOutsideContainer” and “align-items-end”.

Drag and drop the Column widget and assign Class Property

10. Drag and drop the Row widget inside the Column widget

Now drag and drop the Row widget inside the last dropped Column widget.
Input the Class property as “smallSpacingTopOutsideContainer” to the Row widget.

Drag and drop Row widget inside the Column widget

11. Add Heading to the Row widget

Drag and drop the Heading H4 inside the last dropped Row widget.
In the properties sheet of the Heading H4 widget, input “Member Information” in the Text property.
In the Class property of Heading input “horizontal-line-bottom” and “smallSpacingBottomOutsideContainer”.

Add Heading to the Row widget

12. Drag and Drop Accordion Container

Drag and drop the Accordion Container widget below Heading inside the Row widget.

Drag and Drop Accordion Container

13. Drag and drop the Accordion Item widget inside the Accordion Container

Drag and drop the Accordion Item widget inside Accordion Container

14. Accordion Button

Click on the Accordion Button(Accordion Item Header) inside the Accordion Item widget.
In the Properties Sheet of the Accordion Button(Accordion Item Header) click on the gear icon.
This will open the Select Mg* Function Window.

Accordion Button

15. Select Mg* Function window

In the Select Mg* Function window, under Set Static HTML remove the present text.

Select Mg* Function window

16. Fill in the text box with Function

Fill in the text box with “Member – # [{{ mg.getValue(mgc.Member_ID) }}]”.
Click on the Save button.

Fill in the text box with Function

17. Set Labels & Icons properties of the Accordion Item Header

In the properties sheet of the Accordion Item Header, you set the label.
Change the Label Type property to Label and Icon.
In the Icon property input the text as “people”.
In the Class property input “button-text-bold”.

Set Labels & Icons properties of Accordion Item Header

18. Add Row Widget to Accordion Item Container

Drag and drop the Row widget inside the Accordion Item Container.

Add Row Widget to Accordion Item Container

19. Drag and drop another Row widget below the last one

Drag and drop another Row widget below last one

20. Drag and drop the Column inside the First Row

Drag and drop the Column Widget inside the First Row of the Accordion Item Container.
In the Properties Sheet of the Column widget, set the Breakpoints properties as below:
- Extra Small (xs)=”6″
- Small (sm)=”6″
- Medium (md)=”12″
- Large (lg)=”2″

Drag and drop the Column inside the First Row

21. Drag and drop the second Column inside the First Row

Drag and drop the second Column Widget inside the First Row beside the last dropped Column of the Accordion Item Container.
In the Properties Sheet of the Column widget, set the Breakpoints properties as below:
- Extra Small (xs)=”12″
- Small (sm)=”12″
- Medium (md)=”12″
- Large (lg)=”5″

Drag and drop the second Column inside the First Row

22. Drag and drop the Third Column inside the First Row

Drag and drop the third Column Widget inside the First Row beside the last dropped Column of the Accordion Item
Container.
In the Properties Sheet of the Column widget, set the Breakpoints properties as below:
- Extra Small (xs)=”12″
- Small (sm)=”12″
- Medium (md)=”12″
- Large (lg)=”5″

Drag and drop the Third Column inside the First Row

23. Drag and drop the Column inside the Second Row

Drag and drop the Column Widget inside the Second Row in the Accordion Item Container.
In the Properties Sheet of the Column widget, set the Breakpoints properties as below:
- Extra Small (xs)=”12″
- Small (sm)=”12″
- Medium (md)=”12″
- Large (lg)=”2″

Drag and drop the Column inside the Second Row

24. Drag and drop another Column inside the Second Row

Drag and drop the Column Widget inside the Second Row in the Accordion Item Container.
In the Properties Sheet of the Column widget, set the Breakpoints properties as below:
- Extra Small (xs)=”12″
- Small (sm)=”12″
- Medium (md)=”12″
- Large (lg)=”3″

Drag and drop another Column inside the Second Row

25. Drag and drop Select Input in the First Column of the First Row

Place the Select Input Widget by dragging and dropping it into the First Column of the First Row within the Accordion Item Container.
Next, navigate to the Properties Sheet of the Select Input widget.
Locate the Data property and click on the gear icon associated with it.
This action will open a Select Data Model window, allowing you to map the widget appropriately.

Drag and drop Select Input in First Column of First Row

26. Select the Title Combo Box Data Model for Select Input

Select the “Combo_Title” Combo Box Data Model to Map with the Select Input Widget.
Click on the Save button to save the mapping.

Select the Title Combo Box Data Model for Select Input

27. Set Select Input Properties for Title

Once you do the Data Model mapping, let’s configure the next properties for Select Input.
Fill in the “Label” property as “Title”.
Fill in the “Error” property as “Select a Title !!!”.
In the Display Logic section of the Select Input Properties Sheet check the “Required” property checkbox.

Set Select Input Properties for Title

28. Drag and Drop Input in the second Column of the First Row of the Accordion Item Container

Drag and Drop the Input widget in the second Column of the First Row of the Accordion Item Container.
Next, navigate to the Properties Sheet of the Input widget.
Locate the Data property and click on the gear icon associated with it.
This action will open a Select Data Model window, allowing you to map the widget appropriately.

Drag and Drop Input in the second Column of the First Row of Accordion Item Container

29. Select the First Name Edit Data Model for Input

Select the “First_Name” Edit Data Model to Map with Input Widget.
Click on the Save button to save the mapping.

Select the First Name Edit Data Model for Input

30. Set Input Properties for First Name

Once you do the Data Model mapping, let’s configure the next properties for Input.
Fill in the “Label” property as “First Name”.
Fill in the “Error” property as “Input First Name !!!”.
In the Display Logic section of Input Properties Sheet check the “Required” property checkbox.
Select the Appearance property as “Outline”.

Set Input Properties for First Name

31. Drag and Drop Input in the third Column of the First Row of the Accordion Item Container

Drag and Drop the Input widget in the third Column of the First Row of the Accordion Item Container.
Next, navigate to the Properties Sheet of the Input widget.
Locate the Data property and click on the gear icon associated with it.
This action will open a Select Data Model window, allowing you to map the widget appropriately.

Drag and Drop Input in the third Column of the First Row of Accordion Item Container

32. Select the First Name Edit Data Model for Input

Select the “Last_Name” Edit Data Model to Map with Input Widget.
Click on the Save button to save the mapping.

Select the First Name Edit Data Model for Input

33. Set Input Properties for Last Name

Once you do the Data Model mapping, let’s configure the next properties for Input.
Fill in the “Label” property as “Last Name”.
Fill in the “Error” property as “Input Last Name !!!”.
In the Display Logic section of the Input Properties Sheet check the “Required” property checkbox.
Select the Appearance property as “Outline”.

Set Input Properties for Last Name

34. Drag and drop Select Input in the First Column of the Second Row

Place the Select Input Widget by dragging and dropping it into the First Column of the Second Row within the Accordion Item Container.
Next, navigate to the Properties Sheet of the Select Input widget.
Locate the Data property and click on the gear icon associated with it.
This action will open a Select Data Model window, allowing you to map the widget appropriately.

Drag and drop Select Input in First Column of Second Row

35. Select the Gender Combo Box Data Model for Select Input

Select the “Combo_Gender” Combo Box Data Model to Map with the Select Input Widget.
Click on the Save button to save the mapping.

Select the Gender Combo Box Data Model for Select Input

36. Set Select Input Properties for Gender

Once you do the Data Model mapping, let’s configure the next properties for Select Input.
Fill in the “Label” property as “Gender”.
Fill in the “Error” property as “Select a Gender !!!”.
In the Display Logic section of the Select Input Properties Sheet check the “Required” property checkbox.

Set Select Input Properties for Gender

37. Drag and drop the Date widget in the Second Column of the Second Row

Place the Date Widget by dragging and dropping it into the Second Column of the Second Row within the Accordion Item Container.
Next, navigate to the Properties Sheet of the Select Input widget.
Locate the Data property and click on the gear icon associated with it.
This action will open a Select Data Model window, allowing you to map the widget appropriately.

Drag and drop Date widget in Second Column of Second Row

38. Select the Birth Date Edit Data Model for the Date widget

Select the “Birth_Date” Edit Data Model to Map with Date Widget.
Click on the Save button to save the mapping.

Select the Birth Date Edit Data Model for Date widget

39. Member Information Accordion Item

Now the Accordion item has initial information for the Member.
Let’s move forward to add another Accordion Item for Contact Information.

Member Information Accordion Item

40. Drag and drop another Accordion Item below the first one

Now Drag and drop another Accordion Item below the first one for the Phone Contact information.

Drag and drop another Accordion Item below the first one

41. Set Labels & Icons properties of the Accordion Item Header

Click on the Accordion Button(Accordion Item Header) inside the Accordion Item widget.
In the properties sheet of the Accordion Item Header, Fill in the text as “Phone” for the Label property.
Change the Label Type property to Label and Icon.
Fill in the Icon property with the text as “contacts”.
Fill in the Class property with the text “button-text-bold”.

Set Labels & Icons properties of Accordion Item Header

42. Perform changes in HTML code from the Template section

Now to make Accordion open and close without affecting the previous one you need to perform the change to the HTML code of the Accordion Item from the Template section.
Change #item0 to #item1 from the tag for this Accordion Item only.
In tag change (click)=”item0.toggleItem()” to (click)=”item1.toggleItem()”
In tag change [collapsed]=”!item0.visible” to [collapsed]=”!item1.visible”
Please refer highlighted area on the screen.

Perform changes in HTML code from Template section

43. Drag and Drop the Subform widget in the Accordion Item Container

Drag and Drop the Subform widget in the second Accordion Item Container.
Next, navigate to the Properties Sheet of the Subform widget.
Locate the Data property and click on the gear icon associated with it.
This action will open a Select Data Model window, allowing you to map the widget appropriately.

Drag and Drop the Subform widget in Accordion Item Container

44. Select the SubF_M_Contact Subform Data Model for the Subform widget

Select the “SubF_M_Contact” Subform Data Model to Map with the Subform Widget.
Click on the Save button to save the mapping.

Select the SubF_M_Contact Subform Data Model for the Subform widget

45. Drag and drop another Accordion Item below the Phone Accordion

Now drag and drop another Accordion Item below the Phone Accordion for Email Information.

Drag and drop another Accordion Item below the Phone Accordion

46. Set Labels & Icons properties of the Accordion Item Header

Click on the Accordion Button(Accordion Item Header) inside the Accordion Item widget.
In the properties sheet of the Accordion Item Header, Fill in the text as “Email” for the Label property.
Change the Label Type property to Label and Icon.
Fill in the Icon property with the text as “email”.
Fill in the Class property with the text “button-text-bold”.

Set Labels & Icons properties of Accordion Item Header

47. Perform changes in HTML code from the Template section

Now to make Accordion open and close without affecting the previous one you need to perform the change to the HTML code of the Accordion Item from the Template section.
Change #item0 to #item2 from the tag for this Accordion Item only.
In tag change (click)=”item0.toggleItem()” to (click)=”item2.toggleItem()”
In tag change [collapsed]=”!item0.visible” to [collapsed]=”!item2.visible”
Please refer highlighted area on the screen.

Perform changes in HTML code from Template section

48. Drag and Drop the Subform widget in the Accordion Item Container

Drag and Drop the Subform widget in the third Accordion Item Container.
Next, navigate to the Properties Sheet of the Subform widget.
Locate the Data property and click on the gear icon associated with it.
This action will open a Select Data Model window, allowing you to map the widget appropriately.

Drag and Drop the Subform widget in Accordion Item Container

49. Select the SubFMEmail Subform Data Model for the Subform widget

Select the “SubFMEmail” Subform Data Model to Map with Subform Widget.
Click on the Save button to save the mapping.

Select the SubFMEmail Subform Data Model for the Subform widget

50. Drag and Drop the Row widget in MCard (top) Container

Drag and drop the Row widget inside the MCard (top) Container below the very first Row of the component.

Drag and Drop Row widget in MCard (top) Container

51. Drag and Drop the Column inside the Last dropped Row

Drag and Drop the Column widget inside the Last dropped Row.
In the Properties Sheet of Column fill in the Class property with “smallSpacingTopOutsideContainer” and “align-items-end”.

Drag and Drop the Column inside the Last dropped Row

52. 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

53. Select the Data Model for the Save Button

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

Select Data Model for the Save Button

54. Set properties for the Save button

Set properties for the Button widget.
Under the Display Logic section change the Button Style to “Raised Button”.
Fill in the Disabled property with “screenFormGroup.invalid”(without double quotes).
Under Label & Icons fill in the Label property with “Save” text.
In Class property fill in the text as “savebutton”.

Set properties for Save button

55. Drag and drop another Button for Cancel operation

Drag and drop another Button widget beside the Last dropped button widget for the Save operation.
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 another Button for Cancel operation

56. Select the Data Model for the Cancel operation

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

Select Data Model for Cancel operation

57. Set the Properties of the Cancel 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 “Warn”.
Under Label & Icons fill in the Label property with “Cancel” text.

Set Properties of Cancel button

58. Save the performed Changes

Save the performed Changes by clicking on the Save button in the top right corner.

Save the performed Changes

59. Exit the Expanded View

Exit the Expanded View to see how it will look in Live Preview.
Click on the Live Preview to see the actual result.

Exit the Expanded View

60. Live Preview

In Live Preview navigate to the “Member List” from the navigation Sidebar.
Click on the Create Member button to see the Member Information screen for creating a new member.

Live Preview

61. Create Member Screen in Live Preview

Here is the Member Information screen for creating a new Member.
On the Member Accordion, a new Member ID is displayed and it contains fields to fill in the information.
You can either click on the Save or Cancel button.

Create Member Screen in Live Preview

62. Modify existing Member Information

To modify the existing information of a Member click on the Edit button.

Modify existing Member Information

63. Modify Member Information Screen

Here you can see the screen to Modify the information for existing Members.
The Subform present inside the Phone and Email Accordion is not visible because we have not added a Component for that in SmartUX studio.
Let’s continue adding components for the Contact Information of Members in the Next Lesson.

Modify Member Information Screen

The guide covered the process of adding and designing a member card component, including navigating, selecting options, filling in the information, and saving changes in a training setting. From selecting classes to filling in member information, you’ve learned how to create a customized member card for your training program. Enhance your training by following the precise instructions to add and design the Member Card component in the application. From selecting buttons to entering information, this guide covers all the necessary steps for a seamless process.