Show or hide field based on dropdown

ArdeviaForum

• Created August 18, 2016 11:59

Original Post by MKO (Imported from Ardevia Forum)

Hello,

 

I have Horizontal group. And is it possible to show fields based on Drop Down Field.

 

With some JavaScript code!

 

Thank you!

0

• 

  ArdeviaForum

  • August 18, 2016 15:05

  Original Post by dany (Imported from Ardevia Forum)

  Yes, you can do that quite easily using the "Visible" expression. And you won't need to embed any JavaScript.
  - In design mode select the field you want to show/hide depending on the Drop Down Field
  - In the behavior ribbon tab set the "Visible" expression open the expression builder and set your condition (Example: [[DropDownField]] == "Some Value")
  For more details on visible expressions check out the documentation here .

  0
• 

  ArdeviaForum

  • August 18, 2016 15:07

  Original Post by MKO (Imported from Ardevia Forum)

  

   

  Here is the picture How it is.
  And the problem is:
  "DropDown1" is Choice2 and "DropDown2" is Choice 1 then is not in the same row.

   

  Thank you for reply!

  0
• 

  ArdeviaForum

  • August 18, 2016 15:08

  Original Post by Vitaliy Zadorozhnyy (Imported from Ardevia Forum)

  Hi,
  Can you please clarify requirement?
  if in first drop down(DropDown1)  selected Choise2 then show "Choise 2" fields group in the same row where is first drop down and as well the same with DropDown2?
  You need some sort of ordering?

  0
• 

  ArdeviaForum

  • August 18, 2016 15:08

  Original Post by MKO (Imported from Ardevia Forum)

  Yes that is correct. If DropDown1 is "Choise 2" then fields from Choise 2 to be on same row with DropDown1

   

  Thank you for reply!

  0
• 

  ArdeviaForum

  • August 18, 2016 15:09

  Original Post by Vitaliy Zadorozhnyy (Imported from Ardevia Forum)

  Hi,
  there is not direct method doing this, but ardevia rich forms supports any JavaScript code to be executed in it expressions on some events.
  So you can use for example 'Visible' or 'Enabled' Expression on each of control groups which should be ordered (those expressions are triggered/evaluated when placeholder ,used in expression, values changes) and use JavaScript code inside it to manipulate with/order DOM in groups. As placeholder you can use Dropdown1 and Dropdown2. How to write custom code and idea how it works in 'Visible' or 'Enabled'  you can get from this post .
  Hope this helps.

  0
• 

  ArdeviaForum

  • August 18, 2016 15:10

  Original Post by MKO (Imported from Ardevia Forum)

  Code

  if([[DropDown1]]=="choise1"){
    //how to print in fileds for "choise1" in the group
  }
  

  Can you help me to finish the Javascript code?

   

  Thank you!

  0
• 

  ArdeviaForum

  • August 18, 2016 15:14

  Original Post by Vitaliy Zadorozhnyy (Imported from Ardevia Forum)

  Hi, we prepared some js code snippet relaying on the following assumption:

  1. dropdown1 and dropdown2 fields are in separate horizontal groups
  2. each of horizontal groups has one more "inner" horizontal group inside it which contains related fields like choice1/choice2 dropdown and date picker fields on screen shots.
  3. dropdown field internal name is choice1/choice2 corresponding to label choice1/choice2.

  Then on each of "inner" horizontal groups(which contains choice1/choice2 related fields) should be put Visible expression with following code for 1st one:

   

  Code:

  var  dropdown1 = [[dropdown1]]; 
  
    if(dropdown1 == 'Choice 1')
    {
      jQuery('span[fieldname="dropdown1"]').closest('.ard-fieldrow').after(jQuery('span[fieldname="choice1"]').closest('.ard-fieldrow').parent().parent());
    }
    if([[dropdown2]] == 'Choice 1')
    {
      jQuery('span[fieldname="dropdown2"]').closest('.ard-fieldrow').after(jQuery('span[fieldname="choice1"]').closest('.ard-fieldrow').parent().parent());
    }
  
  return [[dropdown1]]== 'Choice 1' || [[dropdown2]]== 'Choice 1';
  

   

   

   

  and for second "inner" horizontal group:

   

  Code:

  var  dropdown2 = [[dropdown2]];  
  
    if(dropdown2== 'Choice 2')
    {
      jQuery('span[fieldname="dropdown2"]').closest('.ard-fieldrow').after(jQuery('span[fieldname="choice2"]').closest('.ard-fieldrow').parent().parent());
    }
    if([[dropdown1]]== 'Choice 2')
    {
      jQuery('span[fieldname="dropdown1"]').closest('.ard-fieldrow').after(jQuery('span[fieldname="choice2"]').closest('.ard-fieldrow').parent().parent());
    }
  
  return [[dropdown1]]== 'Choice 2' || [[dropdown2]]== 'Choice 2';
  
  

   

   

  Hope this sample will help you to meet your requirements.
  if it is required further assistance in writing custom JavaScript code or providing your business specific solutions, you can contact us using our Support .

  0

Please sign in to leave a comment.