We will allow the user to expand the orders KPI to a detailed priority list made in the last quarter.

Create a side panel to display the orders

1- Click the plus icon to add a new page for our side panel.
2- Click on hide from navigation since this is a side panel view only.

Switch to side panel view

While designing your app, you can switch between layouts. The side panel view can also used to improve a mobile layout.

Add a flex list component to list the orders

The Flex List is a versatile component that, in this case, will allow us to list the orders and add a function to notify the forwarder if needed.

Connect the flex list to the data source

1. Click on the component to open the configuration panel
2. Choose the data source as WatsonX - Presto
3. Click on the query to configure the SQL request as follows:

SELECT o.orderkey,
    o.orderdate,
    o.shippriority,
    SUM(l.extendedprice * (1 - l.discount)) AS revenue
FROM "tpch"."tiny"."orders" o
    JOIN "tpch"."tiny"."lineitem" l ON o.orderkey = l.orderkey
WHERE o.orderdate >= DATE '1993-01-01'
    AND o.orderdate < DATE '2024-01-01'
    AND l.shipdate > DATE '1993-01-01'
    AND orderpriority = '{{ app.priority }}'
GROUP BY o.orderkey,
    o.orderdate,
    o.shippriority
ORDER BY revenue DESC,
    o.shippriority DESC
LIMIT 100

📘

JavaScript Templating

A powerful technique that brings dynamic content to life in web applications. It involves defining templates with placeholders and then dynamically filled with actual data at runtime. This approach is crucial in modern web development, enabling developers to create interactive and responsive user interfaces easily.

Configure the flex list

• Icon truck-flatbed
• Title Order {{ item.orderkey }}
• Date {{ moment(item.orderdate).format('MMM D, h:mm A') }}
• Revenue {{ numbro(item.revenue).formatCurrency() }}

Add a trigger to the flex list from the KPI

Now, we will add an action for the orders KPI to trigger the side panel. Let's go back to the KPI page to configure the action.

Make sure to add a context variable called priority with 1-URGENT value.