DDX Bricks pass pfilters or some parameters

we want to create DOMO Dashboard with DDX Bricks but we want to pass pfilters or some parameters to that dashboard so that dashboard will load data for based on those parameters.

So how to achieve this

Best Answer

  • ArborRose
    ArborRose Coach
    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! **

Answers

  • ArborRose
    ArborRose Coach
    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! **