Advanced Дustomization: Custom styling
Step 1: add a mashup
This step should be performed only once
The mashup gives you the ability to set up an unlimited amount of elements. If you already have it, skip this step and go directly to Step 2
Go to Settings -> Mashups -> Add New Mashup.
Give it any name, keep the default footerplaceholder
.
Copy the code from below and save the mashup.
tau.mashups
.addDependency('react')
.addDependency('tau/api/layout-renderer/v1/registerReactComponent')
.addMashup(function(React, registerReactComponent) {
registerReactComponent({
type: 'cssStyle',
component: function(props) {
var style = props.config && props.config.style
if (!style) {
return null;
}
return React.createElement('style', {dangerouslySetInnerHTML: {__html: style}});
}
})
});

Step 2: find classes of the element that you'd like to color
You can find the class of the element in browser's console in Elements
tab.
Usually browser's console can be opened by pressing F12
However, it can vary depending on your browser and OS. Here are a couple of articles on different browsers:
- Chrome https://developers.google.com/web/tools/chrome-devtools/open
- Firefox https://developer.mozilla.org/en-US/docs/Tools/Browser_Console
- Safari https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
- Edge https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console
For example, if we'd like to make ID of the entities bold, we'll inspect ID element and find it's classes: entity-id
and i-role-entity-id

Step 3: add a style for this element to the template
Now we can take the classes that we got at Step 2 and create a style element that we'll add to the template. There is a dot added before the name of each class (e.g. i-role-entity-id
becomes .i-role-entity-id
). If the element had several classes (like we do here), there is no space added between them: .entity-id.i-role-entity-id
.
After the classes we have the styling in curly brackets. As we want to make ID bold, we're using font-weight: bold
style. More styles can be found at https://www.w3schools.com/css/default.asp
Since we want to make sure to override the default styling, we're adding !important
in the end of the style.
{
"type": "cssStyle",
"style": ".entity-id.i-role-entity-id {font-weight: bold !important}"
}


Example: Color Health drop-down custom field depending on its value
Let's now color Health drop-down custom field depending on its value. We already have the mashup installed (if not - see Step 1 of this article), so all we need to create the style is not now the class of Health custom field:

Here we're looking for two values:
layout-customfield-container-health
- class for the custom fieldlayout-field_editable_true
- the part that we actually want to color (we don't want to change the color for the label Health)
Since here it's not two classes of the same element, but rather a class of a parent element and a class of a child element, there will be a space when we combine them:
.layout-customfield-container-health .layout-field_editable_true
We're also adding visibilityConfig
here, because we need to specify different styles for different values of the custom field.
{
"type": "cssStyle",
"style": ".layout-customfield-container-health .layout-field_editable_true {color: red !important; background-color: rgb(358, 179, 179) !important;}",
"visibilityConfig": {
"entityQuerySelector": "health=='Red'"
}
},
{
"type": "cssStyle",
"style": ".layout-customfield-container-health .layout-field_editable_true {color: green !important; background-color: rgb(179, 268, 179) !important;}",
"visibilityConfig": {
"entityQuerySelector": "health=='Green'"
}
},
{
"type": "cssStyle",
"style": ".layout-customfield-container-health .layout-field_editable_true {color: red !important; background-color: yellow !important;}",
"visibilityConfig": {
"entityQuerySelector": "health=='Amber'"
}
}


Updated almost 2 years ago