DDX Bricks pass pfilters or some parameters
Best Answer
-
There are different ways you could implement filters on a brick. Passing values in the URL would be one way.
https://your-domo-instance.domo.com/page/12345?filtername=column_name&filtervalue=filter_value
You could also use environment values:
// Get existing filters from the environment (if any)
const pfilters = domo.env.pfilters || [];
// You can modify the pfilters array to set your filters programmatically.
pfilters.push({
column: 'column_name', // Column to apply the filter to
values: ['filter_value'], // The value(s) to filter by
type: 'IN', // Filter type, can be 'IN', 'NOT_IN', etc.
});
// Apply the updated filters to the dashboard or dataset
domo.setPfilters(pfilters);Or you can use DomoPhoenix to filter within the card:
<script>
// Example data input from the Domo dataset
const data = DomoPhoenix.getData();
// Define an event listener for when the filter is applied
document.getElementById('filter-button').addEventListener('click', function() {
// Get the filter values from input elements (e.g., text inputs, dropdowns)
const filterValue = document.getElementById('filter-input').value;
// Apply the filter using the Domo filter API
DomoPhoenix.setFilter({
column: 'column_name', // column you want to filter
values: [filterValue], // the filter value(s)
type: 'IN' // Filter type
});
});
</script>
<div>
<input type="text" id="filter-input" placeholder="Enter filter value" />
<button id="filter-button">Apply Filter</button>
</div>Example:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #4CABC5;
color: white;
font-weight: bold;
}
td:nth-child(3) {
border-left: 3px solid black;
border-right: 3px solid black;
background-color: #A3D4E1;
}html:
<div>
<h1>Filtered Dataset View</h1>
<label for="dateFilter">Select Date:</label>
<input type="date" id="dateFilter" />
<button id="filterButton">Filter</button>
</div>
<div id="result"></div>Javascript:
var domo = window.domo;
var datasets = window.datasets;
// Function to render the data table
function renderDataTable(data) {
var tableHTML = "<table><tr>";
// Extract headers
var headers = Object.keys(data[0]);
headers.forEach(function(header) {
tableHTML += "<th><b>" + header + "</b></th>";
});
tableHTML += "</tr>";
// Populate the table with data
data.forEach(function(row) {
tableHTML += "<tr>";
headers.forEach(function(header) {
tableHTML += "<td>" + row[header] + "</td>";
});
tableHTML += "</tr>";
});
tableHTML += "</table>";
// Link to HTML
document.getElementById("result").innerHTML = tableHTML;
}
// Fetch data from dataset0
domo.get(`data/v1/${datasets[0]}`).then(function(result) {
// Render full dataset initially
renderDataTable(result);
// Attach event listener to the filter button
document.getElementById("filterButton").addEventListener("click", function() {
var selectedDate = document.getElementById("dateFilter").value;
// Filter data by selected date
var filteredData = result.filter(function(row) {
return row.date_ymd === selectedDate; // Adjust according to your date format
});
// Render filtered data
if (filteredData.length > 0) {
renderDataTable(filteredData);
} else {
document.getElementById("result").innerHTML = "<p>No data available for the selected date.</p>";
}
});
}).catch(function(error) {
console.error("Error fetching dataset:", error);
document.getElementById("result").innerHTML = "<p>Error fetching data.</p>";
});** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0
Answers
-
There are different ways you could implement filters on a brick. Passing values in the URL would be one way.
https://your-domo-instance.domo.com/page/12345?filtername=column_name&filtervalue=filter_value
You could also use environment values:
// Get existing filters from the environment (if any)
const pfilters = domo.env.pfilters || [];
// You can modify the pfilters array to set your filters programmatically.
pfilters.push({
column: 'column_name', // Column to apply the filter to
values: ['filter_value'], // The value(s) to filter by
type: 'IN', // Filter type, can be 'IN', 'NOT_IN', etc.
});
// Apply the updated filters to the dashboard or dataset
domo.setPfilters(pfilters);Or you can use DomoPhoenix to filter within the card:
<script>
// Example data input from the Domo dataset
const data = DomoPhoenix.getData();
// Define an event listener for when the filter is applied
document.getElementById('filter-button').addEventListener('click', function() {
// Get the filter values from input elements (e.g., text inputs, dropdowns)
const filterValue = document.getElementById('filter-input').value;
// Apply the filter using the Domo filter API
DomoPhoenix.setFilter({
column: 'column_name', // column you want to filter
values: [filterValue], // the filter value(s)
type: 'IN' // Filter type
});
});
</script>
<div>
<input type="text" id="filter-input" placeholder="Enter filter value" />
<button id="filter-button">Apply Filter</button>
</div>Example:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #4CABC5;
color: white;
font-weight: bold;
}
td:nth-child(3) {
border-left: 3px solid black;
border-right: 3px solid black;
background-color: #A3D4E1;
}html:
<div>
<h1>Filtered Dataset View</h1>
<label for="dateFilter">Select Date:</label>
<input type="date" id="dateFilter" />
<button id="filterButton">Filter</button>
</div>
<div id="result"></div>Javascript:
var domo = window.domo;
var datasets = window.datasets;
// Function to render the data table
function renderDataTable(data) {
var tableHTML = "<table><tr>";
// Extract headers
var headers = Object.keys(data[0]);
headers.forEach(function(header) {
tableHTML += "<th><b>" + header + "</b></th>";
});
tableHTML += "</tr>";
// Populate the table with data
data.forEach(function(row) {
tableHTML += "<tr>";
headers.forEach(function(header) {
tableHTML += "<td>" + row[header] + "</td>";
});
tableHTML += "</tr>";
});
tableHTML += "</table>";
// Link to HTML
document.getElementById("result").innerHTML = tableHTML;
}
// Fetch data from dataset0
domo.get(`data/v1/${datasets[0]}`).then(function(result) {
// Render full dataset initially
renderDataTable(result);
// Attach event listener to the filter button
document.getElementById("filterButton").addEventListener("click", function() {
var selectedDate = document.getElementById("dateFilter").value;
// Filter data by selected date
var filteredData = result.filter(function(row) {
return row.date_ymd === selectedDate; // Adjust according to your date format
});
// Render filtered data
if (filteredData.length > 0) {
renderDataTable(filteredData);
} else {
document.getElementById("result").innerHTML = "<p>No data available for the selected date.</p>";
}
});
}).catch(function(error) {
console.error("Error fetching dataset:", error);
document.getElementById("result").innerHTML = "<p>Error fetching data.</p>";
});** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0
Categories
- All Categories
- 1.7K Product Ideas
- 1.7K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 295 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.8K Transform
- 97 SQL DataFlows
- 608 Datasets
- 2.1K Magic ETL
- 3.8K Visualize
- 2.5K Charting
- 712 Beast Mode
- 50 App Studio
- 39 Variables
- 668 Automate
- 170 Apps
- 446 APIs & Domo Developer
- 45 Workflows
- 7 DomoAI
- 34 Predict
- 14 Jupyter Workspaces
- 20 R & Python Tiles
- 391 Distribute
- 111 Domo Everywhere
- 274 Scheduled Reports
- 6 Software Integrations
- 116 Manage
- 113 Governance & Security
- Domo Community Gallery
- 31 Product Releases
- 9 Domo University
- 5.3K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 104 Community Announcements
- 4.8K Archive