Hello @mahesh_s ,
As per your request, I’ve created a step-by-step flow to help you solve your issue with filtering data based on a dropdown selection.
Step 1: Create the Dropdown Options
First, create a JavaScript snippet for your dropdown that provides country options, including an option to select all countries:
return [
{ label: "All", value: "All" },
{ label: "USA", value: "USA" },
{ label: "India", value: "India" },
{ label: "Germany", value: "Germany" }
];
This dropdown will allow users to select a specific country or view data for all countries.
Step 2: Prepare Sample Data
Here is a sample dataset representing users by country and device type:
return [
{ country: "USA", device_type: "Mobile", total_users: 4500 },
{ country: "USA", device_type: "PC", total_users: 3000 },
{ country: "USA", device_type: "Console", total_users: 2500 },
{ country: "India", device_type: "Mobile", total_users: 8000 },
{ country: "India", device_type: "PC", total_users: 2000 },
{ country: "India", device_type: "Console", total_users: 1000 },
{ country: "Germany", device_type: "Mobile", total_users: 3500 },
{ country: "Germany", device_type: "PC", total_users: 2700 },
{ country: "Germany", device_type: "Console", total_users: 2200 }
];
Step 3: Filtering Data Using a Transformer
To filter the data dynamically based on the selected country in the dropdown, use the following transformer code:
const data = {{query1.data}}; // The original data from your query
const selectedCountry = {{select1.value}}; // The currently selected dropdown value
// If no country is selected or "All" is chosen, return all data
if (!selectedCountry || selectedCountry === "All") {
return data;
}
// Otherwise, filter the data for the selected country only
return data.filter(row => row.country === selectedCountry);
This transformer will automatically update your displayed data based on the country selected by the user.
Summary
- The dropdown provides a user-friendly way to select a country filter.
- The dataset contains multiple countries and device types.
- The transformer filters the dataset based on the dropdown value, showing all data if "All" is selected.
I will also share a screen recording and screenshots to demonstrate the entire flow visually for better understanding.
If you want, I can help you add more features like multi-select filtering, sorting, or advanced grouping. Just let me know!