Is there a way to conditionally format Tab headers?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I have a tab set with a dozen or so left side stacked tabs.  Each tab shows a series of field editor options.  I would like the user to be able to quickly see which tabs have fields that have been utilized.  What would the mechanism be for editing the tab header (color OR text) when a specific field on the tab is utilized?
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
There are a couple of possibilities here. 

1. The tab name field is a template and can take merged data.   Our merge syntax allows for some conditionality,  so you can use it to show text if a field is populated.  The syntax would look like this:

{{#FieldName}}Text to Show on Presense{{/FieldName}}{{^FieldName}}Text to Show on Absense{{/FieldName}}

Adding "#" to the front of the field name makes it start a conditional block.  IE, If this field is present do this...
Adding "^" to the front makes it start an "absence" condition. IE,  if field is not present do this....
In both cases you need to close the conditional block with "/"
The Text to show could also be a Merge Field.

2. Using field data to adjust the formatting of the tab is also a possibility.  But will require some Javascript and CSS customization. 

Here is an example we published previously that affects tab row.  In your case the CSS would have to affect the tab formatting. 

https://community.skuidify.com/skuid/topics/conditional_formatting_based_on_field_value

Between one or the other,  I think you should be able to do what you are attempting. 

 
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
Just so I am clear, the tab name field is Tab Label?  Also, when you say present/absent, do you mean the fields exist or they are populated?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Yes - it is the Tab Label property. 

The conditional population is based on values being populated in the field.  
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
I added the following to the tab label for the first tab in the tab set:

{{#Backing_Material__c}}Backing Yes{{/Backing_Material__c}}{{^Backing_Material__c}}Backing No{{/Backing_Material__c}}

Based on this, if the field in the tab called Backing_Material__c is populated, then the tab will be called "Backing Yes".  If it is blank, the the tab will be called "Backing No".  Is this correct?

For some reason the tab is always showing "Backing No" regardless of whether the Backing_Material__c field is populated...

Am I missing something?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Ok,  My bad.  Tabsets don't know what model you are want to use to merge data with, so you have to youse our glboal model data merge syntax here.  I should have remembered this from the beginning.  Instead of just using   {{#Backing_Material__c}},   you will need to use {{#$Model.<<ModelName>>.data.0.Backing_Material__c}}

Unfortunately that will make you builder view of the tabs look pretty messy...  But that's not the point. 

Also - the Tabset is not wired up to listen for immediate changes to your model data, and so will only change when the page is refreshed.  So when {{#Backing_Material__c}} data is added, the tab name will not immediately switch to "Yes"...    Sorry. 
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
awesome!  works nicely... thanks Rob!  Quickly, is there a way to refresh the page from an Action item?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Redirect is one of the available actions.  You just have to pass it the correct url,  which can generally be constructed by merging the record ID into the redirect url in the appropriate places.