Page Components (Classic)

This topic describes the various UI components that you can use to design your page and configure the data.

Design your application pages using various widgets/plug-ins. Drag and drop them on to the page to configure their properties.

Configure Properties

To access the properties of a plug-in component, select the component (a container, graph, or a breadcrumb).
Note: Some of these fields are displayed based on the selected component. This list is not comprehensive.
Field Name Description
Label The text that appears for components such as check boxes and drop-down list boxes.
Global Data Allows the data to be available globally for use by other components or query inputs. This check box is enabled only after you specify an Id for the component.
Allow Export Indicates whether data that appears in the component can be exported. By default, this check box is cleared.
Tooltips Indicates whether data in a table cell should contain tooltips displaying the content. By default, this check box is cleared.
Type The data type of an input component. If you are configuring the settings of an component of the type graph or gauge, this field contains a list of graph or gauge types.
Style The style of a meter-type gauge component.
Conditions Applies a condition that executes an action at runtime. For example, you can create a condition for the component/widget to display a control button or a warning image if the temperature recorded by the sensor exceeds 40 degrees Celsius.

Select Add conditions to build and apply conditions.
Hidden Select the check box to hide the component/widget at runtime. By default, this check box is cleared.

When a component/widget is marked as hidden, it can be shown only on associating with a button using the toggle show/hide action.

As a best practice, either use Conditions or Hidden. Avoid using these properties together.
Show on Indicates that the component/widget is visible in the selected devices. By default, the options Mobile, Tablet, and Desktop are selected.
X-axis Label The label of the horizontal axis of an component of the type graph.
Y-axis Label The label of the vertical axis of an component of the type graph.
Required Indicates whether it is mandatory to enter a value for the component that is used as an input to a query. By default, this check box is cleared.
Target Data The query input that is the target for the value of the component.
Source The source from which data should be retrieved to initialize the component. If you are configuring the settings of an input component, you can select one of the following options:
  • Data: Fetches data that from a global variable or the output value of a query.
  • Manual: Allows you to enter a value manually.
  • Formula: Allows you to create a formula using global variables and the output values of a query.
If you are configuring the settings of a display component, you can select one of the following options:
  • Data: Displays data from a global variable or the output value of a query.
  • Manual: Allows you to enter a value manually.
  • Formula: Allows you to create a formula using global variables and output values of a query.
  • URL: Displays an image from a URL.
  • File: Allows you to upload an image for the component.
Group By Enables to group the data in a graph by the selected tag name.
Options Indicates whether the values in the component are hard-coded or displayed dynamically from a query.
Actions The action that should be triggered when the component is selected.
First Option The first option that appears in an component of the type drop-down list box (for example, select an asset).
Step The step value used for a slider component.
Minimum The minimum value for an component that contains a range (such as a slider or a gauge).
Maximum The maximum value for an component that contains a range (such as a slider or a gauge).
True Label Customized text that appears when a toggle or an indicator is active.
False Label Customized text that appears when a toggle or an indicator is inactive.
Width The width of the component of the type toggle.
Show <number> rows at a time The number of rows that can appear at a time in an component of the type grid.
Validation The validations to be applied on the value entered in an input component. You can select the following options:
  • Capital: Select this check box if you want application users to enter a value only in uppercase.
  • Minimum character: Select this check box if you want to set a minimum character limit to values entered in the component, and then enter the number of minimum characters that application users must enter in the component.
  • Range Limit: Select this check box if you want to set the maximum and minimum values that can be entered in a numeric, date, or time input component.
Disabled Indicates whether you want the component to appear as disabled in the application.
Range Limit The range of values that application users can enter in the component.
Stacked Indicates whether the bars displayed in an component of the type graph should be stacked. By default, this check box is cleared.
Rounded Corners Applies rounded corners for the selected component.
Custom Colors Select the check box to set these options:
  • Add text color.
  • Add container background color.
  • Add container border color, width, and style.
Horizontal Alignment Aligns the component left, right, or center.
Columns/Rows Allows to create a grid layout to design your pages. You can split the page into vertical columns and horizontal rows for better organization of page components. Enter the number of columns/rows in the text box. You can add upto 36 columns and 6 rows.
Tip:
  • Use minimal columns while designing for smaller devices such as, tablets and mobile phones.
  • If adding more than 12 columns, avoid using nested containers.
  • For pages with more columns, it is recommended to test them across devices to ensure good user experience.
  • Consider the column gutter space and margins while planning your page layout. Columns with no content are added to the DOM and occupy few pixels of screen space.
Responsive Pattern Select how the container layout must respond on web pages.