Lesson 12: Drag and Drop Widgets in Column Cell Container to display records in Table

Welcome to Lesson 12 of our SmartUX Demo Application series. This guide will walk you through a series of actions to drag and drop widgets in the column cell container to display records in a table. Each step is carefully outlined to help you efficiently navigate through the process. This guide will take you through different sections of components, widgets and their properties. Follow the engaging instructions below to complete the process and enhance your training functionalities. In the previous lesson, you created a table body and assigned style classes for alignment. Let’s move forward to display records in the table.

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

• Now drag and drop the Label widget inside the First Column Container.
• Click on the gear icon of the Data Mapping properties from the Properties Sheet of Label.
• This will open a window to Select Data Model.

• Select the “Event_Inforrmation_Event_ID” Edit control Data Model.
• Click the Save button to map the Data Model.

• In the Properties Sheet of the Label, click on the gear icon of the Text property.
• This will open a window for the Select Mg* Function.
• In this Text property, you can input the text you desire or get the value of the “Event_Inforrmation_Event_ID” Edit control from Magic xpa using the “mg.getValue” function.
• This function will fetch value from the Magic xpa control to the Label widget.

• Select the Data Mapping Radio button at the “Select Mg* Function” window.
• Expand the “Event_Inforrmation_Event_ID” Edit control.
• Select the “mg.getValue” function and click the Save button.

• Now the Text is mapped with mg.getValue function for Event ID.
• Select the Checkbox of the property “Is Inside Table”.
• This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

• Follow the same steps as you did for the previous step but for the next columns.
• Now drag and drop the Label widget inside the Container of the second column “Event Type”.
• Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
• This will open a window to Select Data Model.

• Select the “Event_Inforrmation_Event_Type” Edit control Data Model.
• Click the Save button to map the Data Model.

• In the Properties Sheet of the Label, click on the gear icon of the Text property.
• This will open a window for the Select Mg* Function.
• In this Text property, you can either input the text you desire or you can get the value of the “Event Type” Edit control from Magic xpa using the “mg.getValue” function.
• This function will fetch value from the Magic xpa control to the Label widget.

• Select the Data Mapping Radio button at the “Select Mg* Function” window.
• Expand the “Event_Inforrmation_Event_Type” Edit control.
• Select the “mg.getValue” function and click the Save button.

• Now the Text is mapped with mg.getValue function for “Event_Inforrmation_Event_Type”.
• Select the Checkbox of the property “Is Inside Table”.
• This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

• Follow the similar steps as you did for the previous step but for the next columns.
• Now drag and drop the Label widget inside the container of the third column “Event Name”.
• Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
• This will open a window to Select Data Model.

• Select the “Event_Inforrmation_Event_Name” Edit control Data Model.
• Click the Save button to map the Data Model.

• In the Properties Sheet of the Label, click on the gear icon of the Text property.
• This will open a window for the Select Mg* Function.
• In this Text property, you can either input the text you desire or you can get the value of the “Event_Inforrmation_Event_Name” Edit control from Magic xpa using the “mg.getValue” function.
• This function will fetch value from the Magic xpa control to the Label widget.

• Select the Data Mapping Radio button at the “Select Mg* Function” window.
• Expand the “Event_Inforrmation_Event_Name” Edit control.
• Select the “mg.getValue” function and click the Save button.

• Now the Text is mapped with mg.getValue function for “Event Name”.
• Select the Checkbox of the property “Is Inside Table”.
• This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

• Follow the similar steps as you did for the previous step but for the next columns.
• Now drag and drop the Label widget inside the container of the fourth column “Event Location”.
• Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
• This will open a window to Select Data Model.

• Select the “Event_Location” Edit control Data Model.
• Click the Save button to map the Data Model.

• In the Properties Sheet of the Label, click on the gear icon of the Text property.
• This will open a window for the Select Mg* Function.
• In this Text property, you can either input the text you desire or you can get the value of the “Event_Location” Edit control from Magic xpa using the “mg.getValue” function.
• This function will fetch value from the Magic xpa control to the Label widget.

• Select the Data Mapping Radio button at the “Select Mg* Function” window.
• Expand the “Event_Location” Edit control.
• Select the “mg.getValue” function and click the Save button.

• Now the Text is mapped with mg.getValue function for “Event Location”.
• Select the Checkbox of the property “Is Inside Table”.
• This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

• Follow the similar steps as you did for the previous step but for the next columns.
• Now drag and drop the Label widget inside the container of the fifth column “Start Date”.
• Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
• This will open a window to Select Data Model.

• Select the “Event_Inforrmation_Start_Date” Edit control Data Model.
• Click the Save button to map the Data Model.

• In the Properties Sheet of the Label, click on the gear icon of the Text property.
• This will open a window for the Select Mg* Function.
• In this Text property, you can either input the text you desire or you can get the value of the “Event_Inforrmation_Start_Date” Edit control from Magic xpa using the “mg.getValue” function.
• This function will fetch value from the Magic xpa control to the Label widget.

• Select the Data Mapping Radio button at the “Select Mg* Function” window.
• Expand the “Event_Inforrmation_Start_Date” Edit control.
• Select the “mg.getValue” function and click the Save button.

• Now the Text is mapped with mg.getValue function for “Start Date”.
• Select the Checkbox of the property “Is Inside Table”.
• This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

• In the Highlighted HTML tag, you will see the Mg* function:
  • “{{ mg.getValue(mgc.Event_Inforrmation_Start_Date,row.rowId) }}”
• Park before the closing curly braces of the function.

• DatePipe is an essential feature in Angular that allows you to format dates according to locale rules.
• It is beneficial when you need to display dates in a human-readable format within your application.
• Let’s modify the Mg* Function.
• Currently, the Mg* Function is as follows:
  • {{ mg.getValue(mgc.Event_Inforrmation_Start_Date,row.rowId) }}
• Add DatePipe to the Mg* function as follows:
  • {{ mg.getValue(mgc.Event_Inforrmation_Start_Date,row.rowId)|date:’dd/MM/YYYY’ }}
• Once you add DatePipe you will observe the Start Date is formatted and now in a readable format.
• The entire expression retrieves a date value from the specified component, and then the date filter formats it into the desired date format (day/month/year).
• For example, if the original date value is “2024-04-15,” the output would be “15/04/2024.”

• Follow the similar steps as you did for the previous step but for the next columns.
• Now drag and drop the Label widget inside the container of the fifth column “End Date”.
• Click on the gear icon of the Data Mapping property from the Properties Sheet of Label.
• This will open a window to Select Data Model.

• Select the “Event_Inforrmation_End_Date” Edit control Data Model.
• Click the Save button to map the Data Model.

• In the Properties Sheet of the Label, click on the gear icon of the Text property.
• This will open a window for the Select Mg* Function.
• In this Text property, you can either input the text you desire or you can get the value of the “Event_Inforrmation_End_Date” Edit control from Magic xpa using the “mg.getValue” function.
• This function will fetch value from the Magic xpa control to the Label widget.

• Select the Data Mapping Radio button at the “Select Mg* Function” window.
• Expand the “Event_Inforrmation_End_Date” Edit control.
• Select the “mg.getValue” function and click the Save button.

• Now the Text is mapped with mg.getValue function for “End Date”.
• Select the Checkbox of the property “Is Inside Table”.
• This property will add [rowId]=”row.rowId” to the Label HTML tag to identify it is inside the Table.

• In the Highlighted HTML tag, you will see the Mg* function:
  • “{{ mg.getValue(mgc.Event_Inforrmation_End_Date,row.rowId) }}”
• Park before the closing curly braces of the function.

• DatePipe is an essential feature in Angular that allows you to format dates according to locale rules.
• It is beneficial when you need to display dates in a human-readable format within your application.
• Let’s modify the Mg* Function.
• Currently, the Mg* Function is as follows:
  • {{ mg.getValue(mgc.Event_Inforrmation_End_Date,row.rowId) }}
• Add DatePipe to the Mg* function as follows:
  • {{ mg.getValue(mgc.Event_Inforrmation_End_Date,row.rowId)|date:’dd/MM/YYYY’ }}
• Once you add DatePipe you will observe the Start Date is formatted and now in a readable format.
• The entire expression retrieves a date value from the specified component, and then the date filter formats it into the desired date format (day/month/year).
• For example, if the original date value is “2024-04-15,” the output would be “15/04/2024.”

• Drag and drop the Button widget for modify operation, inside the container of the seventh column “Action”.
• Click on the gear icon of the Data Mapping property from the Properties Sheet of the Button.
• This will open a window to Select Data Model.

• Select the “btn_Modify” Button to control the Data Model.
• Click the Save button to map the Data Model.

• Select the Checkbox of the property “Is Inside Table”.
• This property will add [rowId]=”row.rowId” to the Button HTML tag to identify it is inside the Table.
• In the Labels & Icons section remove the Button Text from the Label property.
• In the Style Override section input the Class property as “editbtn”.

• Drag and drop another Button widget for the Delete operation, inside the container of the seventh column “Action”.
• Click on the gear icon of the Data Mapping property from the Properties Sheet of the Button.
• This will open a window to Select Data Model.

• Select the “btn_Delete” Button control from the Data Model.
• Click the Save button to map the Data Model.

• Select the Checkbox of the property “Is Inside Table”.
• This property will add [rowId]=”row.rowId” to the Button HTML tag to identify it is inside the Table.
• In the Labels & Icons section remove the Button Text from the Label property.
• In the Style Override section input the Class property as “deletebtn”.
• Save the component changes by clicking Save in the top right corner.
• Disable the View Code and Expanded View.

• Now you can see the records from the Event List table.
• These records will also be visible in design mode in Canvas as the SmartUX Studio is a WYSIWYG Studio.
• Here the Start Date and End Date Column display the Date in a different format.
• We will refine the Start Date and End Date Columns in the next Lesson.
• Also, we have dropped a Subform on the Canvas, we will add a display condition for the Card and the Subform widget.

The guide covered the process of dragging and dropping widgets in a column cell container to showcase records in a table, ensuring a seamless experience in managing and displaying data within the application. Mastering the process of Drag and Drop Widgets in Column Cell Container to display records in a Table. Simply follow the engaging instructions provided and enhance your workflow effortlessly.