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 field
• layout-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'"
            }
          }