Lesson 13: Applying Style Class to Column Header, Column Cell and Container for alignment

Welcome to Lesson 13 of our SmartUX Demo Application series. This guide will walk you through applying style Class properties to Column Header Cell, Column Cell and its Container. These Classes’ property allows user to have an alignment and look and feel as per their requirement. Follow the detailed and engaging instructions provided to seamlessly configure the necessary components within the application.

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

• Click on the First Column Header “#”.
• In the Properties Sheet of Column Header Cell input the Class property with “table-col-xs” and “text-center”.

• Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
• The Outline tree contains all the Widgets tree, also in which order they are placed inside one another on the Canvas.
• In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.1”.
• This will open the Properties Sheet for the Column Cell.

• In the Properties Sheet of Column Cell, input the Class property as “table-col-xs” and “text-center”.

• Now, Click on the Fourth Column Header Cell “Event Location”.
• In the Properties Sheet of Column Cell Header, input the Class property as “table-col-sm” and “text-center”.

• Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
• In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.4”.
• This will open the Properties Sheet for the Column Cell.

• In the Properties Sheet of Column Cell, input the Class property as “table-col-sm” and “text-center”.

• Now, Click on the Fifth Column Header Cell “Start Date”.
• In the Properties Sheet of Column Cell Header, input the Class property as “table-col-sm”.

• Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
• In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.5”.
• This will open the Properties Sheet for the Column Cell.

• In the Properties Sheet of Column Cell, input the Class property as “table-col-sm”.

• Now, Click on the Fifth Column Header Cell “End Date”.
• In the Properties Sheet of Column Cell Header, input the Class property as “table-col-sm”.

• Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
• In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.6”.
• This will open the Properties Sheet for the Column Cell.

• In the Properties Sheet of Column Cell, input the Class property as “table-col-sm”.

• Now, Click on the Seventh Column Header Cell “Action”.
• In the Properties Sheet of Column Cell Header, input the Class property as “ActionCol” and “text-center”.

• Switch to the Outline tree tab beside the Properties Sheet tab in the Left Pane of SmartUX Studio.
• In the Outline tree click on the “Go to Property Sheet” icon of the “column-cell.7”.
• This will open the Properties Sheet for the Column Cell.

• In the Properties Sheet of Column Cell, input the Class property as “ActionCol” and “text-center”.

• 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.
• 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.
• You can also refer to Lesson 12 (7th Point).

• 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 Card widget containing the Subform widget.
• Click on the Card widget to see its Properties Sheet.

• 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 Table Card widget is now hidden from the Canvas.

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

This guide covered steps to 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.