New Topic
CommunityTopicQuestionDashboards
Properties
Category Dashboards
Product Version 9.0

How to display filter value as dashboard/report title?

Renato Marcello dos Reis shared this question 4 years ago
Answered

Hi Guys,

I'm trying to achieve something that was not possible in older versions of Yellowfn.

The Case

One of our users asked me a few weeks ago, about a possibility to have some kind of "Title" in a top of a dashboard or some reports who gets the values from the date filters so he can always see the date values applied to some reports.

With code mode, this is reacheable with a few lines of code, but I encountered a problem that I'm not finding the solution in Yellowfin Wiki. Maybe one of you guys can point me to a right direction.

The problem is the following. 

this.onRender = function () { 
    let filtroData = this.apis.dashboard.filters.getFilter('Data do Descarte');    
    console.log(filtroData.valueOne); 
    console.log(filtroData.appliedValueOne); 
};

The above code does only show the applied value one from his date filter in console. The result from these two lines is the following:

PREDEF_TODAY_BETWEEN

And that's the problem. Yellowfin shows this value on the dashboard or report filter as "Today" or in portuguese "Hoje". This is one of the "Pre Defined Values" from date fields that can be reacheable if we define some date filter to "Values List Selection".

Is there some way to retrieve the formatted data as is shown in the filter?

/ba90965e25bfe470572ea8c953083528

Thanks in advance,

Renato Marcello

1 The same question
Best Answer
photo
Neal Dennis ● 4 years ago

Hi Renato,

Apologies for the delay, it took me a bit to work through this, but I have a working example. I have attached a video of the code in action for reference. So what needs to be done is to start by manually adding an "id" (eg. id="FilterValue") to your text widget so we can grab that in the JS code:

29ab92d8ae0974a3b2900648d1259fa0

Once you have this, the following JS code will grab the description of the applied filter (which is already translated): 

this.onRender = function () {
    // Insert your code here. This is an ideal place for setting up event listeners
    let dateFilter = this.apis.dashboard.filters.getFilter("Date");   
    let textWidget = this.apis.canvas.select("FilterValue");
    
    let eventListenerId = dateFilter.addEventListener('applied', function(event) {
        let filterValue = dateFilter.appliedValues.valueOne;
        let appliedValue = dateFilter.possibleValues.find(desc => desc.value == filterValue)
        textWidget.innerHTML = "<div class=\"filterTitle\">" + appliedValue.description + "</div>";
    });
};
You will notice I have added a class of filterTitle to the div, which is just to keep the styling consistent with the initial "No filter selected" text (as for some reason this default css gets lost once I replace the text). This is just a copy/past of the style applied to the text widget and added to the css code in the dashboard:

0c02ea2dc6d5e3793b586cdc0f4b17cc

Hopefully that makes sense, if you have any questions, please let me know.

Cheers,

Neal

Files: filterTranslate.mp4

Replies (3)

photo
1
Neal Dennis ● 4 years ago

Hi Renato,

Apologies for the delay, we have been a bit short on staff this week. I will do some testing on this for you and come back to you, but in the meantime, can you confirm that you are looking to just see "Hoje" instead of "PREDEF_HOJE_BETWEEN", is that correct?

Cheers,

Neal

Reply
photo
1
Renato Marcello dos Reis ● 4 years ago

Hi Neal,

I'm gonna show you some screenshots so you can see the problem more clearly.

/27be0b4b8f9810e5287bde660f44f3bb

This is the java code, as you can see, I'm just using the date filter to show it's first value in console.

/749e0d37a9162d8795caba50ed2fdc2b

The filter value selected was "Hoje", which are equal to "Today" in english. But in console, the value is "PREDEF_TODAY_BETWEEN".

Can this may be of any help?

Thanks a lot.

Renato Marcello

Reply
photo
1
Neal Dennis ● 4 years ago ●

Hi Renato,

Apologies for the delay, it took me a bit to work through this, but I have a working example. I have attached a video of the code in action for reference. So what needs to be done is to start by manually adding an "id" (eg. id="FilterValue") to your text widget so we can grab that in the JS code:

29ab92d8ae0974a3b2900648d1259fa0

Once you have this, the following JS code will grab the description of the applied filter (which is already translated): 

this.onRender = function () {
    // Insert your code here. This is an ideal place for setting up event listeners
    let dateFilter = this.apis.dashboard.filters.getFilter("Date");   
    let textWidget = this.apis.canvas.select("FilterValue");
    
    let eventListenerId = dateFilter.addEventListener('applied', function(event) {
        let filterValue = dateFilter.appliedValues.valueOne;
        let appliedValue = dateFilter.possibleValues.find(desc => desc.value == filterValue)
        textWidget.innerHTML = "<div class=\"filterTitle\">" + appliedValue.description + "</div>";
    });
};
You will notice I have added a class of filterTitle to the div, which is just to keep the styling consistent with the initial "No filter selected" text (as for some reason this default css gets lost once I replace the text). This is just a copy/past of the style applied to the text widget and added to the css code in the dashboard:

0c02ea2dc6d5e3793b586cdc0f4b17cc

Hopefully that makes sense, if you have any questions, please let me know.

Cheers,

Neal

Files: filterTranslate.mp4
Reply
photo
1
Renato Marcello dos Reis ● 4 years ago

Hi Neal,

Thats absolutely exactly what I was trying to do. You have found a workaround to get the results I tried to achieve.

Thanks a lot for your help.

Regards,

Renato Marcello

photo
1
Neal Dennis ● 4 years ago

Hi Renato,

Glad I could work that out for you. Will also be helpful for others going forward. Will try and get a Code Widget or similar developed for this so it can just be dropped into the UI. I will create a separate idea post for this.

Cheers,

Neal

photo
1
Renato Marcello dos Reis ● 4 years ago

Hi Neal,

Sorry to disturb you one more time in the same matter, but I manage to do exactly what you did, however, I stopped at a new thing that maybe you can provide some help. 

this.onRender = function () {

    let filterText = this.apis.canvas.select('filterText');
    let dateFilter = this.apis.dashboard.filters.getFilter('Data do Descarte');
    let defaultValue = dateFilter.possibleValues.find(desc => desc.value == dateFilter.defaultValueOne);
    filterText.innerHTML = "<div class=\"filterText\">" + defaultValue.description + "</div>";
}
If you take a look on this simple code above, I'm trying to implement a default value to the text based on the same filter. The following code it's not wrong, but when I load the page, the default value is loaded and then suddenly disappears, returning the value from it's original state.

I also tried to implement the same behaviour after the only report in this dashboard was loaded. 

relatorio.onReportLoad.then(() => { 
	let valorDefault = dateFilter.possibleValues.find(desc => desc.value == dateFilter.defaultValueOne);
	filterText.innerHTML = "<div class=\"TextoFiltro\">" + defaultValue.description + "</div>";
});
There's something I must be doing wrong?

Thanks one more time.

Regards,

Renato Marcello

photo
1
Neal Dennis ● 4 years ago

Hi Renato,

This one was a little tougher to work out, but I've managed to find a way to do this. I have set my text widget text in the UI to "Loading..." as per the image below:

93598d606c3824bba2ee9ad49807ef44

Then, I have added a js Observer (reference here - note: not a Yellowfin function) which is checking for any changes to filterText that happen. If those changes take place and the innerText value becomes "Loading...", then set it to my default value. The full code for this is below: 


this.onRender = function () {
    // Insert your code here. This is an ideal place for setting up event listeners
    let mainReport = this.apis.canvas.select("SuperbowlDate");
    let dateFilter = this.apis.dashboard.filters.getFilter("Date");   
    let textWidget = this.apis.canvas.select("FilterValue");
    
    let eventListenerId = dateFilter.addEventListener('applied', function(event) {
        let appliedValue = dateFilter.possibleValues.find(desc => desc.value == dateFilter.appliedValues.valueOne);
        textWidget.innerHTML = "<div class=\"filterTitle\">" + appliedValue.description + "</div>";
    });
    
    const observer = new MutationObserver(function() {
        if (textWidget.innerText == "Loading...") {
            let defaultValue = dateFilter.possibleValues.find(desc => desc.value == dateFilter.defaultValueOne);
            textWidget.innerHTML = "<div class=\"filterTitle\">" + defaultValue.description + "</div>"; 
        }
    });
    observer.observe(textWidget, { childList: true });
}

Please let me know how this goes for you.

Cheers,

Neal

photo
1
Renato Marcello dos Reis ● 4 years ago

Hi Neal,

Thanks a lot for all your help.

I didn't knew this funcion and I'm glad you showed me. The code worked really fine and now I manage to create some interesting new Dashboards using some dinamic textWidgets to append into some texts.

I'd like to mention that Yellowfin Team are awesome.

Regards,

Renato Marcello

photo
1
Neal Dennis ● 4 years ago

Hi Renato,

Always help to help where we can, plus it was a great chance for me to learn a bit more about these features too.

Cheers,

Neal

photo
Leave a Comment
 
Attach a file