Workflow 2

Goal: To build a basic Feedback Analysis Dashboard that allows users to select employees and submit feedback for them.

Core Flow: This workflow demonstrates a real-time data flow using the Data Pipeline: API Ingestion → DB Writer → WebSocket.

Key Features:

· Data Pipeline Integration: Uses the API Ingestion Component configured for Real-time invocation to ingest data. The WebSocket Producer Component writes data from the database back to the dashboard component.

· Dashboard Components: Uses a Combo Box to select employee names, a Text Box for feedback input, and a Data Grid Component to display existing feedback.

· Real-time Update: A script is placed in the Submit Button to capture context variables (name, feedback, skills, team) and send this payload to the API Ingestion pipeline URL, causing the Data Grid to refresh with the real-time feedback

Workflow 2 demonstrates how the API Ingestion and WebSocket components are used in a pipeline within the BDB Platform by building a Feedback Analysis Dashboard that allows users to select employees and submit feedback.

Creating a Dashboard using a pipeline Flow with API Ingestion and WebSocket components

Plugin 1: Data Pipeline Plugin

The data pipeline flow begins with an API Ingestion Component, API Ingestion is a component which ingests data from the pipeline to the Database. The flow of the thread is as follows:

API Ingestion → DB Writer → WebSocket

The API Ingestion Component is configured by choosing the invocation type as real time and from the meta information the ingestion type as API Ingestion. The data from the API Ingestion Component is then passed to an event followed by which the data gets written to a Database. The data from the DB is then written to an event and finally a web socket component. Web Socket Component helps in Writing the data from the DB back to the component in the dashboard.

Note: The pipeline must be activated and updated every time the user submits new feedback in the text box from the dashboard.

Create a New Pipeline

  • From the BDB Homepage, navigate to the Apps icon.

  • Open the Data Pipeline module.

  • Click Pipeline → Create New Pipeline.

  • Provide a name and select the required resource allocation.

  • Click Save.

Add API Ingestion Component

  • Click the “+” icon in the top-right corner. The Component and Event options will appear.

  • Select the Component tab to open the Component Palette.

  • In the search bar, type “API Ingestion.”

  • Drag and drop the API Ingestion component into the workspace.

  • Click on the component and set the Invocation Type to Real-time from the Ingestion Type dropdown.

  • Navigate to the Meta Info tab and select API Ingestion from the Ingestion Type dropdown.

  • Click the Save icon to save the configuration.

  • Click the Update Pipeline icon. Then click on the API Ingestion component — a Component Instance ID URL will be generated.

  • Go to the Events tab and click the “+” icon to add a new Kafka Event.

  • Configure the required parameters for the event creation.

  • Drag and drop the configured Kafka Event into the workspace.

Add DB Writer Component

· In the search bar, search for DB Writer and drag it into the workspace.

· Configure the component in the Basic Information tab:

  • Invocation Type: Batch

· Move to the Meta Info tab and configure all mandatory fields:

  • Host

  • Port

  • Username

  • Password

  • Database Name

  • Table

  • Driver: ClickHouse

  • Save Mode: Append

· Validate the configuration.

· If validation is successful, click Save.

· Drag and drop another Kafka Event into the workspace.

Add WebSocket Producer Component

  • Search for WebSocket Producer.

  • Drag and drop it into the workspace.

  • Configure the settings:

  • Invocation Type: Real-time

  • Meta Information: GUID will be generated automatically.

  • Save the component.

  • Once saved:

  • The URL for the API Ingestion component is generated.

  • The GUID for the WebSocket Producer component is automatically.

Plugin 2- Data Center Plugin

The Data Center Plugin is used to create connectors and establish connections to data sources. In Workflow 2, the data source is a ClickHouse database. To configure the connector, provide the following details: Data Connector Name, Username, Password, IP/Host, Port, and Database Name, and then save the configuration.

Note: The credential details for the data connectors can be obtained by contacting the DevOps Team of BDB

Data Connector & Dataset Creation for Dashboard

  • From the BDB Homepage, click the Apps icon.

  • Select the Data Center module.

  • Click Create Connector → choose ClickHouse.

  • Enter the required details: Connector Name, Username, Password, IP/Host, TCP Port, and Database Name.

  • After entering the credentials, click Save.

Create First Dataset (Employee Names)

· Using the newly created connector, click Create Dataset.

· Provide a Dataset Name and proceed with dataset configuration.

Dataset 1: Filter Employee Query:

SELECT DISTINCT name FROM Hiring_data_W4;

Optional version with "All" option:

SELECT 'All' AS name

UNION ALL

SELECT DISTINCT name FROM Hiring_data_W4;

  • Write an SQL query to fetch employee names.

  • Validate the query to ensure accuracy.

  • Click on Save.

  • From the dataset options menu (three dots), click Publish.

Create Second Dataset (Data Grid Details)

  • Create another dataset and name it Data Grid Details.

· Dataset 2: Datagrid Details Query:

SELECT gender, team, skills, name, Feedback, monthly_salary

FROM Hiring_data_W4

WHERE name = @name@;

Optional version with "All" condition:

SELECT gender, team, name, Feedback, monthly_salary

FROM Hiring_data_W4

WHERE name = @name@ OR 'All' = @name@;

  • Enter the SQL query to fetch required grid-level details.

  • Validate the query and ensure it executes successfully.

  • Click on Save.

· From the dataset options three dots, click Publish.

Plugin 3- Dashboard Designer Plugin

The Dashboard Designer Plugin is used to visualize the data using a dashboard. The Feedback Analysis Dashboard is created.

The Components like Labels, Textboxes, Filters, Data grid components are dragged and dropped into the dashboard editor. The data connectors are then created in the dashboard and configured with the Datasets created in the Data center plugin.

A Data Connector is created for a Web Socket component and the GUID, Ingestion ID and Ingestion Secret has to be configured from the Web Socket Component that is used in the Data Pipeline Plugin.

The URL Configured in the video is as follows:

Create a New Dashboard

  • Open the Apps icon and go to Dashboard Designer.

  • Click New → Dashboard to open a new workspace.

  • Save the dashboard by giving it an appropriate name.

Add and Configure Label Component

  • From the Components Library, drag and drop the Label component into the workspace.

  • Adjust the size and shape of the component.

  • Under the General tab, update the text.

  • Apply desired styling (font, color, alignment) from the Style tab.

  • Save the dashboard after applying changes.

Add Combo Box Component

  • In the search bar, type Combo Box.

  • Drag and drop the component into the workspace.

  • Adjust its size and shape as needed.

Add Labels for Form Dashboard Structure

  • Search for the Label component again and drag it into the workspace.

  • Create duplicates for multiple labels:

  • Employee Name

  • Feedback

  • Submit Button

  • From the Properties panel:

  • Rename each label appropriately.

  • Change alignment and background color for better visual appeal.

Add Export Component

  • Search for Export in the component library.

  • Drag and drop it into the workspace.

  • Adjust the size as required.

Customize the Submit Button

  • Select the Submit Label.

  • In Properties:

  • Update the name.

  • align the text at Center

  • Apply a distinct background color.

Add Text Box Component

  • Search for Text Box in the component library.

  • Drag and drop it into the workspace.

  • Adjust the size and position appropriately.

Add Mandatory Feedback Reminder

  • Drag another Label into the workspace.

  • Update its text to indicate that feedback is mandatory.

  • Apply styling to make it visually clear e.g., red font or bold text.

Add Data Grid Component

  • From the Components Library, select Data Grid and add it to the workspace.

  • Adjust the size as required.

Preview and Save the Dashboard

  • Click Preview to review the Dashboard design.

  • Make any final adjustments.

  • Save the dashboard.

Add Data Connection

· From the right-hand panel, select the Data Connection tab

  • Click Add Data Service and give it an appropriate name.

  • Select the previously created data connector.

  • Add the relevant datasets.

  • Save the dashboard and return to the workspace.

Mapping the Data to Components

  • Map the dataset to the Combo Box filter.

  • map the dataset to the Data Grid table.

  • Drag and drop then arrange the fields in the Data Grid to match your layout.

  • Use Preview to ensure data is displayed as expected.

Enable Filtering in the data grid data service

  • Select the Data Connector.

The Script to be added in the filter component is as follows: :

sdk.setContext('name', changedItem.attributes.Value);

sdk.reload(['C_2']);

Data grid connection script:

var selected = changedItem;

// Access the actual data row

var rowData = selected.attributes.data[0]; // use [0] or the correct index

console.log("Row Data:", rowData);

// Set context using correct keys from rowData

sdk.setContext('gender', rowData.gender);

sdk.setContext('monthly_salary', rowData.monthly_salary);

sdk.setContext('skills', rowData.skills);

sdk.setContext('team', rowData.team);

}

  • Add a condition that links the Combo Box filter with the data_grid_details.

  • This ensures the Data Grid updates dynamically based on the selected employee name.

Add Script in the Submit Button

· Open the Submit Button properties.

· Add a script that performs the following:

debugger;

// Get values

var name = sdk.getContext('filter2'); // Dropdown value

var text = sdk.getWidget('text7').m_textBoxText; // Text input

// Get context info

var gender = sdk.getContext('gender');

var monthly_salary = sdk.getContext('monthly_salary');

var skills = sdk.getContext('skills');

var team = sdk.getContext('team');

console.log("Name:", name);

console.log("Feedback:", text);

console.log("Gender:", gender);

console.log("Monthly Salary:", monthly_salary);

console.log("Skills:", skills);

console.log("Team:", team);

if (name && text && text.trim() !== "") {

var payload = {

name: name,

Feedback: text,

gender: gender || '',

monthly_salary: monthly_salary || '',

skills: skills || '',

team: team || ''

};

var settings = {

url: "https://v10.bdb.ai/ingestion/dataIngestion",

method: "POST",

timeout: 0,

headers: {

ingestionId: "be4ad4fd-fcbf-4bc8-9038-2aaa2b0cb2cc",

ingestionSecret: "fRWvqUHSVFaBcSx2SWe09WcU5lawQOgzqsE0aGEnoOCbibCdD6ea1Q013khFQssA",

"Content-Type": "application/json"

},

data: JSON.stringify(payload)

};

$.ajax(settings).done(function(response) {

console.log("✅ Data sent successfully:", response);

alert("✅ Feedback submitted for: " + name);

setTimeout(function() {

sdk.reload(['datagrid9']);

}, 2000);

}).fail(function(jqXHR, textStatus, errorThrown) {

console.error("❌ Failed to send data");

console.error("Status:", textStatus);

console.error("Error:", errorThrown);

console.error("Response Text:", jqXHR.responseText);

alert("❌ Failed to send data. Check console for details.");

});

} else {

alert("⚠️ Please enter feedback before submitting.");

· Captures the selected name from the Combo Box.

· Captures the feedback text from the Text Box.

· Sends the data to the API Ingestion pipeline in real-time

Preview the Dashboard

  • Click on Preview icon.

  • Select an employee name from the Combo Box.

  • Enter feedback in the Text Box.

  • Click on Submit button.

  • A confirmation popup appears.

  • The API Ingestion pipeline is triggered automatically.

  • Open the Event Preview in the data pipeline to verify the submission.

  • The Data Grid refreshes and displays the newly submitted feedback.

Great! The API ingestion was successfully completed, and the data grid has updated with real-time feedback.This concludes Workflow 2 in the Designer, which demonstrates API Ingestion.

PreviousWorkflow 1NextWorkflow 3

Last updated