How do you enable/disable (Hide/show) dropdown field based on options in radio buttons?

[vpurushottam]

Scenario:

I need to extract records based on 3 different options.

1) Based on only days of the weeks: user selects from which day till which day he wants to extract the records from (Sunday to Saturday)
2) Based on only time: user selects from what time to what time he wants to extract the output from. (Eg: 9PM-7AM, 11AM-6PM etc)
3) Based on both: user selects day as well as time.

Goal:
1) If a user selects the radio option "Only Days", he cannot modify the hour field, and the record is extracted for the days that match the user's choice.
2) If a user selects the radio option "Only Hours", he cannot modify the Days field, and the record is extracted for the hour range that matches the user's choice.
3) If a user selects "Both", he can modify the day and hour field and the result is displayed for the appropriate match.

Given below is the query that I have used:

<input type="radio" token="record_by">
  <label>Extract records by:</label>
  <default>3</default>
  <choice value="1">Only Days</choice>
  <choice value="2">Only Hours</choice>
  <choice value="3">Both (Default)</choice>
  <change>
    <condition value="Only Days">
      <set token="activate_only_days"></set>
      <unset token="activate_only_hours"></unset>
    </condition>
    <condition value="Only Hours">
      <set token="activate_only_hours"></set>
      <unset token="activate_only_days"></unset>
    </condition>
    <condition value="Both">
      <set token="activate_only_days"></set>
      <set token="activate_only_hours"></set>
    </condition>
  </change>

</input>
<input type="time" token="date_from">
  <label>Date Range</label>
  <default>
    <earliest>-30d@d</earliest>
    <latest>now</latest>
  </default>
</input>
<input type="dropdown" token="day_from" depends="$activate_only_days$">
  <label>From (Day):</label>
  <default>Sunday</default>
  <choice value="0">Sunday</choice>
  <choice value="1">Monday</choice>
  <choice value="2">Tuesday</choice>
  <choice value="3">Wednesday</choice>
  <choice value="4">Thursday</choice>
  <choice value="5">Friday</choice>
  <choice value="6">Saturday</choice>
</input>
<input type="dropdown" token="day_to" depends="$activate_only_days$">
  <label>To (Day):</label>
  <default>Saturday</default>
  <choice value="0">Sunday</choice>
  <choice value="1">Monday</choice>
  <choice value="2">Tuesday</choice>
  <choice value="3">Wednesday</choice>
  <choice value="4">Thursday</choice>
  <choice value="5">Friday</choice>
  <choice value="6">Saturday</choice>
</input>
<input type="dropdown" token="hour_from" depends="$activate_only_hours$">
  <label>From (Hour):</label>
  <default>00</default>
  <choice value="00">12 AM (00:00:01)</choice>
  <choice value="01">01 AM</choice>
  <choice value="02">02 AM</choice>
  <choice value="03">03 AM</choice>
  <choice value="04">04 AM</choice>
  <choice value="05">05 AM</choice>
  <choice value="06">06 AM</choice>
  <choice value="07">07 AM</choice>
  <choice value="08">08 AM</choice>
  <choice value="09">09 AM</choice>
  <choice value="10">10 AM</choice>
  <choice value="11">11 AM</choice>
  <choice value="12">12 PM</choice>
  <choice value="13">01 PM</choice>
  <choice value="14">02 PM</choice>
  <choice value="15">03 PM</choice>
  <choice value="16">04 PM</choice>
  <choice value="17">05 PM</choice>
  <choice value="18">06 PM</choice>
  <choice value="19">07 PM</choice>
  <choice value="20">08 PM</choice>
  <choice value="21">09 PM</choice>
  <choice value="22">10 PM</choice>
  <choice value="23">11 PM</choice>
</input>
<input type="dropdown" token="hour_to" depends="$activate_only_hours$">
  <label>To (Hour)</label> 
  <default>24</default>
  <choice value="00">12 AM (00:00:01)</choice>
  <choice value="01">01 AM</choice>
  <choice value="02">02 AM</choice>
  <choice value="03">03 AM</choice>
  <choice value="04">04 AM</choice>
  <choice value="05">05 AM</choice>
  <choice value="06">06 AM</choice>
  <choice value="07">07 AM</choice>
  <choice value="08">08 AM</choice>
  <choice value="09">09 AM</choice>
  <choice value="10">10 AM</choice>
  <choice value="11">11 AM</choice>
  <choice value="12">12 PM</choice>
  <choice value="13">01 PM</choice>
  <choice value="14">02 PM</choice>
  <choice value="15">03 PM</choice>
  <choice value="16">04 PM</choice>
  <choice value="17">05 PM</choice>
  <choice value="18">06 PM</choice>
  <choice value="19">07 PM</choice>
  <choice value="20">08 PM</choice>
  <choice value="21">09 PM</choice>
  <choice value="22">10 PM</choice>
  <choice value="23">11 PM</choice>
  <choice value="24">12 AM (11:59:59)</choice>
</input>

The "depends" here seems to have no effect at all.

And also, do I need to make different query statements for each user option (using "depends" in element) or is there a more efficient solution?

[vnravikumar · Accepted solution]

Hi @vpurushottam

Please modify this and try

<change>
     <condition value="1">
       <set token="activate_only_days"></set>
       <unset token="activate_only_hours"></unset>
     </condition>
     <condition value="2">
       <set token="activate_only_hours"></set>
       <unset token="activate_only_days"></unset>
     </condition>
     <condition value="3">
       <set token="activate_only_days"></set>
       <set token="activate_only_hours"></set>
     </condition>
   </change>

OR

 <change>
     <condition label="Only Days">
       <set token="activate_only_days"></set>
       <unset token="activate_only_hours"></unset>
     </condition>
     <condition label="Only Hours">
       <set token="activate_only_hours"></set>
       <unset token="activate_only_days"></unset>
     </condition>
     <condition label="Both (Default)">
       <set token="activate_only_days"></set>
       <set token="activate_only_hours"></set>
     </condition>
   </change>

[vnravikumar]

@vpurushottam, have you tried?

[vpurushottam]

Thanks a lot @vnravikumar your solution worked !

[vpurushottam]

(using "depends" in "row" element) *