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

Display or hide input param based on parent input param selection value

Srinivas Yarra

Hi,
 
I want to display or hide the input param selection to user based on parent input param selection in dynamically. Ex: we have vendor, element type, entity type and etc input params for user selection. Here we want to display one more input param that is location param based on element type selection value is com only otherwise we want to hide location field.
 
Please find the screen hot in attachments.
 
We are using Actuate BIRT Designer Professional Version: 4.4.0 and Build id: v20150623
 
Thanks,
Srinivas

Find more posts tagged with

Comments

Clement Wong

From what I understand, you are looking for conditional parameter selection. That is, show "Location" parameter if value of "Element Type" is "com".
 
It is possible to customize the Information Console default parameter page for a new request. How are your end users running reports? Do you give them a link to log into iHub? Do they have a direct access to the executereport.do URL? Are you executing via JSAPI?

Srinivas Yarra

Hi Wong.
 
Thank you for your reply. We are calling/executing the reports with help jsapi from our portal. How to customize the information console default parameter page for a new request?
 
Thanks
Srinivas

Clement Wong

To clarify, so you are using JSAPI to display the parameters? Then, you can use a callback to perform a few jQuery operations.
 
For example, if your existing JSAPI parameters call were the following:
<pre class="_prettyXprint">
 function showParameters() {
 myParams = new actuate.Parameter("myParamContainer");
 myParams.setReportName(myReportName);
 myParams.submit();
 }</pre>
You can change that to:
<pre class="_prettyXprint">
 function showParameters() {
 myParams = new actuate.Parameter("myParamContainer");
 myParams.setReportName(myReportName);
 myParams.submit(stylizeParameters); // add a callback function here
 }</pre>
And add the following function:
<pre class="_prettyXprint">
 function stylizeParameters() {

 $("div.paramDisplayName:contains('Location')").parent().parent().css("display","none");

 // Add an onchange event to the Element Type selector
 $("div.paramDisplayName:contains('Element Type')").parent().parent().children('td').eq(1).find('select').on('change', function() {
 if (this.value == "com" ) {
 $("div.paramDisplayName:contains('Location')").parent().parent().css("display","block");
 }
 });

 }</pre>
You will need to make the Location parameter NOT hidden in the report design. 
 
In the stylizeParameters() function, we target the <TR> and hide that parameter block.
 
Then, we add an onChange event to the <SELECT> of the Element Type. If the value is "com", we display the Location parameter block.