Conditional rendering of components

This would be absolutely awesome!

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

Any news on when this functionality will be available? I guess this could be used to show fields depending on record types.

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

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… 

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:

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…

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() ?

Colby.  Go get 4.1.  Tabs can be conditionally rendered.  You don’t have to be ungrateful…

Fantastic! I love it!

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?

Peter can you post the XML for your page, perhaps, or a screenshot of your page from the Page Builder?

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.

Do you have any Models on your page, and do the Models have any rows in them?

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.

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…

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. 

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!

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… 

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.

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!

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?