How to create tab controls in the new responsive design forms ?

---

@sgrams wrote:

Use a Choice field with radio buttons. Set up rules for your form elements that will hide whenever a specific button is NOT selected (e.g. choiceField!="Option 1").

 

So, for example: if I have three tabs I want to set up named "General", "Details", and "Estimates", then:

1. Create a Choice field with radio buttons and name it something like choiceTabs.


2. Set the choice values to: General,Details,Estimates


3. Set the default value to General for first load.


4. Click Save and return to your form designer.


5. CTRL+Click to highlight all the fields you want to show when the "General" radio button is selected.


6. With those form elements selected, click "Add Rule" at the top.


7. Name your rule "Hide General".


8. In the Formula, double-click choiceTabs from the Named Control section on the right.


9. Double click the != icon in the Operators section.


10. Type "General". Your formula should now say choiceTabs!="General"


11. Click Save and return to your form designer.


12. Still in the rules pane on the right for all of your selected fields, under "Then", select "Hide"


13. Repeat these steps for the other tabs you want on your form (good idea to Save often so you don't lose progress)

Couple things to note:

• The formula value for your rules is case sensitive. If you've entered a choice option of "oPtIoN1", you will need to type "oPtIoN1" in your formula.


• The options you list in the choice field settings are separated by commas BUT do not add a space after the comma. The form will look for a literal " your value" rather than "your value" if you do.


• The form will not set the radio button back to your default on load. The form will load with whatever the previous selected radio button was when you last saved. I haven't figured out how to make it reset to the first radio button on load yet.


• If you forgot to apply the rule to a form element, click "View All Rules" in your rule pane on the right and open the rule you want to apply to the field. Highlight the field in the form and then in the three-dot dropdown menu of your rule, click "Add to Selected Control".

---

Update: I figured out how to set the radio buttons back to the one you want selected by default on form load.

1. Create a new Choice column in your Sharepoint list and give it the same choice values in the example above.


2. Open the Nintex Form designer and replace the generic choice field from example above with this new column.


3. Make sure you apply all the same settings and change your rules to point to this field now.


4. In your Save/Submit button, under "Causes Validation", select "Yes". In "Connected To", select the new choice column you created.


5. In "Returned Value", enter the radio button option you want to default to on form load. 

The value you enter into Returned Value will be sent back and saved to the new column you created. Thus, every time you open the form, that radio button will be the one selected by default.

Be sure in the tab control settings under Advanced, set Control Mode to Edit.

Were you able to get it to look more like Tabs and not radio buttons?