Conditional rendering of components

  • 10
  • Idea
  • Updated 4 years ago
  • Implemented
Many clients have requested the ability to have different components (or parts of components, for instance Fields or Sections within a Field Editor) rendered based on different "render conditions". These "render conditions" would ideally be reevaluated when the values they depend on change - for instance, you might want to conditionally display a table component based on whether a field in the first data row of a Model has a certain value - so if this row's field's value changes, the table's "render conditions" should be reprocessed.

view this issue on github.com/skuidify.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
  • feeling like this would be awesome!

Posted 6 years ago

  • 10
Photo of Netanel Moshel

Netanel Moshel

  • 172 Points 100 badge 2x thumb
This would be absolutely awesome!
Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb
Anna,
As long as you're at it, you might as well add other things that can happen on a page when certain values change... show/hide enable/disable rewrite labels
Photo of René Boverhuis

René Boverhuis

  • 64 Points
Any news on when this functionality will be available?
I guess this could be used to show fields depending on record types.
Photo of Thaddeus Ward

Thaddeus Ward

  • 736 Points 500 badge 2x thumb
Things that would be great to control conditionally:
* Display of tabs
* Display of components
* Fields within components
* Graphics (turn on/off, change depending on data conditions)
* Steps in wizards
* admin blood pressure
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thaddeus that is a great list!  We also think that you should be able to conditionally control things like  pizza delivery,  beer in fridge,  customer satisfaction,  dreamforce scheduling,  etc.  Let's aim high while were asking.... 
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
This has been added in the Spring 14 release of Skuid! Woohoo!

We have added the ability to do true Conditional Rendering of Components based on data in your Models.

"Components" here refers to top-level Components like Field Editors, Tables, Calendars, etc., as well as select sub-components such as Columns, Sections, and Fields in a Field Editor, Tabs in a TabSet, Buttons in a Page Title, Row Actions in Tables, and Step Actions in Wizards.

This functionality is accessible through a new "Rendering" property category in these Components' property editors.

You define "Render Conditions" on these components based on data in your Models, which, if they are ALL met, your Component will be rendered (there are also options to provide for contingencies, such as, what if there's no data row to consider, and if so you can choose to always render or always not render).

For instance, you might want to:


  • only render all Phone Number fields, or a Table of Phone Numbers, if a Contact's DoNotCall = false.

  • only show a Table of Line Items on an Opportunity record if the Pricebook has been chosen.

  • show different Row Action Popups based on the record type of the current row

  • only show a "Submit Payment" button in a Page Title if all required fields have been entered

  • only show certain Opportunity tabs based on what stage the Opportunity is in


  • See this tutorial for more information:

    http://help.skuidify.com/s/tutorials/...

    and register for our Deep Dive webinar this Friday!

    The new release is available now from www.skuidify.com/SkuidReleases
Photo of Colby

Colby

  • 614 Points 500 badge 2x thumb
This reply was created from a merged topic originally titled
Conditional Rendering.


I just downloaded 3.21 and I love the new conditional rendering feature! It's going to really help our organization out and we'll be using it a lot.

Not to sound ungrateful or anything, but it would be really cool if tabs in a tab set could be conditionally rendered as well...
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Colby.  Go get 4.1.  Tabs can be conditionally rendered.  You don't have to be ungrateful......
Photo of Colby

Colby

  • 614 Points 500 badge 2x thumb
Fantastic! I love it!
Photo of Netanel Moshel

Netanel Moshel

  • 172 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
Real Conditional Checkbox display.


Hi All

I'm trying to conditionally display fields based on a checkbox, per the documentation here
http://help.skuidify.com/s/tutorials/...

The only issue is, I'd like to completely hide the appropriate "section" if the checkbox is not selected.

Even if I put no value under the true argument, the field label together with the empty space shows up. Doesnt look good and is also a bit confusing...

Can this be done using a custom skuid component and a bit of jquery .show() and hide() ?
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
So, to test this out, I've set up two tabs. One that renders when "if no rows in model, skip and render", and another with the opposite, "if no rows then skip and don't render". However, neither tab shows up. By logic, either one or the other should be appearing. What am I missing?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Peter can you post the XML for your page, perhaps, or a screenshot of your page from the Page Builder?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Peter, we are still working out the details and polishing the edges of this capability.  I was able to reproduce the scenario you mention when I did not add field, operator and content information.   You would expect this still to be a fair evaluation, if nothing at all is in the model, what do you care about the specific field...

But when I did add field information (somthing like "If Id != null"  to go along with the "if blank do not render"  and "If Id = null" to go with the "if blank do not render")  it worked like I expected.

I have a bunch of places where I need to add this to tables.   If no rows I will hide the table, and expose a  page title with an error message and a redirect button to add new records....  

And I will pass along the results of our little test to the dev team so they can make this all more awesome.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Do you have any Models on your page, and do the Models have any rows in them?
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
I've tried playing with the additional "if id = null" field options on pages like Rob described, but can't figure it out. I've been playing with this on an existing page that's already in use, so I know there are models pulling up records, but I'm sure we could create a very simple page to test more easily.
Photo of Adrian Lumley

Adrian Lumley

  • 80 Points 75 badge 2x thumb
I'm having a hard time time a similar scenario for a table. I'm trying to display the table only if the RecordTypeId = "some value" but when I preview the page with a record that should have the related Id, it doesn't appear. Any thoughts?
Photo of Netanel Moshel

Netanel Moshel

  • 172 Points 100 badge 2x thumb
Thanks guys so much, this is absolutely awesome!
You're the only reason I'm still using salesforce!

(It would be cool if you could also conditionally render fields in a table based on a filter! ) - just saying.....
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
We're glad your happy (and still using Salesforce).    There are certainly some areas we still need to expose conditional rendering into.  Table columns is one of them. 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Would love to see conditional rendering of panels included in a future release.  We have a situation were a panel contains information that only needs to appear on "Edit" pages and not "new" pages.  Putting this data in a panel and conditionally rendering the panel itself (not the entire panel set) would be ideal.  The workaround currently is to use jquery to show/hide as appropriate.

Thanks!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
When I've been in this situation I simply hide each of the contents of the panel?  Maybe it includes a field editor and a page title.  You would need to write 2 conditional rendering filter statements - which still seems easier than going the custom jQuery route... 

Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
The problem is that the Panel itself doesn't get hidden, so there's a big empty column with a lot of white space in it. But otherwise conditionally rendering the contents of the Panel is another workaround, particularly if its the far-right Panel that's being dealt with.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Rob -

Thanks for the reply.  What I've found is that the conditional rendering of the panel contents works as you describe.  Unfortunately, I left out some details in my previous post that would help explain why the jquery route currently makes sense for us.

if the panel itself is a fixed width panel (e.g. the non-fluid portion of a fluid with sidebars panelset) then the margin-right/left on the fluid portion forces that panel to not take up 100% of the width.  If nothing is in the panel (using existing conditional rendering feature), I want the remaining panelset contents to treat it as if there was not another panel at all.  The desired output of the html that is rendered would take in to account non-rendered panels (assuming conditional rendering was added at that level) such that the fluid panel would set margin-right/left=0 if the non-fluid panel wasn't rendered.  

I realize the situation just got a little more complicated but hope this helps better explain what I'm looking for.

Thanks!