Is there a way to use conditional rendering to: 'once a component renders, have another component disappear'?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I would like to create several tab sets. I would like to use conditional rendering to make one tab set disappear upon rendering the other. Is this possible? If so; how?  Can someone help?
Photo of Tracy Oden

Tracy Oden

  • 704 Points 500 badge 2x thumb
  • hopeful

Posted 4 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Tracy,

Read Zach's response at the end of this post Run code when tab loads

From Zach:

Currently no, the tabshow event is only fired when subsequent tabs are loaded, but not on initial load of the default tab. In the next major release of Skuid, it the tabshow event will be fired for all tab loads, including the load of the default tab. Also, sneak preview, in the next release it will be possible to run a sequence of actions when a tab is first loaded and/or whenever a tab is shown.

Is this what you want?

Regards,
Irvin
(Edited)
Photo of Tracy Oden

Tracy Oden

  • 704 Points 500 badge 2x thumb
Thanks
Photo of Matt Sones

Matt Sones, Champion

  • 31,530 Points 20k badge 2x thumb
Tracy,

If you have two tabsets, this can easily be accomplished with an arbitrary boolean field on a model. Conditionally render based on whether that field is true or not. Whatever way you have to select which tabset should be rendered should toggle that boolean on or off.

You could do something similar with, say, a picklist or a text field if you have more than two tabsets. Set the value of the field (with javascript or the action framework) and have the tabsets reference that field for conditional rendering.

You can use basically any field, just leave it in its own model, designed to have 0 rows, create new and load on pageload. If you make sure that you never save the model, your data won't change in salesforce.
Photo of Tracy Oden

Tracy Oden

  • 704 Points 500 badge 2x thumb
Thanks, I'll try it.