Nested Filter options in Spotfire - filtering

Question

I am learning to create reports using spotfire. Could you please help me to understand the feasibility.
Is it possible to change the filters based on the previous selection(filters has to be altered based on the previous section)
For Example:
I have a following table, with three columns.
Filter1 Filter2 Data
Name Name1 test1
Age Age1 test2
Location Location1 test3
I am planning to have filter options based on the column Filter1 and Filter2.
Is it possible to create a drop down with the values "Filter1" and "Filter2"?
Is it possible to modify the list of filter options, based on the first drop down selection.
For example. if "Filter1" is selected in the drop down. The list of filter options should be "Name","Age", "Location".
if "Filter2" is selected in the drop down. The list of filter options should be "Name1","Age1", "Location1".
Thank you

Answer 1

We can also create a cascading drop down list through the following steps.
Create a “property Control – Drop down list” myDropDownList
Select the “Unique Column Value ” to populate the drop down list (values).
Go to “Insert -> Calculated Column”
Use a simple conditional statement something like If([Value1] = ‘${myDropDownList}’, [Value 2], NULL)
Use the newly created column in the text area filter. This will be updated based on the previous section.
Thanks.

Answer 2

I have a solution utilizing JavaScript to effectively toggle between hidden DIVs. I'm not aware of a way to manipulate the filter object and which column it points to in the Text Area through the API. If someone does know a way I'd love to hear it!
Here is my solution with JS:
Set up your Text Area with a Drop Down for your selection as a column selector (with columns of interest chosen through the "Select Columns..." dialogue), a label displaying that selection (we will hide this, I realize it seems redundant), and 2 filters for your 2 columns.
Right click your text area and click Edit HMTL. Utilizing the HTML below, modify your HTML to match. You will want to have the 1st DIV as your drop down, the SPAN as your label which displays that drop down's property, and then the last 2 DIVS (LETTER and NUMBER in my case) as your two filters. Make sure the DIV id name matches your column name exactly.
<DIV><SpotfireControl id="8dc9d8974bde445cab4c97d38e7908d6" /></DIV>
<SPAN id=docProp style="DISPLAY: none"><SpotfireControl id="1311015997cd476384527d91cb10eb52" /></SPAN>
<DIV id=LETTER style="DISPLAY: none"><SpotfireControl id="760ae9ffd71a4f079b792fb5f70ac8b4" /></DIV>
<DIV id=NUMBER style="DISPLAY: none"><SpotfireControl id="488ef4b1289440d5be24b0dd8cfc3896" /></DIV>
Next we will implement the JS. To do so, click the +JS button in your Edit HTML. The JS itself is below. You'll want to change my inputs of LETTER and NUMBER in the first 2 getElementById references where we set them to display:none.
filter = function(){
input = $("#docProp").text().trim() //Take the text from our hidden label and trim it from any white space.
document.getElementById("LETTER").style.display = 'none'; //Reset DIV
document.getElementById("NUMBER").style.display = 'none'; //Reset DIV
document.getElementById(input).style.display = 'block'; //Set new display
}
//Run this function every 333ms or other length of time desired to update your filters.
setInterval(filter,333)
//Larger numbers mean slower response and better performance vs. faster response and worse performance. Tune as necessary.
Alternatively instead of scanning every X milliseconds (can cause some performance drag), you can make a JS button to run it manually. e.g. $("#divIdForButtonPlacement").button().bind('click',filter)
A few images of my setup for testing are shown below. Let me know if you have any questions regarding this.