Lesson 15: Add and Design Registered Member Component

Welcome to Lesson 15 of our SmartUX Demo Application series. This guide will walk you through the process of adding and designing the “Registered Members” component in the Training application. Follow the detailed instructions to customize the component effectively.

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

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

• Select the Registered Member program from the list.
• Click on the Next button.

• Select Blank Template as the Component Template for the “RegisteredMembers” program.
• Click on the Finish button.

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

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

• Switch to the UX Widgets pane.
• Drag and drop the Row widget inside the Container.

• Drag and drop another Row widget inside the Container below the last dropped Row widget.

• Drag and drop the Column widget inside the First Row widget.
• In the Properties of Column widget, fill in the Class property with “align-items-end”.

• Drag and drop the Button widget inside the first Row Column.
• In the properties sheet of the Button widget, Click on the gear icon associated with the Data Mapping property.
• This will open the window to Select Data Model.

• Click on the btnAddMember data model to map it with the Button widget.
• Click on the Save button to confirm mapping.

• In the Properties Sheet of the Select 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 “Select Member”.
• Change the “Label Type” property to “Label and Icon”.
• In the Icon property input text as “people”.
• Fill in the Class property with “smallSpacingBottomOutsideContainer”.

• Drag and drop the Column widget inside the second Row widget of the Form Container.

• Drag and drop the Table Body widget inside the last dropped Column widget.
• Click on the Table on Canvas to see its properties sheet.
• In the properties sheet of the Table, click on the gear icon associated with the Data Mapping property.
• This will open the Select Data Model window.

• Select the Data Model “Table_M_Contact” Table control.
• Click on the “Save” button to save the Data Mapping.
• To perform automated generation of the Table it is mandatory to map the Table widget with its correct Data Model.

• In the properties sheet of the Table, fill in the Class property with “container_border”.
• 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.

• Here you can see the “Sync columns with XPA” property has fetched all the Columns present inside the Table_M_Contact 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.
• Delete the input field from the first column as this table will be Read-Only.

• Drag and drop the Label widget inside the Member 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.

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

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

• Remove the existing text from the “Set Static HTML”.
• In the Select Mg* Function window select Data Mapping radio.
• Expand the Name (Edit).
• Select the “mg.getValue” function for the Label widget.
• Click on the Save button to map the function.

• Now in the Properties Sheet of the Label go to Table Actions section.
• Check the “Is Inside Table” property Checkbox.

• Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
• The Outline tree contains all the Widgets tree, also in which order they are placed inside one another on the Canvas.
• In the Outline tree click on the “Go to Property Sheet” icon of the “button.2”.
• This will open the Properties Sheet for the Button.

• Under the Labels & Icons section, click on the gear icon associated with the Label property of Button.
• This will open the Select Mg* Function window.

• Switch to Set Static HTML in the Select Mg* Function window.
• Remove the existing text from the field.
• Click on the Save button.

• Under the Styling Overrides section, fill in the Class property with “deletebtn”.

• Save the component changes by clicking on the Save on the top right corner.
• Now enter in Live Preview.

• Using sidebar navigation go to Event List Component in Live Preview.
• Click on the Edit button on the Event.

• Here now you can see the Registered Members component inside the Accordion.
• This provides a list of Members for the Event.
• To Add Members to the Event we have a button in Registered Members.
• We will add a component to Select Members in the next lesson.

This guide covered the steps to add and design the “Registered Members” component in the Training application, including creating buttons, labels, tables, and customizing properties for an enhanced user experience.