Components

Edit online

The Components feature in a Concert Data Apps helps to navigate and access different components or features to create an application. By mastering these shared options, you can create flexible, interactive, and data-driven interfaces that scale efficiently across your project.

Widget Shared Functionalities

Widgets in the platform are highly configurable components that support a range of shared functionalities, enabling rich interactivity, dynamic data handling, and seamless user experience. These shared settings include data sources, transformations, actions, appearance, and value management that are available across most widget types.

The following section provides an overview of the universal controls that allows:

Bind widgets to live or static data.
Transform and manipulate datasets.
Trigger actions like navigation, refresh, or file operations.
Customize appearance and visibility for responsive layouts.
Capture and reuse user input for filters, queries, and logic.

General

The General section defines the basic identity and structure of the widget with name details of the component and title to display on the form.

Table 1. General configuration fields
Field	Description
Name	The internal name for the component.
Title	Title displayed at the top of the form.
Subtitle	Optional text is shown follows with the title.
Icon	Optional icon displayed beside the title.

Data

Data controls the source and method by which the widget receives the data such as Data source, Query, Static Data, and so on.

Table 2. Data configuration fields
Field	Description
Data Source	Choose the source of the data: either a connected backend or None.
Query	Custom logic (SQL, GraphQL, REST, and so on) that fetches the data.
Static Data	Paste static JSON directly if you do not need dynamic data.
Enable Polling	Allows the widget to automatically refresh at intervals.
Polling interval in seconds	The time in seconds for the polling interval of the data.

Transformations

Transformations option is used to modify or format a raw data before that is displayed.

Table 3. Transformations configuration fields
Field	Description
Path	Extracts a nested value from the returned data by using a dot path.
Distribute	Split array or object data into individual rows.
Convert Date	Transforms raw date strings or timestamps to a defined format.
Custom Function	You can apply custom JavaScript logic to modify the returned data.

Actions

Actions add interactivity by triggering logic from the widget such as download, open, upload, etc,.

Table 4. Actions configuration fields
Field	Description
Download file	Triggers a file download.
Execute operation	Runs a defined backend operation or mutation.
Execute prompt	Runs a predefined prompt.
Navigate to page	Switch to another page.
Navigate to an external source	Opens an external URL.
Open the page in a side panel	Loads another page in a sidebar.
Refresh widget	Reload the current widget’s data or content.
Set context value	Assigns a value to a context variable (global state).
Set widget value	Dynamically updates the value of another widget.
Upload file	Used to upload a file.

Appearance

Controls when and how the widget is shown in the layout such as full view or side panel view.

Table 5. Appearance configuration fields
Setting	Description
Show in full view	Toggles whether the widget appears when the dashboard is viewed on full page view.
Show in side panel	Toggles visibility for side panel view.

Using widget values

Some widgets such as check boxes, date pickers, toggles, forms, free text, select and toggle to input values, filter data, or interact with dashboards in real time. They are essential for creating interactive experiences and manage their visual experience. Each widget captures a value that can be used in other widgets, queries, or logic blocks. Use the following steps to add widget value inside a query or expression.

Click the widget that you want to reference.
Copy the widget unique ID.
Use the ID in your logic.
```
{{widget['your-widget-id'].value}}
```

Use the following to access Date Picker Range widgets.

{{widget['your-widget-id'].startDate}}

{{widget['your-widget-id'].endDate}}

Use the following to access the Array values.
```
[[widget['your-widget-id'].value]]
```

Data Entry

Data Entry widgets are interactive components to input or select values within a dashboard. They are essential for filtering datasets, submitting forms, or dynamically controlling the behavior of other widgets.

Tabular data

Tabular Data widgets are used to display collections of records in customizable layouts such as tables, lists, or feeds. These components are perfect for rendering structured data, such as user lists, transactions, logs, or product catalogs.

KPI

KPI widgets are used to visually represent key performance indicators, metrics, or status values in a clear and impactful way. They help surface insights briefly by summarizing critical numbers or progress directly within your dashboard.

Visualizations

The Visualizations category provides a rich collection of charting widgets that help you communicate insights visually through interactive data representations. These widgets support various use cases from trends and comparisons to groups, priorities, distributions, and relationships.

Others

The Others category includes utility and presentation widgets that enhance the visual structure, communication, and interactivity of a dashboard. The three view can be used to show hierarchy relations.