Page Components

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

Page Design

You can add components of the following categories to a page:
Field Description
INPUTS Contains UI components that receive input from application users.
DISPLAY Contains UI components that display information in the application.
LAYOUTS Contains UI components that are used to design a page layout.
TOOLS Contains UI components that allow application users to upload an Excel worksheet to load data into an entity, upload a list of devices in a CSV format, or manage events.
INTEGRATION Contains system plug-ins/widgets.
CUSTOM Contains custom UI plug-in components that have been uploaded by an application developer.

Component Properties

To access the properties of a UI component, select the component (a container, graph, or a breadcrumb).
Note: Some of these fields are displayed based on the selected UI component. This list is not comprehensive.
Field Description
Settings > General
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.
Settings > Display
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.
Settings > Data
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.
Settings > Behavior
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.
Visual
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.
Responsive
Responsive Pattern Select how the container layout must respond on web pages.