nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

interactive drop-down list in report

jeremy cohen

<p>I'm wondering if there is a way to achieve the above.</p>
<p> </p>
<p>Simplistic example:</p>
<p> </p>
<p>Say I have some financial data for a number of years</p>
<p> </p>
<p>2013 amt1 amt2 amt3</p>
<p>2014 amt1 amt2 amt3</p>
<p>2015 amt1 amt2 amt3</p>
<p> </p>
<p>and a report that displays the financial data (amt1 amt2 amt3) for any one year.</p>
<p> </p>
<p>I would like to have a drop down list populated with the years available in the data (2013 2014 2015) embedded in the report that drives which year's data is presented in the rendered table. This should allow the user, once the report is rendered, to select which year's data to display.</p>
<p> </p>
<p>Yes, this is exactly what I could do with a parameter, but I do not want to have to re-run the report every time to invoke the built-in parameter dialogue

</p>
<p> </p>
<p>Am using BIRT 2.6.</p>
<p> </p>

Find more posts tagged with

Comments

bclark

<p>Hi-</p>
<p> </p>
<p>I have a Fast Filter demo that is close to what you are looking for. The key code is in the clientScripts/onCOntentUpdate event. You also need the drop down in the header.</p>
<p> </p>
<p>Please let me know if you need me to explain how this works in more detail.</p>
<p> </p>
<p>Bill</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

bclark

<p>P.S. The above code required F-Type or iHub 3.0 to run. You can download F-Type for free.</p>

leemarc00

<p>Hi bclark,</p>
<p> </p>
<p>Is there a way to achieve the same effect without having F-Type or IHub?</p>
<p> </p>
<p>Also, the filters don't appear if I run the report in HTML, it only works if viewed through the report viewer. Is there a way to change it so it works in HTML as well?</p>
<div> </div>
<div> </div>
<div>Thanks in advance!</div>

jeremy cohen

<p>hi bclark,</p>
<p> </p>
<p>Thanks for a fast response!</p>
<p> </p>
<p>I'd be grateful if you would provide a little more detail on how this hangs together - I have no copy of the correct rptlibrary for the <span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">ThemesReportItems3 referenced.</span></p>
<p> </p>
<p><span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">thanks,</span></p>
<p><span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">Jeremy.</span></p>

bclark

<div>
<div>Hi-</div>
<div> </div>
<div>You do not really need "ThemesReportItem3" but you can find it in F-Type. I recommend downloading F-Type and experimenting with things like BIRT Data Objects. They are very powerful.</div>
<div> </div>
<div>BTW, I am going on vaction after today and will be returning on 10/2.</div>
<div> </div>
<div>This is what you need to implement Fast Filters:</div>
<div> </div>
<div>In the header of the table, you need to add the below items:</div>
<div> </div>
<div> Search all columns: <input type="text" id="searchString"><br><input type="checkbox" id="ignoreCase" checked="true"> Ignore case<input type="submit" value="Search" onclick='javascript:searchTable()'></div>
<div> </div>
</div>
<div>You need to add a drop down for every column that you want to search on. Please note how they have to be id'ed.</div>
<div> </div>
<div><select id='REVENUEYEAR_FILTER' onchange='javascript:filterColumn("REVENUEYEAR")' style="width:100px;"></div>
<div></select></div>
<div>
<div><div id="searchTerms">yep</div></div>
<div> </div>
<div>In the clientScripts/onClientUpdate, you need to paste the below code. You should be able to paste it as is except for altering the columns to match your report. </div>
<div> </div>
<div>
<div>var columns = new Array();</div>
<div> </div>
<div> </div>
<div>this.createFastFilters = function () {</div>
<div> debugger;</div>
<div>   </div>
<div> // First create the list of filter terms</div>
<div> var searchTerms = sessionStorage["searchTerms"];</div>
<div>var termDiv = document.getElementById("searchTerms");</div>
<div>termDiv.innerHTML = "createFastFilters";</div>
<div>if (searchTerms != "" && searchTerms != 'undefined' && searchTerms != null) {</div>
<div> termDiv.innerHTML = "Search Terms:<br>" + searchTerms;</div>
<div>} else {</div>
<div> termDiv.innerHTML = "No Search Terms";</div>
<div>}</div>
<div> </div>
<div>columns[0] = "ROWID";</div>
<div>columns[1] = "COUNTRY";</div>
<div>columns[2] = "PRODUCTVENDOR";</div>
<div>columns[3] = "PRODUCTLINE";</div>
<div>columns[4] = "PRODUCTNAME";</div>
<div>//columns[5] = "TOTALREVENUE";</div>
<div>columns[5] = "REVENUEYEAR";</div>
<div>// Initialize the state of each column filter to not filtered.</div>
<div>for (var i = 0; i < columns.length; i++) {</div>
<div> </div>
<div>if (sessionStorage[columns + ".state"] == null) {</div>
<div>sessionStorage[columns + ".state"] = "Not Filtered";</div>
<div>}</div>
<div>}</div>
<div>var table = this.getViewer().getTable();</div>
<div>var request = new actuate.data.Request(table.getBookmark(), 0, 100);</div>
<div>request.setMaxRows(0);</div>
<div>request.setColumns(columns);</div>
<div>this.getViewer().downloadResultSet(request,this.addOptions);</div>
<div> </div>
<div>}</div>
<div> </div>
<div>this.addOptions = function(resultSet) {</div>
<div> debugger;</div>
<div>   </div>
<div> var columnIndex = 0;</div>
<div>   </div>
<div> </div>
<div> var i;</div>
<div> var found;</div>
<div> // Load unique values into dropdowns</div>
<div>while (resultSet.next()) {</div>
<div>for (columnIndex = 0; columnIndex < columns.length; columnIndex++) {</div>
<div>found = false;</div>
<div> <span> </span>elem = document.getElementById(columns[columnIndex] + "_FILTER");</div>
<div> <span> </span> <span> </span>if (elem == null)<span> </span>continue; // Pass on column if not filterable</div>
<div> <span> </span></div>
<div> <span> </span>for (i=0; i<elem.length; i++) { // See if we already put it in the list</div>
<div> <span> </span>if (elem.options.text.slice(0, elem.options.text.lastIndexOf(",")) == resultSet.getValue(columnIndex+1)) {</div>
<div> <span> </span> var cnt = elem.options.text.substring(elem.options.text.lastIndexOf(",") + 1);</div>
<div> <span> </span> cnt++;</div>
<div> <span> </span> elem.options.text = elem.options.text.slice(0, elem.options.text.lastIndexOf(",")) + "," + cnt;</div>
<div> <span> </span>found = true;</div>
<div> <span> </span>break;</div>
<div> <span> </span>}</div>
<div> <span> </span>}</div>
<div> <span> </span>if (found) continue;</div>
<div> <span> </span></div>
<div>var option=document.createElement("option");</div>
<div>option.text=resultSet.getValue(columnIndex+1) + ",1";</div>
<div>try {</div>
<div> <span> </span>// for IE earlier than version 8</div>
<div> <span> </span> <span> </span>elem.add(option,elem.options[null]);<span> </span></div>
<div>}</div>
<div>catch (e){</div>
<div>elem.add(option,null);</div>
<div>}</div>
<div>}</div>
<div> </div>
<div>}</div>
<div> // If the column has too many values or is a number, consolidate.</div>
<div>   </div>
<div> </div>
<div>// Now sort all the column filters and add the top level options</div>
<div>for (columnIndex=0; columnIndex < columns.length; columnIndex++) {</div>
<div> <span> </span>elem = document.getElementById(columns[columnIndex] + "_FILTER");</div>
<div> <span> </span> <span> </span>if (elem == null)<span> </span>continue; // Pass on column if not filterable</div>
<div> <span> </span>$("#" + columns[columnIndex] + "_FILTER").html($("#" + columns[columnIndex] + "_FILTER option").sort(function(x, y) { </div>
<div> <span> </span>return $(x).text() < $(y).text() ? -1 : 1; </div>
<div> <span> </span> <span> </span> })) </div>
<div> debugger;</div>
<div> <span> </span> <span> </span></div>
<div> <span> </span> <span> </span>// If the list is a number, only select every tenth one</div>
<div> <span> </span> <span> </span>if (typeof elem.options[0].value == "number" || columnIndex == 2) {</div>
<div> <span> </span> <span> </span> <span> </span> for (var i = 0; i < elem.options.length; i++) {</div>
<div> <span> </span> <span> </span> <span> </span>if (i % 4 >= 0) elem.options.remove(i);</div>
<div> <span> </span> <span> </span> <span> </span></div>
<div> <span> </span> <span> </span> <span> </span>}</div>
<div>var option=document.createElement("option");</div>
<div>option.text="< Top 5 >";</div>
<div>try {</div>
<div> <span> </span>// for IE earlier than version 8</div>
<div> <span> </span>elem.add(option,elem.options[0]);<span> </span></div>
<div>}</div>
<div>catch (e){</div>
<div>elem.add(option,0);</div>
<div>}<span> </span></div>
<div> <span> </span> <span> </span> <span> </span></div>
<div> <span> </span> <span> </span></div>
<div> <span> </span> <span> </span>}</div>
<div>var option=document.createElement("option");</div>
<div>option.text="<Clear Filter>";</div>
<div>try {</div>
<div> <span> </span>// for IE earlier than version 8</div>
<div> <span> </span>elem.add(option,elem.options[0]);<span> </span></div>
<div>}</div>
<div>catch (e){</div>
<div>elem.add(option,0);</div>
<div>}<span> </span></div>
<div> </div>
<div>option=document.createElement("option");</div>
<div>option.text = sessionStorage[columns[columnIndex] + ".state"];</div>
<div> </div>
<div>try {</div>
<div> <span> </span>// for IE earlier than version 8</div>
<div> <span> </span>elem.add(option,elem.options[0]);<span> </span></div>
<div>}</div>
<div>catch (e){</div>
<div>elem.add(option,0);</div>
<div>}<span> </span></div>
<div> </div>
<div>elem.selectedIndex = 0;</div>
<div> </div>
<div>}</div>
<div> </div>
<div>}</div>
<div> </div>
<div>window.myViewerId = this.id;</div>
<div>window.filterColumn = function(columnName) {</div>
<div> </div>
<div>ddId = columnName + "_FILTER";</div>
<div>var elem = document.getElementById(ddId);</div>
<div>var strValue = (elem.options[elem.selectedIndex].value.indexOf("<") == -1) ? elem.options[elem.selectedIndex].value.slice(0, elem.options[elem.selectedIndex].value.lastIndexOf(",")) : elem.options[elem.selectedIndex].value;</div>
<div>var table = actuate.getViewer(myViewerId).getTable();</div>
<div> </div>
<div>debugger;</div>
<div>if (strValue=="<Clear Filter>") {</div>
<div> table.clearFilters(columnName);</div>
<div> sessionStorage[columnName + ".state"] = "Not Filtered";</div>
<div> } else if (strValue=="< Top 5 >") {</div>
<div>var filter = new actuate.data.Filter(columnName, actuate.data.Filter.TOP_N, 5);</div>
<div>var myVal = filter.getValues();</div>
<div>table.setFilters(filter);</div>
<div> sessionStorage[columnName + ".state"] = "Filtered";</div>
<div>elem.selectedIndex = 0;</div>
<div> } else if (columnName == "TOTALREVENUE") {</div>
<div>var filter = new actuate.data.Filter(columnName, actuate.data.Filter.GREATER_THAN, strValue);</div>
<div>var myVal = filter.getValues();</div>
<div>table.setFilters(filter);</div>
<div> sessionStorage[columnName + ".state"] = "Filtered";</div>
<div>elem.selectedIndex = 0;</div>
<div> <span> </span></div>
<div> } else {<span> </span></div>
<div>var filter = new actuate.data.Filter(columnName, actuate.data.Filter.EQ, strValue);</div>
<div>var myVal = filter.getValues();</div>
<div>table.setFilters(filter);</div>
<div> sessionStorage[columnName + ".state"] = "Filtered";</div>
<div>elem.selectedIndex = 0;</div>
<div>}</div>
<div>table.submit();</div>
<div> </div>
<div>}</div>
<div> </div>
<div>window.searchTable = function() {</div>
<div> debugger;</div>
<div> <span> </span>var table = actuate.getViewer(myViewerId).getTable();</div>
<div> <span> </span>var elem = document.getElementById("searchString");</div>
<div> <span> </span>var searchTerm = elem.value;</div>
<div> <span> </span>if (searchTerm == "") {</div>
<div> <span> </span> sessionStorage["searchTerms"] = "";</div>
<div> table.clearFilters("ROWID");</div>
<div> table.submit();</div>
<div> <span> </span> return;</div>
<div> <span> </span>}</div>
<div> <span> </span></div>
<div> <span> </span>if (sessionStorage["searchTerms"] == "" || sessionStorage["searchTerms"] == 'undefined' || sessionStorage["searchTerms"] == null) {</div>
<div> <span> </span>sessionStorage["searchTerms"] = searchTerm;</div>
<div> } else {</div>
<div> <span> </span>sessionStorage["searchTerms"] = sessionStorage["searchTerms"] + " && " + searchTerm;</div>
<div> }</div>
<div> <span> </span> </div>
<div>var termDiv = document.getElementById("searchTerms");</div>
<div> termDiv.innerHTML = "Search Terms:<br>" + sessionStorage["searchTerms"];</div>
<div> <span> </span></div>
<div>var request = new actuate.data.Request(table.getBookmark(), 0, 100);</div>
<div>request.setMaxRows(0);</div>
<div>request.setColumns(columns);</div>
<div>actuate.getViewer(myViewerId).downloadResultSet(request,window.searchColumns);</div>
<div>   </div>
<div>   </div>
<div>//alert('Hello!! ' + searchTerm);</div>
<div>}</div>
<div> </div>
<div>window.searchColumns = function(resultSet) {</div>
<div> var elem = document.getElementById("searchString");</div>
<div> if (document.getElementById("ignoreCase").checked == true)</div>
<div> <span> </span>var searchTerm = new RegExp(elem.value, "i");</div>
<div> else</div>
<div> <span> </span>var searchTerm = new RegExp(elem.value);</div>
<div> </div>
<div> var columnIndex = 1;</div>
<div> var i = 0, rowidIndex = 0;</div>
<div> var rowIds = new Array();</div>
<div>   </div>
<div> <span> </span></div>
<div> <span> </span>var resultColumns = resultSet.getColumnNames();</div>
<div>for (columnIndex = 0; columnIndex < resultColumns.length; columnIndex++) {</div>
<div> if (resultColumns[columnIndex] == "ROWID") {</div>
<div> <span> </span> rowidIndex = columnIndex;</div>
<div> <span> </span> break;</div>
<div> <span> </span>}<span> </span></div>
<div>}</div>
<div> <span> </span></div>
<div> <span> </span>if (searchTerm.length < 1) {</div>
<div> <span> </span> return;</div>
<div> <span> </span>}</div>
<div> </div>
<div> while (resultSet.next()) {</div>
<div>for (columnIndex = 0; columnIndex < columns.length; columnIndex++) {</div>
<div>if (resultSet.getValue(columnIndex+1).search(searchTerm) != -1) {</div>
<div>//alert("Found in: " + resultSet.getValue(columnIndex+1));</div>
<div>rowIds = resultSet.getValue(rowidIndex+1);</div>
<div>i++;</div>
<div>continue;</div>
<div>}</div>
<div>}</div>
<div>}</div>
<div> debugger;</div>
<div>// Found at least one, so create filter</div>
<div>if (i > 0) {</div>
<div> var table = actuate.getViewer(myViewerId).getTable();</div>
<div>var filter = new actuate.data.Filter("ROWID", actuate.data.Filter.IN, rowIds);</div>
<div>table.setFilters(filter);</div>
<div>table.submit();</div>
<div>}</div>
<div>   </div>
<div>}</div>
<div> </div>
<div>this.createFastFilters();</div>
</div>
<div> </div>
</div>

leemarc00

<p>Thanks for taking the time to write this up! Much appreciated.</p>

tarun1310

<p>Hi Team need your help, content update is not coming</p>
<p><a data-ipb='nomediaparse' href='http://postimg.org/image/9ikd2p581/'>http://postimg.org/image/9ikd2p581/</a></p>
<p> </p>
<p>Please see the screenshot for more details</p>

TheJ

<p>Hi,</p>
<p> </p>
<p>I am facing with the same problem too. </p>
<p>1. if using Birt, there is no 'onContentUpdate' choice.</p>
<p>2. if using iHub, the drop-down dose not show when deployed on tomcat.</p>
<p> </p>
<p>Anyone solve this problem yet?</p>