How do I fields based on a value in another field

For a form using the below example if a user selects "football" then I would like fields 2 and 3 display (fields 4 and 5 would be hidden). If volleyball is selected then fields 4 and 5 display(fields 2 and 3 would be hidden)

1-Select Sport (Football/Volleyball)

2-Have you ever had a concussion (yes/no)

3-If you did have a concussion or showed symptoms of a concussion do you agree to report your symptoms to a coach (yes/no)

4-Have you ever broken your hip (yes/no)

5-Fill in the amount of traveling tournaments you can participate in during 2017

Page 1 / 1

you can easily achieve this formatting rules.

but without knowing of what are are types of single controls no one can provide exact syntax.

What do you mean "what are types of single controls"..

Are they choices or lookups?

are they single or multiselect?

are they rendered as dropdowns, radios, buttons?

It is a choice field.

Just for further clarification, they would select a choice field (sport in the above example). When that choice field is selected than I would like to hide other fields which may be choice fields or single line fields. There are no look-ups or mutiselect fields.

Regarding your rendering question - how would I check this ? When I go to the form I see Control Settings - Choice for the field I want to evaluate, but nothing regarding dropdown/radio/buttons. To me visually it look likes a normal drop-down.

Hi David,

As Marian has pointed out, it depends on what types of controls/columns you have used to pose your questions. I've got a few examples for you below using a choice field for the sporting type and a yes/no field for your questions. You'll note that yes/no actually renders the answer as true/false rather that yes/no whereas the choice field just uses the text.

To hide the football questions when the user has selected volleyball, you only need one rule:

To hide the volleyball questions, you need a very similar rule:

but you can go a step further and only show the symptoms question only if they have ticked the concussion box. Note that both rules have been applied to this field (and label).

Hope that helps.

Cheers,

Chris

yeah, exactly.

I 'd just add, that if you need to apply formatting rules to several controls it's a good practice to place all such controls into a common panel and apply rule to the panel instead of single controls. this makes better/more reliable experience with controls resizing/repositioning as single rules are applied

and reg.

Regarding your rendering question - how would I check this ?

it's one of control's settings

Thanks for the tip on formatting as that will impact my form. Obviously I can Google, but if you knew of a helpful link on how to create the panel/provide more background that would be ideal.

Try this post David:

Hi All,

Not sure if this helps, but if I use this approach when creating forms as above.

Firstly I created the forms list as per below.

The column types "Choice" are changed to radio buttons.

I then add the below CSS to the below the current custom CSS

/* Workflow designer override for Nintex Workflow styling */
#uiDesignerSurface inputptype=text], #uiDesignerSurface inputptype=password], #uiDesignerSurface .ms-inputBox, #uiDesignerSurface select, #uiDesignerSurface textarea, #uiDesignerSurface .ms-inputBoxActive, #uiDesignerSurface .ms-inputBoxActive.ms-inputBox, #uiDesignerSurface button, #uiDesignerSurface .sp-peoplepicker-topLevel, #uiDesignerSurface .sp-peoplepicker-topLevelDisabled, #uiDesignerSurface .sp-peoplepicker-autoFillContainer
{
background-color: rgb(253, 253, 253) !important;
}.customtab {float: right; }
.customtab tr {float:right; }
.customtab label {background: #D8D8D8;
                  padding: 5px 15px 5px 15px;
                  border: none;
                  margin-left: 3px;
                  margin-right: 3px;
                  position: relative;
                  border-radius:5px 5px 5px 5px;
                  left: 3px;
                  cursor:pointer;
                  border-bottom:none;
                  text-align:center;
                  color: #0072C6;}
.customtab label:hover {background: #0072C6;color:#D8D8D8;}
.customtab a{color: #0072C6;text-decoration: none;}
.customtab a:hover {color: #D8D8D8;} .customtab etype=radio] {display: none; }
                   Ctype=radio]:checked ~ label {background: #0072C6;
                                border-bottom: 1px solid white;
                                z-index: 2;
                                color: #D8D8D8;}