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.