Create a Candidate Dashboard Using the Designer Plugin

Purpose

This guide explains how to design and build a Candidate Dashboard using the BDB Dashboard Designer Plugin. It demonstrates how to connect a flat Excel file directly within the Designer, create multiple interactive charts, and dynamically filter them using a shared Team filter.

Business Context

The Candidate Dashboard provides HR teams with an integrated view of recruitment metrics, allowing them to visualize candidate performance, team-wise salary comparisons, and other hiring insights in real-time. By using a single data source and interactive filtering, users can seamlessly explore data across multiple visual components — helping them make faster, data-driven hiring decisions.

Key Highlights

Category
Description

Goal

Build an interactive Candidate Dashboard connected to a flat Excel file directly within the Designer.

Data Source

Excel sheet uploaded directly through the Dashboard Designer connection settings.

Primary Filter

Combo Box for filtering data by “Team”.

Visualization Components

Mixed Chart, Data Grid, Tree Map (Parent hierarchy), Area Chart.

Dynamic Behavior

Linked filtering across all charts based on the selected Team.

Visual Enhancements

Use of Box, Label, and SVG Graphics (Refresh Logo).

Workflow Overview

The Candidate Dashboard Workflow (Workflow 3) includes the following stages:

  1. Design Setup – Configure layout, titles, and visuals using Box and Label components.

  2. Visualization Creation – Add charts and organize dashboard structure.

  3. Data Source Configuration – Upload a flat Excel file directly in the Dashboard Designer.

  4. Dataset Mapping – Link each visualization to the same dataset.

  5. Filter Logic – Apply filter conditions to dynamically control all charts.

  6. JavaScript Integration – Add interactivity and aggregation logic.

  7. Testing and Publication – Preview and publish the final dashboard.

Step 1 – Open Dashboard Designer

  1. From the BDB Platform homepage, click the Apps Menu → Designer.

  2. Click New → Dashboard.

  3. Provide a dashboard name — e.g., Candidate Dashboard.

  4. Click Save to create your dashboard workspace.

Step 2 – Add a Box and Label for the Dashboard Header

2.1 Add Box Component

  1. From the Components Library, search for Box.

  2. Drag and drop the Box onto the workspace.

  3. Adjust its size to create a header band.

  4. To change the color:

    • Go to Properties → Style → Gradient.

    • Choose the desired gradient color.

  5. Click Save.

2.2 Add Label Component for Title

  1. From the Components Library, add a Label component inside the Box.

  2. In Properties → General, update the Title to Candidate Dashboard.

  3. Adjust:

    • Font Size → 24 pt

    • Font Style → Bold

    • Alignment → Center

  4. Save the dashboard.

Step 3 – Add Label and Combo Box for Team Filter

  1. Add another Label inside the header Box.

  2. Rename it as Team.

  3. Adjust its size and font styling.

  4. From the Components Library, search for Combo Box and drag it below the Team label.

  5. Adjust width and alignment.

  6. Optionally, change the background color for visual clarity.

  7. Save the dashboard.

Step 4 – Add Export and Image Components

4.1 Export Component

  1. Search for Export in the Components Library.

  2. Drag it to the top-right area of the dashboard.

  3. Resize and update background color to match the dashboard theme.

4.2 Image Component

  1. Add an Image component beside the Export button.

  2. Go to Properties → General → Browse Image.

  3. Upload the required image (e.g., your organization’s logo).

  4. Save the dashboard.

Step 5 – Create Visualization Boxes and Charts

5.1 Add Visualization Containers

  1. Drag another Box from the Components Library onto the canvas.

  2. Resize and position it appropriately.

  3. Duplicate this Box three times to create four visualization areas.

  4. To increase dashboard height:

    • Click on the dashboard canvas → Properties → Size.

    • Adjust height as required.

5.2 Add Chart Components

Chart
Description
Placement

Mixed Chart

Compare offered vs. previous CTC

Box 1

Data Grid

Display detailed candidate records

Box 2

Tree Map

Show distribution by skills (Parent Hierarchy)

Box 3

Area Chart

Visualize team-wise trend data

Box 4

5.3 Add Graphics Component

  1. Search for Graphics in the Components Library.

  2. Drag it into the layout for decorative or functional use.

  3. To add a refresh icon:

    • Go to Properties → General → SVG Option.

    • Click the top-left of the pop-up, and copy the icon name.

    • Prefix the name with BD (e.g., BDrefresh).

    • Set Category as None.

  4. Save the dashboard.

Step 6 – Create Data Connections

6.1 Upload Excel Data

  1. Click the Datasets (Plug Icon) on the toolbar.

  2. Click + (Add) next to Excel.

  3. Upload the Excel file from your local system.

  4. Provide a Connection Name (e.g., Candidate_Data_Excel).

  5. Save the connection.

  6. Repeat the same Excel connection for each chart (use the same data source).

Note: Using a single dataset ensures consistent data and filtering across all charts.

Step 7 – Map Datasets to Visualization Components

Component
Connection
Configuration

Mixed Chart

Connection-1

Category: Team Values: offered_CTC, previous_CTC

Data Grid

Connection-2

Map all relevant columns (e.g., Name, Skills, Team, Salary)

Tree Map

Connection-3

Source Hierarchy Type: Parent

Area Chart

Connection-4

Map relevant data fields such as Team, Skills, CTC

After mapping each dataset, click Save Dashboard.

Step 8 – Apply Filter Conditions

8.1 Link Filter Box with Chart Data

  1. Navigate to Data Connectors → Conditions.

  2. Add a condition for the Team field.

  3. Repeat the same condition for each connection (Mixed Chart, Data Grid, Tree Map, Area Chart).

This ensures that when a user selects a team from the Combo Box, all charts update dynamically to reflect that team’s data.

Step 9 – Configure Filter Connection for Combo Box

  1. Create a new data connection using the same Excel file.

  2. In the Combo Box (Team Filter) component:

    • Go to Properties → General.

    • Select the newly created connection as the dataset.

    • Map the Team column as the display value.

  3. Save the configuration.

The Combo Box will now display all unique Team values for filtering.

Step 10 – Add JavaScript for Chart Interactions

The following scripts control chart interactions, filtering, and refresh behavior. These are added in the Dashboard Script section.

Tree Map Filter Script

sdk.applyDataSetFilter("treemap13", ["order by [skills] asc", "limit 10"]);
sdk.reload(["C_1"]);

Sorts and limits Tree Map data by skills.

Mixed Chart Filter Script

var a = changedItem.attributes.offered_ctc;
var b = "offered_ctc=='" + a + "'";
sdk.applyDataSetFilter('datagrid16', [b]);
sdk.reload(["C_2"]);

Filters Data Grid data dynamically based on Mixed Chart selection.

Area Chart Aggregation Script

sdk.applyAggregation("area16", "skills", "offered_ctc", "AVG");

Applies average aggregation by skills for the Area Chart.

Refresh Component Script

sdk.removeDataSetFilter("datagrid16");
sdk.reloadDataset(["mix7"]);
sdk.reloadDataset(["datagrid16"]);

Resets filters and reloads all datasets for a full dashboard refresh.

Step 11 – Test and Preview

  1. Click Preview in the top-right toolbar.

  2. Select a Team from the Combo Box filter.

  3. Verify that:

    • All four visualizations update simultaneously.

    • Mixed Chart, Data Grid, Tree Map, and Area Chart show corresponding filtered data.

  4. Click the Refresh Logo to reload the data.

  5. Use the Export button to download the dashboard view or data.

Step 12 – Publish the Dashboard

  1. Once validation is complete, click Save → Publish.

  2. The dashboard becomes available under the Home Plugin for user access.

Published dashboards can be embedded into the Business Story module or shared with specific roles.

Outcome

✅ Interactive Candidate Dashboard successfully created. ✅ All charts dynamically linked to the Team Combo Box filter. ✅ SVG Refresh component enables on-demand reload. ✅ Excel data integrated directly within Designer — no external data dependency. ✅ Dashboard ready for publishing and enterprise use.

Best Practices

  • Keep Excel field names consistent (avoid spaces/special characters).

  • Apply consistent color schemes for cohesive UI.

  • Use identical connection names across all chart datasets.

  • Test filter responsiveness before publishing.

  • Enable “Auto Refresh” if real-time sync is required for updated files.

Business Value

The Candidate Dashboard empowers HR and business teams to:

  • Analyze team-wise hiring performance and compensation trends.

  • Monitor candidate data without relying on external BI tools.

  • Filter and visualize data dynamically in seconds.

  • Use visual storytelling for strategic workforce insights.

PreviousBuild a Real-Time Feedback Analysis Dashboard Using API Ingestion and WebSocketNextCreate a Restaurant Analysis Dashboard Using the Designer