Display data in widgets

Edit online

If you are connected to a data source and cleaned the data by using transformations, if needed. You can visualize the data by using widgets such as tables, charts, KPIs, or lists. To do that, you must map your data, which involves configuring the widget to specify which part of the data it should display.

Instructions

You can map your data with Concert Data Apps either through clicking or by using expressions.

Use the following steps to map your data by clicking the variable:
  1. Click any widget on your page.
  2. The system automatically shows the data structure from your query.
  3. Click the variable that you want to assign to each field such as value, label, tooltip.
For more flexibility or formatting, you can write manual expressions to control how data is displayed.
  • {{ item.price }} – Use for items in a list or table.
  • {{ result.total }} – Use for single values (example, a total count in a KPI).
  • {{ self.value }} – Reference the current field value in display settings.
Note: Make sure that you have applied all the required transformations to your data before mapping the data. Apply transformations such as extracting nested fields by using Path, flattening arrays with Distribute, cleaning dates or custom logic with Convert Date or Custom Function.

Use case: Setting up the Flex-List Component

Refer to the following steps for setting up the Flex-List Component.

  1. Drag the Flex List component into the canvas.
  2. Connect the component to the data source:
    1. Add the data source to the flex list component and configure the API call.
    2. Click the flex list component to access the config panel.
    3. Select the data source.
    4. Click Add Query to configure the GET request.
    5. In the query panel, add the URI /PRODUCTS to feed the component.
    6. Close the panel by clicking the upper-right side.
    7. Next, add a Path data transformation.
  3. Map the component fields to the data structure.
  4. Delete all fields under the content section.
  5. Add the following fields.
    1. On the remaining field, select sku and set the value to sku.
    2. Field Icon, and set the value book-half.
    3. Field Title, set the value title and width 0.
    4. Field Footer Field, and choose the value description, and width 100.
    5. Field Field and add value Price: ${{ item.price }} and width 20.
    6. Field Field and add value Discount: {{ item.discountPercentage }}% and width 20
    7. Field Field and add value Rating: {{ item.rating }} and width 20.
    8. Field Field and choose the value brand and width 20.
    9. Field Field and choose the value category and width 20.

Use case: Adding a KPI to show goals

Refer to the following steps to add a KPI summary component.

  1. Drag the KPI summary component into the canvas.
  2. Set up the summary component by following these steps:
    1. Add a title and icon.
    2. Select REST API as the data source.
    3. Configure the GET request query, /products/category/smartphones.
    4. Select the value as the total.
    5. On display value, add {{self.value}}.
    6. Complete the style configuration.

Next step

Enhance interactivity in your Concert Data Apps, refer to Add logic and actions.