Conditional Rendering of fields in tabs.

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
Hi All, Is there any way we can show fields in different tab based on certain condition on first tab. our client wants to display 10 fields in different tab based on a picklist value on first tab when the record is not saved, and once we fill detail in the secod tab we would like to save the record. Please let me know if there is any way to render the tab based on the picklist value.
Photo of Rahul

Rahul

  • 542 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Rahul. 

It looks like what you are asking for is exactly what our conditional rendering feature allows. 

On most components (fields, sections, tabs, etc) you can set conditions for display.  You can use picklist values from one field to control the display of anything on the page.  This sort of rendering works client side,  so when you change the picklist value - the rendering will update immediately. 

More information is found here: http://help.skuidify.com/m/supercharge-your-ui/l/173514-conditional-rendering-display-of-page-compon...

If I've misunderstood your question please let me know. 
Photo of Rahul

Rahul

  • 542 Points 500 badge 2x thumb
Hi Rob, thanks for your response.

Let me explain you our requirement:
Client has 10 field which should be displayed on selection of a particular value from Picklist, Since Displaying 10 fields on a page Popup will not be good, they are asking us to enable a tab when we select the particualr value from picklist. So for eg : - If in First tab Picklist value in the Request are A,B,C,D and user selects A from picklist then the second tab should be enabled, but if value selected other then the A then tab should be either disabled or hided from the page. Enabling and disabling should happen without saving the record, because all the 10 fields values needs to be saved in the record.

I hope i have tried to make you clear for the requirement, let me know if any possible solution you  could suggest.

Regards,
Rahul
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Rahul,

You can use conditional rendering, you just need to force a render of the tabset when the value of your picklist is changed.

Set up an action on your picklist fields model to run when a field is updated, and specify your picklist. The action should run a online javascript snippet like this:

skuid.$C('MyTabsetUniqueId').render();
I think that should work for you.
(Edited)
Photo of Rimali Gurav

Rimali Gurav

  • 272 Points 250 badge 2x thumb
Hi Matt ,

I tried the solution you provided but in our case we need to specify picklist field only equals to particular value. And the action you mentioned will work for anytime the picklist field updated with any value. I tried putting model condition and action as well but no success.

Please let me know if I am missing anything.

Thanks,
Rimali
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Rimali,

You need to use Conditional Rendering on your tabs.