Lesson 11: Event List Component

Welcome to Lesson 11 of our SmartUX Demo Application series. This guide will walk you through

1. Adding a Table and Column mapping to the Data Model to the Event List Component in SmartUX.

2. Incorporating a Component into the Sidebar Navigation using Magic xpa.

Follow the engaging instructions below to complete the process and enhance your training functionalities.

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

• As you switch to SmartUX studio, click on the Add Component.

• The Add Component will open the Add Program window.
• Select the program “EventList”.
• Now click on the “Next” button.

• For the Selected “EventList” program, Choose the component template.
• Here select Blank Template as a component template.

• Here click on the highlighted area to enable the View Code and Expanded View for the Component Canvas.

• Once you enter Expanded View, you will see the Widgets on the Canvas.
• Select the Container widget and do the Form Name mapping to it.
• In the Properties Sheet click on the gear icon associated with the Form Name property.
• It will open the Select Data Model window.

• Select the “EventList” form to Map with the Form Name property of the Container widget.
• Click on the “Save” button to map.

• Switch to the UX Widgets Pane to drag and drop the required widgets on the Canvas.

• Drag and Drop the Card widget from the UX Widgets pane inside the Container widget.
• In the Card Properties sheet click on the gear icon of the Data property to map it with a group control.

• Select the “MainGroup” Group control from the Data Model list.
• Click on the Save button to do the mapping.

• Drag and drop the Container inside the Card widget.
• In the Properties Sheet of Container map the Form Name to EventList.
• In the Styling Overrides section, fill in the Class property with “allSideSpacing-containers”.

• Drag and drop the Heading H4 inside the last dropped Container widget.
• In the Properties Sheet of the Heading H4 widget:
  • Change the Text property to “Events”.
  • In the Class property input “horizontal-line-bottom”.

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

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

• Drag and Drop the Button widget inside the Column.
• Click on the Data Mapping gear icon in the Properties Sheet of the Button widget.

• Select the Data Model “BtnCreateEvent” Button.
• Click on the Save button to save the Data Mapping.

• In the Properties Sheet of the Create Event 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 “Create Event”.
• Change the “Label Type” property to “Label and Icon”.
• In the Icon property input text as “calendar_today”.
• Fill in the Class property with “smallSpacingTopOutsideContainer”.

• Drag and drop the Table Body widget inside the Container below the last dropped Row widget.
• Click on the Div of the Table Body.
• In the Properties Sheet of Div, fill in the Class property with “ScrollableSection”.

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

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

***Note***
> The Columns may not be displayed on in the Table.
> You have to drag and drop the all the columns inside the Table.
> Map all the Table Columns with respective Column Data Models.
> After Mapping all the Table Columns you need to enter in Live Preview mode and select the Member List menu from the sidebar.
> This will display all the columns without any records.
> Exit the Live Preview and now the Columns will be visible on Canvas as well.
> This is needed to record the Mock data for the Table to display columns for the First Time only.

• Now let’s start dropping Table Columns widgets inside the Table.
• Drag and Drop the First Table Column inside the Table on the Canvas.
• In the Properties Sheet pane of the Table Column widget click on the gear icon of “Column Mapping”.

• Select the “EventID” Column control Data Model.
• Click on the Save button to map the Column.

• Once you do the Column Mapping, the Column Title property will get assigned a function to get the actual Table Column name from the Magic xpa form.
• You can also input the desired Column title as per your requirement.
• To input desired text as Title click on the gear icon on the Column Title property.
• This will open a window for “Select Mg* Function”.

• In the “Select Mg* Function” window, you will see two radio buttons “Data Mapping” and “Set Static HTML”.
• Select the “Set Static HTML” radio button.
• In the Set Static HTML section remove the existing text.
• Here you can input the desired text for the Column.
• Here enter “#” in the provided field.
• Click Save to assign the desired text to the Table Column Title.
• Similarly, you can drag and drop the remaining six columns inside the Table and do the Column mapping.

• Drag and Drop the second Column for “Event Type” inside the Table.
• Perform the Column Mapping with “EventType” Data Model column control.

• Select the “EventType” Column control from the Select Data Model List.
• Click on the Save button.

• Drag and Drop the Third Column for “EventName” inside the Table.
• Perform the Column Mapping with “EventName” Data Model column control.

• Select the “EventName” Column control from the Select Data Model List.
• Click on the Save button.

• Drag and Drop the Fourth Column for “EventLocation” inside the Table.
• Perform the Column Mapping with “EventLocation” Data Model column control.

• Select the “EventLocation” Column control from the Select Data Model List.
• Click on the Save button.

• Drag and Drop the Fifth Column for “StartDate” inside the Table.
• Perform the Column Mapping with “StartDate” Data Model column control.

• Select the “StartDate” Column control from the Select Data Model List.
• Click on the Save button.

• Drag and Drop the Sixth Column for “EndDate” inside the Table.
• Perform the Column Mapping with “EndDate” Data Model column control.

• Select the “EndDate” Column control from the Select Data Model List.
• Click on the Save button.

• Drag and Drop the Seventh Column for “Column_Action” inside the Table.
• Perform the Column Mapping with “Column_Action” Data Model column control.

• Select the “Column_Action” Column control from the Select Data Model List.
• Click on the Save button.

• Drag and Drop the Paginator widget inside the “Div” of the Table.

• You need to have a form for the Create New Event or to modify the existing Event from the Event List table.
• Drag and Drop the Card widget below the “MainGroup” Card, inside the very first Container.

• Drag and drop the Subform widget inside the last dropped Card widget.
• Perform the Data Mapping with the “SFEventCard” Data Model Subform control.
• Click on the gear icon from the Properties Sheet of the Subform widget.

• Select the “SFEventCard” Subform control from the Select Data Model List.
• Click on the Save button.

• Select the option to “Save”.

• Now switch to the Components Pane.
• Click on the Configure Routes this will open the Router Editor.

• Configure Route will open the Route Editor window.
• Click on the plus button to add a new Route.

• The Add Route will open a window to Configure Route.
• Input the Path as “EventList” which is the Route name for the Event List component.
• Now Click on the Select Program button.

• Select the Program “EventList” from the Select Route Program.
• Click on the Save button to save the configuration.

• Once Route Configuration is saved click on the “Save Route”.

• Expand the list on the Route Editor window to see the added Route.
• Click on Close to exit the Route Editor.

• Now you need to switch to Magic xpa to add “Event List” to the sidebar navigation of the Full Menu Application Template.
• Enter into the Start Program in Magic xpa studio.

• Once you enter the Start Program switch to the subtask “BuildMenuData” from Navigator.
• Switch to the Data View of the “BuildMenuData”.

• Create a new Virtual variable “M-Events” below the “C-MembersList” with Alpha and picture 2000.
• The Virtual variable name can be anything but it must have the prefix “M-“.
• Now initialize the virtual variable with the expression “n=Events~u=/base~i=cil-star”.
• Open the expression editor on Init, create a new line in it, and provide the mentioned expression.

• Now create another Virtual variable “C-EventList” with Alpha and picture 2000.
• The Virtual variable name can be anything but it must have the prefix “C-“.
• Now initialize the virtual variable with the expression “n=Event List~u=/EventList”.
• Open the expression editor on Init, create a new line in it, and provide the mentioned expression.
• Now, we have configured the sidebar navigation menu entry.
• Escape from the Start Program and Save all the changes performed.
• The Event List menu will be automatically added to the sidebar on the SmartUX side.
• Switch to the SmartUX Studio now.

• Once you are back in the SmartUX Studio, disable the Expanded View and View Code.
• You will see a Create Event button, one column and the Table Paginator only.
• This is because no mock data is recorded for the “EventList” component.
• Now click on the Live Preview on the top right beside the Save button to enter Live Preview mode.

• Here you will see the Events Menu in the sidebar.
• Click on the Events this will open a child menu as “Event List”.
• Click on the “Event List” Menu, this will show the “EventList” component.

• Now you will see the Table Column Titles, basically a Table Body with no records.
• To see the records you need to add the respective widgets inside the columns depending on your requirements.
• Also, you need to map them to respective control from the Data Model.
• Let’s move forward and exit the Live Preview to continue with designing the Table.
• To exit the Live Preview Click on the Component under Live Component. OR
• You can also exit Live Preview by clicking on Component from Components Pane.

The guide covered adding and designing the Event List Component in SmartUX for Training, including steps for creating forms, saving data, customizing buttons, and structuring tables. Follow the detailed instructions to successfully implement this component in your application.