Lesson 8: Use of DatePipe for Date Column format and Creating a Dynamic Property for Widgets

Welcome to Lesson 8 of our SmartUX Demo Application series. This guide walks you through changing the date format of the Birth Date Column and adding a display condition to the Subform and Card Widget in the Member List Component. These instructions will help you customize training data efficiently.

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

• We successfully mapped the required widgets with their respective Data Model controls and were able to see the Table records.
• Here in the Live Preview of the Member List Component the Birth Date Column Date format is not as expected.
• Let’s modify the format as per requirement using the DatePipe.

• Exit the Live Preview by clicking on the MList component.
• Enable the View Code.
• This will open a section under Canvas that shows the HTML source code of every Widget dropped on the Canvas.
• In the Design mode of the MList Component, click on the Label widget under the Birth Date Column.
• Once you click the Birth Date Label, it will Highlight the HTML source code for it.

• In the Highlighted HTML tag, you will see the Mg* function:
  • “{{ mg.getValue(mgc.Birth_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 particularly useful 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.Birth_Date,row.rowId) }}
• Add DatePipe to the Mg* function as follows:
  • {{ mg.getValue(mgc.Birth_Date,row.rowId)|date:’dd/MM/YYYY’ }}
• Once you add DatePipe you will observe the Birth 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.”

• Save the Changes performed.
• Enter in Live Preview.
• Now you will see the change in Live Preview as well.
• Now exit the Live Preview to move forward to add Dynamic Property to the Widget.

• Enable the Expanded Mode for Canvas.
• Select the Card Widget.
• You can simply click on the Card Widget from Canvas or from the Outline tree.
• Go to the Properties Sheet of the MainGroup Card widget.

• Under the Dynamic Properties section in the Properties sheet of the Card Widget.
• Click on “Add New Property”.
• In the first input field “Enter Attribute” enter the attribute as :
  • [style.display]
• As we are adding this attribute to the root tag Card itself, do not input anything in the “Enter Selector” field.
• Click on the Save icon beside the “Enter Selector” field, highlighted with a circle.
• The [style.display] property in CSS determines how an HTML element is rendered in terms of its display behaviour.
• It affects the type of rendering box used for the element.

• Now fill in the text box with:
  • mg.getVisible(mgc.MainGroup)==’visible’?’block’:’none’
• This code dynamically sets the display property of an HTML element based on the visibility state of a component.
• If the component is visible, the element will be displayed as a block; otherwise, it will be hidden.
• [style.display]:
  • This part of the code sets the display property of an HTML element.
  • The square brackets ([]) indicate that this is a binding expression, commonly used in frameworks like Angular or Vue.js.
  • The style.display property controls how an element is displayed on the web page.
• mg.getVisible(mgc.MainGroup):
  • This calls a method named getVisible() on an object referred to as mg.
  • The method takes an argument, which appears to be the MainGroup property of an object referred to as mgc.
  • The purpose of this method is to determine the visibility state of the specified component (in this case, the MainGroup).
• =='visible' ? 'block' : 'none':
  • This is a ternary conditional expression.
  • It checks whether the result of mg.getVisible(mgc.MainGroup) is equal to the string 'visible'.
  • If it is, the expression evaluates to 'block', which means the element will be displayed as a block-level element.
  • Otherwise, if the visibility is not 'visible', it evaluates to 'none', which means the element will be hidden (not displayed).

• Now scroll down to the bottom of the Canvas.
• You will see the Subform widget.
• Click on the Subform widget to see its Properties Sheet.

• Under the Dynamic Properties section in the Properties sheet of the Subform Widget.
• Click on “Add New Property”.
• In the first input field “Enter Attribute” enter the attribute as :
  • [style.display]
• As we add this attribute to the root tag Subform itself, do not input anything in the “Enter Selector” field.
• Click on the Save icon beside the “Enter Selector” field, highlighted with a circle.
• The [style.display] property in CSS determines how an HTML element is rendered in terms of its display behaviour.
• It affects the type of rendering box used for the element.

• Now fill in the text box with:
  • mg.getVisible(mgc.MainGroup)!==’visible’?’block’:’none’
• This code dynamically sets the display property of an HTML element based on the visibility state of a component.
• If the component is not visible, the element will be displayed as a block; otherwise, it will be hidden.
• [style.display]:
  • This part of the code sets the display property of an HTML element.
  • The square brackets ([]) indicate that this is a binding expression, commonly used in frameworks like Angular or Vue.js.
  • The style.display property controls how an element is displayed on the web page.
• mg.getVisible(mgc.MainGroup):
  • This calls a method named getVisible() on an object referred to as mg.
  • The method takes an argument, which appears to be the MainGroup property of an object referred to as mgc.
  • The purpose of this method is to determine the visibility state of the specified component (in this case, the MainGroup).
• !=='visible' ? 'block' : 'none':
  • This is a ternary conditional expression.
  • It checks whether the result of mg.getVisible(mgc.MainGroup) is not equal to the string 'visible'.
  • If it is not equal, the expression evaluates to 'block', which means the element will be displayed as a block-level element.
  • Otherwise, if the visibility is 'visible', it evaluates to 'none', which means the element will be hidden (not displayed).

• Now if you disable the View Code and look for the Subform on the Canvas.
• The Subform widget is now hidden from the Canvas.

• Even if the Subform widget is Hidden from the Canvas, there is a way to select the Subform widget and change its properties.
• Switch to the Outline Tree Pane beside the Properties Sheet pane.
• Scroll down and look for Subform.1
• Here you can select Go to Property to perform any changes to Subform properties.

This guide covered steps to add DatePipe and the date format to the Birth Date Column. It also covered the process of creating a Dynamic Property for the widget to set a display condition for the Subform and Card Widget using the Template section of SmartUX. This enhances the user experience for managing training information.