Linking Widgets

Widget linking allows you to create interactive dashboards where selections in one widget dynamically affect other widgets. This enables user-driven interactions where selectable widgets can filter data displayed in tables, charts, and other display widgets based on user selections.

Selectable Widgets

The following widgets support selection and can be used to drive interactivity:

• Search - Text-based search with dropdown selection
• Select - Dropdown menu for option selection
• Toggle - Switch-style option selection
• Table - Can function as selectable when rows are clickable

The selected Property

All selectable widgets expose a selected property that provides access to the data of the currently selected item. This property can be used to reference the selected data in other widgets, creating dynamic relationships between components.

Examples

Toggle + Table

In this example, we create a toggle widget to select a region, and a table that updates based on the selected region:

import pandas as pd
from engineai.sdk.dashboard.data.connectors import Snowflake
from engineai.sdk.dashboard.widgets import table
from engineai.sdk.dashboard.widgets import toggle

# Create a toggle for region selection
region_toggle = toggle.Toggle(
    id_column="id",
    label_column="label",
    data=pd.DataFrame({
        "id": [1, 2, 3],
        "label": ["North", "South", "West"]
    }),
    label="Select Region",
)

# Table that updates based on toggle selection
product_table = table.Table(
    data=Snowflake(
        slug="sales-data",
        query=f"""
            SELECT category, sales
            FROM products
            WHERE region_id = {region_toggle.selected.id}
        """,
    ),
    title=f"Product Sales in {region_toggle.selected.label}",
    columns=["category", "sales"]
)

Table + Table

In this example, we create a master table for customer selection, and a detail table that shows orders for the selected customer:

import pandas as pd
from engineai.sdk.dashboard.data.connectors import Snowflake
from engineai.sdk.dashboard.widgets import table

# Master table for customer selection
customer_table = table.Table(
    data=Snowflake(
        slug="customers",
        query="""
            SELECT customer_id, customer_name, region, total_orders
            FROM customers
            ORDER BY total_orders DESC
        """,
    ),
    title="Select Customer",
    columns=["customer_id", "customer_name", "region", "total_orders"],
)

# Detail table showing orders for selected customer
orders_table = table.Table(
    data=Snowflake(
        slug="orders",
        query=f"""
            SELECT order_id, order_date, product_name, quantity, amount
            FROM orders
            WHERE customer_id = {customer_table.selected.customer_id}
            ORDER BY order_date DESC
        """,
    ),
    title=f"Orders for {customer_table.selected.customer_name}",
    columns=["order_id", "order_date", "product_name", "quantity", "amount"]
)

Nested Table Example

In this example, we create a table that displays user information and allows selection of a user to view their associated products in a nested table:

import pandas as pd
from engineai.sdk.dashboard.widgets import table

# Create a DataFrame
data = pd.DataFrame({
    "name": ["Person A", "Person B", "Person C"],
    "age": [29, 35, 30],
    "products": [
        [{"name": "Product 1", "price": 10}, {"name": "Product 2", "price": 20}],
        [{"name": "Product 2", "price": 15}],
        [{"name": "Product 1", "price": 25}, {"name": "Product 3", "price": 30}]
    ]
})

# Create a Table widget with the DataFrame
user_widget = table.Table(
    data=data,
    columns=["name", "age"],
)

# Create a products table
products_widget = table.Table(
    data=user_widget.selected.products,
    columns=["name", "price"],
    title=f"Products for {user_widget.selected.name}",
)

Dynamic Text

When a string parameter supports the type TemplatedString, it can be used to create dynamic text that updates automatically based on user interactions or data changes. This powerful feature enables you to build responsive dashboards where text content adapts in real-time to user selections and widget states.

Example

The following example demonstrates how dynamic text creates a responsive dashboard where the table title updates based on toggle selection.

The table's title parameter uses a templated string that references the region_toggle selected label, so when a user selects "North" in the toggle, the title becomes "Product Sales in North", and the title automatically updates whenever the toggle selection changes.

import pandas as pd
from engineai.sdk.dashboard.data.connectors import Snowflake
from engineai.sdk.dashboard.widgets import table
from engineai.sdk.dashboard.widgets import toggle

# Create a toggle for region selection
region_toggle = toggle.Toggle(
    id_column="id",
    label_column="label",
    data=pd.DataFrame({
        "id": [1, 2, 3],
        "label": ["North", "South", "West"]
    }),
    label="Select Region",
)

# Table that updates based on toggle selection
product_table = table.Table(
    data=Snowflake(
        slug="sales-data",
        query=f"""
            SELECT category, sales
            FROM products
            WHERE region_id = {region_toggle.selected.id}
        """,
    ),
    title=f"Product Sales in {region_toggle.selected.label}", # Dynamic text
    columns=["category", "sales"]
)