CSS for template fields

  • 1
  • Question
  • Updated 1 year ago
  • Answered
I have a field editor with 30 read only template fields which can have only two values - "Requires Attention" or "Looks Good".

I want all the template fields with "Requires Attention" to be displayed in a red font and the template fields with "Looks Good" in a green font.

I am currently doing this through html within the template field but I hate that approach since I am having to do it 30 times. Is there an easier way to do this? 
Photo of Ashwat

Ashwat

  • 768 Points 500 badge 2x thumb

Posted 1 year ago

  • 1
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
Minimally you should use a class to reference CSS to drive the styling.  You can do this dynamically using merge syntax as well.  Here's an example that we use to dynamically set colors on a template field (check out the section with the CSS example).  In this case our templates had the same general CSS and we simply swap out the color in the element's style tag.


https://community.skuid.com/skuid/topics/field-rendering
Photo of Ashwat

Ashwat

  • 768 Points 500 badge 2x thumb
Hi John. Thanks for answering. If I am understanding your solution correctly (i am poor in understanding CSS), I think you are advising me to use that HTML tag on my template field.

If that is the case, then I am already doing that. I have 30 template fields in my field editor and for each of the fields, I have this as the template

{{#ui_Landline}}<font style="color:red;font-weight:bold">Requires Attention</font>{{/ui_Landline}}{{^ui_Landline}}<font style="color:green;font-weight:bold">Looks Good</font>{{/ui_Landline}}

where ui_Landline is a formula field that returns true or false.

I have 30 fields similar to that in my field editor and the only thing that changes for each of those fields is the formula field that I am referencing.

Now instead of doing this for every field, I was wondering if I could do something at the field-editor level or the page level css or javascript, where if it sees "Require Attention" then its in red font, and "Looks Good" is in green font.
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
CSS works by centralizing the style definition (the attribute in your font tags) into a standard class library.  The best practice is to house your CSS in a static resource, but for getting up and running, you can just add an inline css resource on your skuid page.  This is a lot easier to adjust when designing the page.

There are a lot of approaches possible, but the way I would set it up based on your scenario is to have your formula return the name of a class and add a second formula field to return the text you would like to display.  Note that the formulas can be either salesforce formula fields or skuid UI only fields.  Personally I like to keep business data and logic out of code, so I generally try to push logic into the data model and keep specific business language out of html and script.  Then you can simplify your templates to something like this:

<div class="{{ui_Landline}}">{{ui_Landline_text}}</div>

CSS Classes:

landline-red {
     color:red;
     font-weight:bold;
}
landline-green {
     color:green;
     font-weight:bold;
}
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
One other detail to consider.  You'll probably be better off with a generalized class that you can re-use across many use cases (i.e highlight-red, highlight-green).  Landline is probably a very specific one and I would imagine you'll use the color toggling in other scenarios.  
Photo of Ashwat

Ashwat

  • 768 Points 500 badge 2x thumb
That sounds great.. I think I have a much better understanding of it now.. I'll give it a shot and let you know if it worked. Thanks a lot again!
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
Should mention that I made a typo in the example.  In your CSS definition you need to prepend the class with a dot, so it should read .landline-red

When you reference the class in html, leave the dot off.
Photo of Ashwat

Ashwat

  • 768 Points 500 badge 2x thumb
yes I just figured that out thanks to my colleague at work :-) It works! Thanks again.