DDX Bricks pass pfilters or some parameters

Vishal · September 26

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

ArborRose · September 26

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>";

});

ArborRose · September 26