Conditional rendering of components

Anna WiersemaAnna Wiersema 🛠️ 
edited June 26, 2020 in Ideas
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
0 votes

Implemented · Last Updated


  • edited July 29, 2013
    This would be absolutely awesome!
  • edited June 26, 2020
    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
  • edited February 12, 2014
    Any news on when this functionality will be available? I guess this could be used to show fields depending on record types.
  • edited November 2, 2013
    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
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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.... 
  • edited March 2, 2017
    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: and register for our Deep Dive webinar this Friday! The new release is available now from
  • edited September 1, 2016
    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...
  • edited February 12, 2014
    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

    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() ?
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    Colby.  Go get 4.1.  Tabs can be conditionally rendered.  You don't have to be ungrateful......
  • edited February 12, 2014
    Fantastic! I love it!
  • edited June 18, 2019
    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?
  • edited December 21, 2016
    Peter can you post the XML for your page, perhaps, or a screenshot of your page from the Page Builder?
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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.
  • edited December 21, 2016
    Do you have any Models on your page, and do the Models have any rows in them?
  • edited November 19, 2015
    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.
  • edited March 2, 2017
    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.....
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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. 
  • Barry SchnellBarry Schnell 💎💎
    edited November 18, 2016
    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.

  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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... 

  • edited December 21, 2016
    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.
  • Barry SchnellBarry Schnell 💎💎
    edited November 18, 2016
    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.


  • edited February 18, 2015
    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?
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!