Single Filter for Multiple Reports - "Dashboard" view

API & Customization
1

I have a "Dashboard" created with about a dozen pivot tables, however, I am required to manually update the filters for each one individually. This is obviously quite time consuming and frustrating, especially when referring to setting the Date range.

I would like the ability set the date range once and automatically populate each report's filters accordingly. I understand that since the reports may be accessing different data sources that this will likely require a code that will need to be manually updated with the applicable field name for each table.

I'm willing to pay for working code.

1 Like
2

Thanks for the tip, Justin.

I would like to add a dashboard with this type of functionality as well. Knowing that knack doesn't support it natively, this seems like a possibility in the meantime. What we've been doing as a work-around is connecting Power BI via API. Power BI's dashboarding capabilities are robust.

3

The easiest way to do this is to analyze what the url looks like with the filters applied and then reverse engineer it. you can build then build a dynamic url in knack where you enter your date inputs and it spits out a variable url that applies to all of the pivot reports. This is a super helpful tool for analyzing the url. https://meyerweb.com/eric/tools/dencoder/

4

Here is how I did it. I need various views to be filtered on the “Project”.

  1. Created a “welcome” page where user selects their Project from a dropdown and it gets saved as a local storage variable.
// SET GLOBAL PROJECT FILTER FOR THIS USER
$(document).on('knack-scene-render.scene_1', function(event, scene) {
    $(document).on('knack-form-submit.view_309', function(event, view, record) {    
       // get record ID of connected Project
        var FilterArray = record["field_207_raw"]; 
        var MyProjectFilter = FilterArray[0].id;
        var MyFilterPLP = FilterArray[0].identifier;                                    // ProjectLayoutPhase field
        var MyProjectNAMEFilter = MyFilterPLP.substring(0, MyFilterPLP.indexOf("-"));   // extract name

        // set local variable so other functions can use it
        localStorage.setItem("DIRTfilter", MyProjectFilter);
        localStorage.setItem("ProjNameFilter", MyProjectNAMEFilter);
        localStorage.setItem("DIRTfilterPLP", MyFilterPLP);
        return false;    // don't save the record, there is no point
    });
});
  1. On each view, I can’t just have it run the URL filter automatically or it gets into an infinite loop.
    So I set the initial filters to Project Is Null (so that it loads quickly with no data) and then added a “Add My Project Filter” button which does something like the code below. I had to do it for every view and modify the URL for each one, but it got easier to copy/paste after doing a few.
// APPLY PROJECT FILTER: Scheduling Page ************************************************************************
$(document).on('knack-view-render.view_829', function(event, view, record) {
    $("#view_829 .kn-button").on("click", function() {     
        MyProjectNAMEFilter = localStorage.getItem("ProjNameFilter");
        NewFilteredURL = "https://myapp.knack.com/dirt#my-page-url/?" + 
        "view_300_filters=%7B%22match%22%3A%22and%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22field_403%22%2C%22operator%22%3A%22contains%22%2C%22value%22%3A%22" +          
        MyProjectNAMEFilter + "%22%2C%22field_name%22%3A%22Project%20Name%22%7D%5D%7D" +
        "&view_300_page=1&view_300_per_page=1000";
        window.location.href = NewFilteredURL;
        return false;     // don't go where button was originally going to go
    });
});
5

Just adding this in case someone else needs the same thing - use the Knack Toolkit Library (KTL) by Cortexrd - this is baked in and works perfectly without coding.

1 Like