Lesson 16: Add and Design Member Selection Component

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

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

• Select Blank Template as the Component Template for the “MemberSelection” 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 “MemberSelection” Form Data Model.
• Click on the Save button to map.

• Drag and drop two Row widgets one after another inside the Form Container.

• Drag and drop a Column widget inside each Row widget.

• Drag and drop the Table Body widget inside the first 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 “MemberSelectionTable” 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 Look for Actions section.
• 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 MemberSelection 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 second column as this table will be Read-Only.
• Drag and drop the Label widget inside the Member Name 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 “MemberName” 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 MemberName (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.

• Drag and drop the Button widget inside the Second 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 BtnSelect data model to map it with the Button widget.
• Click on the Save button to confirm mapping.

• In the Properties Sheet of the Select button widget.
• Under the “Display Logic” Section, set the “Button Style” property to “Raised Button”.
• Under the Labels & Icons section, input the “Label” property as “Select”.
• Fill in the Class property with the “savebutton”.

• Drag and drop another Button widget inside the Second 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 BtnCancel data model to map it with the Button widget.
• Click on the Save button to confirm mapping.

• In the Properties Sheet of the Cancel button widget.
• Under the “Display Logic” Section, set the “Button Style” property to “Raised Button”.
• Change the “Button Color” property to “warn”.
• Under the Labels & Icons section, input the “Label” property as “Cancel”.

• Switch to the Component tab below the Canvas beside Template.
• In the Component tab, you will observe the contents of the MemberSelection.component.ts file.
• Change to values as shown below:
  • • private static readonly showTitleBar: boolean = false;
    • private static readonly width: string = “400px”;
    • private static readonly height: string = “400px”;
    • private static readonly shouldCloseOnBackgroundClick = false;

• Click the Save button to Save all performed actions for the Member Selection component.
• Now enter in Live Preview.

• Navigate through the navigation sidebar to Event.
• Click on Edit Event to enter in Event Card component.
• Now Click on the Select Member button to see the designed Member Selection component.

• Here you see the Member Selection component in Live Preview as an overlay to add and select Members for Event.

The guide covers adding and designing the Member Selection component, including steps like accessing components, saving changes, and navigating within the application for effective training.