Thursday, March 1, 2012

Show or Hide Date Prompts based on Radio Button Selection

Keywords: Date Prompt - Show or Hide - Radio Button - Javascript - Report Studio - Cognos 8

Business Case:
Many a times, you may want to give users the option to run the report for predefined date ranges (prior month, prior year etc) or enter custom dates. When the user selects a predefined option, the date prompt should be disabled. When the user selects "Custom" the date prompt should be enabled. This needs to be done to avoid confusion in the prompt page.

Example:
A daily scheduled report runs for the prior day. Users want to use the same report for custom dates as well. If they want to run the report for a historical data, they should be able to select a date or date range.


Solution:
We will be using Javascript to manipulate the Radio Button and date prompts. We will attach an HTML "On Change" event to the radio buttons, which will trigger a function. Depending on the selection, the function will disable or hide the date prompt.

Implementation:
  • To start with, create a radio button with necessary static values. E.g. "Yesterday" and "Custom"
  • Set the "Required" property to "No". This is very important. If this is not done, the "Finish" button will not be enabled.
  • Create a Date Prompt and set the "Required" property to "No".
  • We will need 3 HTML Items.
  • Place the first HTML item immediately before the date prompt and the second HTML item immediately after the date prompt.
  • These two HTML items will create a handle for the date prompt.
  • Place the third HTML item at the end of the page. This will contain the main script. 
  • I created a table and placed the prompts inside them. When you have done this, the prompt page layout will look like this:
  •  Place the following script in HTML Item 1:
<span id="date_prompt">
  •  Place the following script in HTML Item 2:
</span>
  •  Place the following script in HTML Item 3, the main script:
<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
var list_box = new Array();

/****Identify Radio Buttons and load them into an array****/
var radio_buttons = new Array();
j=0;

for(i=0;i<inputs.length;i++)
{
    if(inputs[i].type=='radio')
    {
        radio_buttons[j] = inputs[i];
        j++;
    }  
}

/****Set the onclick event of each radio button option to trigger our custom function****/
radio_buttons[0].setAttribute("onclick",function(){ToggleDate();});
radio_buttons[1].setAttribute("onclick",function(){ToggleDate();});

/****Create a handle for date prompt****/
var prompt = document.getElementById("date_prompt").childNodes[0];

function ToggleDate()
{
    if(radio_buttons[0].checked)
    {
        /**** First options (in our case "Custom") is selected.****
         **** Date Prompt will be Shown or Enabled.            ****/

        //document.getElementById("date_prompt").style.display = '';
        prompt.disabled = '';
    }
    else
    {
        /**** Second options (in our case "Yesterday") is selected.****
         **** Date Prompt will be Hidden or Disabled.              ****/

        //document.getElementById("date_prompt").style.display = 'none';
        prompt.disabled = 'true';
    }
}
</script>
  • Now when you run the report depending on the radio button you select, the date prompt will be disabled on enabled.
  • If you want to hide the date prompt instead of disabling it, comment out (add // in front) the following lines
prompt.disabled = '';

prompt.disabled = 'true';
  • and uncomment (remove // from front) the following lines:
//document.getElementById("date_prompt").style.display = '';

//document.getElementById("date_prompt").style.display = 'none';
  • Note that the code for disabling works only for date prompts, whereas the code for hiding works for any element that you put between the two HTML items. 
  • The last step is to create a filter the combines both the prompt selections.
  • This filter should be set to "Optional".
  • In my example, the prompts are named as date_type (radio button) and report_date (date prompt). The filter expression will be:
(?date_type? = 'custom' and [Order Date] = cast(?report_date?,date))
OR
?date_type? = 'yesterday' and [Order Date] = trunc(_add_days(current_date,-1))
Note: Refer to "Use the Same Report for Scheduling and Manual Run" to see more details about how to structure the filter expressions in these cases.
  • When you run the report, the prompt page will look like this:

  • When the "Custom" option is selected the date prompt will still be enabled. See below:
  • When the "Yesterday" option is selected the date prompt will be disabled, like this:
  • Once the prompt page is done, you would want to add the date selection in the report page, so that users know what range they selected.
  • I do this by creating a data item in the report query: Report Date
  • The expression for Report Date would be something like this:
Case
   When ?date_type? = 'custom' Then cast(?report_date?,date))
   When ?date_type? = 'yesterday' Then trunc(_add_days(current_date,-1))
End
  • You can now create a singleton item on the report page and drag this data item to the page.
In the next article, I will post the script to do the same thing using a drop down value prompt instead of Radio Buttons.

21 comments:

  1. Hi Sriram,
    Thanks for posting some kool techniques.
    Really appreciate it.Keep it up!!
    Thanks

    ReplyDelete
    Replies
    1. Check this link

      http://cognosasksumeet.blogspot.in

      Thanks

      Delete
  2. This is great! ONe question, how would you proceed if you wished to accomplish the same thing, but instead of radio buttons, you used a drop down value list?

    ReplyDelete
  3. Hugo, Both the main script and ToggleDate() function script will have to be modified accordingly. Any reason you prefer drop down list to the radio buttons? In this case they would serve the same purpose.

    ReplyDelete
  4. Hi Sriram,

    This is great. I am trying to select a Range rather than a single date once the date prompt is enabled, how can I do that? Also instead of having yesterday for instance, would it be able to do like lets say "Last week" or "Last month". I am really not familiar with javascript coding, so detailed info as you provided would be greatly appreciated.

    Thanks a lot!!

    -Z

    ReplyDelete
    Replies
    1. I am having the same problem. Instead of having 2 options, it would be cool to have more than one option (in a range basis) for instance, I need the radio box to say. Custom, Yesterday, Last Week, Last Month, Last 2 Months, Last 6 Months and Last year. Can I do that?

      Thanks,

      Joe from MA

      Delete
    2. Please check this post for multiple date prompts and more than 2 radio button options.

      http://www.cognosonsteroids.com/2012/09/show-or-hide-multiple-date-prompts.html

      Thanks,
      Sriram.

      Delete
  5. Z and Joe,

    You can have as many options as you want in the radio button. Also, instead of date prompt, I usually use a start_date and end_date prompts when I need a range. I will update the scripts later today to work for these options.

    Sriram.

    ReplyDelete
    Replies
    1. For these kind mixed prompts. For instance if I would like to show in my report the parameters selected, how would I do that? For instance if we select 'yesterday' it would show 'August 15th 2012', Or if I select a date range in the custom 'Between August 10th 2012 and August 15th 2012', or if I select 'Last month' it would show 'July 2012', I am just thinking out of the top of my head. What do you its going to do better?

      Thanks,

      Joe

      Delete
    2. I have updated the post with the steps for single date. When I add date range, I will put the steps for that too.

      Delete
  6. Hi Sriram,

    How would it work if I need to make multiple radio boxes of those in the same prompt page? Could you modify the javascript to reflect so?

    Please, I need as soon as possible.

    Thanks,

    Andrew

    ReplyDelete
    Replies
    1. Andrew,

      I didn't understand your question. Can you explain your scenario with an example. You can email me at cognosonsteroids@hotmail.com

      Thanks,
      Sriram.

      Delete
  7. What if you have 5 different date options and one is they want to run it by no date at all.

    so the radio buttons would be
    No Date filter
    Start date
    End Date
    Last date
    Nest date

    ReplyDelete
    Replies
    1. Hello Anonymous,

      Check the latest post: http://www.cognosonsteroids.com/2012/09/show-or-hide-multiple-date-prompts.html

      I have added the "No Date Filter" option at the end.

      Thanks,
      Sriram.

      Delete
  8. Hi Sriram,

    That's very good method, helped me with radio button.
    Can I have similar method for Drop down...?
    The reason for dropddown, my report has very limited space, where radiio button
    occupying space. Dropdown will help to my requirement.

    Thanks in advance.

    ReplyDelete
  9. Hi SriRam,
    Can you please share the Java script for the below requirement.
    radio button defalut value is no, if no is checked then it display value prompt 'A'. if yes is selected it only dispaly value prompt 'B'

    ReplyDelete
  10. Hi Sriram,

    Thanks a lot for the above example,
    I have the same requirement but with additional change,
    In the above example we are able to disable the date prompt but the calender still seems to be active,is there any way where we can make the calender inactive,I mean user should not have an option to even select the calender when the prompt is disable.

    I would really appreciate an early reply.

    Thanks in advance.

    ReplyDelete
    Replies
    1. Unfortunately, even disabling the calendar doesn't make it inactive. You can put a span tag around the entire prompt and hide it. That's the only way I can think of.

      Delete
    2. Thanks Sriram for your response...I have opted for hidding the prompt rather than disabling.Fortunately It was accepted.

      Delete
  11. Thanks a lot sriram for this js......

    ReplyDelete