CSS for template fields

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/t/field-rendering

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}}Requires Attention{{/ui_Landline}}{{^ui_Landline}}Looks Good{{/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.

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:

CSS Classes:

landline-red {
color:red;
font-weight:bold;
}
landline-green {
color:green;
font-weight:bold;
}

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.  

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!

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.

yes I just figured that out thanks to my colleague at work 🙂 It works! Thanks again.