FlowWright's Dashboard offers a SQL data-driven card view control, a UI component that displays database records as individual "cards" rather than traditional spreadsheet-style rows.

Navigate to Manage > Dashboards. 

On the “Manage Dashboard” page, choose the “Actions > Create” option. 

A pop-up appears for configuration. Enter the “dashboard name and the position order number.” Select the checkbox to open the dashboard designer. Click the “Create” button to start. 

The dashboard designer creates the new definition. 

Search for “SQL card” and drag-and-drop the widget onto the canvas. Click the “Edit” icon to configure. 

A pop-up is rendered for configuration. 

Provide the title name. Select the database connection from the drop-down list. Enter the “SQL Select” query. Click the “Test Query” button to validate the syntax. A confirmation message appears in the top-right corner. For the Date filter column, provide a table column reference of “date” data type.  

The SQL card widget provides four templates: Deals, Employee Count, Open Tickets, and Statistics Card. The widget configurations are similar and involve mapping SQL SELECT columns to the template fields. 

Create a SQL Card using the “Deals” template.

Use the arrow keys to navigate between the choices. Select the card, then click the OK button to configure. 

Enter the image file path (on the application server) for the ‘Logo’. Provide the column references for the template fields as shown in the example below. 

Customise the colours from the drop-down list for “heading background and text, body background and text” regions. Select the checkbox to show the “header”. Click the “Save” button. 

The card widget configuration is saved, and a confirmation message appears in the top-right corner. 

Select UI > Preview option. 

The Dashboard Card appears as shown in the example below. 

Create a SQL Card using the “Statistics” template.

Search for “SQL card” and drag-and-drop the widget onto the canvas. Click the “Edit” icon to configure. Provide the title name. Select the database connection from the drop-down list. Enter the “SQL Select” query. Click the “Test Query” button to validate the syntax. A confirmation message appears in the top-right corner. For the Date filter column, provide a table column reference of “date” data type.  

The sample SQL SELECT query is included below for reference.

SELECT 
    -- 1. Logo Path (Static or from a settings table)
    '\images\wait.png' AS logo,

    -- 2. Percentage Calculation (e.g., Growth or specific metric)
    -- Using 100.0 to ensure decimal results
    ROUND(CAST((COUNT(CASE WHEN status = 'Completed' THEN 1 END) * 100.0) / NULLIF(COUNT(*), 0) as Float),2) AS percentage_label,

    -- 3. Total Orders [486]
    COUNT(*) AS total_count,
    'Total Orders' AS total_label,

    -- 4. Completed Label & Value [351]
    'Completed' AS sub_label,
    COUNT(CASE WHEN status = 'Completed' THEN 1 END) AS sub_count,

    -- 5. Progress Bar (usually a decimal between 0 and 1)
    ROUND(CAST(COUNT(CASE WHEN status = 'Completed' THEN 1 END) AS FLOAT) / NULLIF(COUNT(*), 0) * 100,2) AS progress_bar_value

FROM orders;

Use the arrow keys to navigate between the choices. Select the “Statistics” card, then click the OK button to configure. Enter the image file path (on the application server) for the ‘Logo’. Provide the column references for the template fields as shown in the example below. Customise the colours from the drop-down list for “heading background and text, body background and text” regions. Select the checkbox to show the “header”. Click the “Save” button. 

The card widget configuration is saved, and a confirmation message appears in the top-right corner. 

Select UI > Preview option. The Dashboard Card appears as shown in the example below.