Lesson 5: Adding Table to the Component and Component to Sidebar of Application Template

• In the last lesson, you performed steps till the Create Button.
• Now drag and drop the Table Body widget inside the second Container below the Row widget.
• Click on the “Div” widget on the canvas.
• In the Properties Sheet of the “Div” widget input “ScrollableSection” in the Class property.

• 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 “Table_Member_List” 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 “Column_Member_ID” 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 “Column_Title” inside the Table.
• Perform the Column Mapping with “Column_Title” Data Model column control.

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

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

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

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

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

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

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

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

• Select the “Column_Gender” 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 below the “Div” of the Table inside the second Container.
• Click on the Save button on the top right corner of the browser window of SmartUX Studio.

• You need to have a form for the Create New Member or to modify the existing Member from the Member List table.
• Drag and Drop the Subform widget below the “MainGroup” Card, inside the very first Container.
• Perform the Data Mapping with the “SFMCard” Data Model Subform control.
• Click on the gear icon from the Properties Sheet of the Subform widget.

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

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

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

• In the Route Editor click on the Add Route.

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

• 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 “Member 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-Members” below the “M-Wlcome” 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=Members~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 under the “C-MemberList” 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=Members List~u=/MList”.
• 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 Members 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, exit the Expanded View and View Code.
• You will see a Create Member button, one column and the Table Paginator only.
• This is because no mock data is recorded for the “MList” 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 Members Menu in the sidebar.
• Click on the Members this will open a child menu as “Member List”.
• Click on the “Members List” Menu, this will show the “MList” 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.

This guide covered the process of adding the Members List Table to the component in SmartUX. It also covered drag and drop of Table Column inside the Table including Column mapping with respective Data Models from Magic xpa. Further, you have performed modifications to the Start Program in Magic xpa to have the Members List in the sidebar of the Application Template. By following the engaging instructions provided, you can efficiently set up the necessary components for training. Please continue with the next Lesson to achieve showing record in the Table.