styled

To convert a given string to a styled object

With this function, you can style a formula field with colors (for example the background) but also with an additional icon.

Styling a value will always convert it to the data type styled.

The function can be quite handy, for example, to display a number in red if it's below 0 or in green if it's above 0.

  Add empty "" for a parameter and Ninox will add the default value. If you don't add a color for the font color, Ninox amends the font color automatically to black or white depending on the background color to give a good contrast.

Syntax

styled(string, string)

styled(string, string, string)

styled(string, string, string, string)

styled(string, color)

styled(string, color, icon)

styled(string, color, color, icon)

styled(string, JSON)

Return

styled

Examples

styled(myText, backgroundColor) To convert a given string to a styled object with a given background color.

styled(myText, backgroundColor, icon) To convert a given string to a styled object with a given background color and icon as text.

styled(myText, backgroundColor, fontColor, icon) To convert a given string to a styled object with a given background, font color, and icon as text.

styled("Warning!", "", "red", "warn")

Result: Warning! (with red font color and the warning icon to the left of the text)

styled(myText, backgroundColor) To convert a given string to a styled object with given background color as text.

styled(myText, backgroundColor, icon) To convert a given string to a styled object with a given background color and icon.

styled(myText, backgroundColor, fontColor, icon) To convert a given string to a styled object with a given background color, font color, and icon.

styled("Warning!", Background, 'Font-Color', Icon)

Result: Warning!

(with the selected background and font colors in the color fields Background"and Font-Color, and the selected icon of the field Icon to the left of the text)

styled(myText, JSON) To convert a given string to a styled object with a JSON that consists of the following key-value pairs:

{ color: "myColor", background: "myColor2", icon: "iconName" }

  Do you want to dive deeper into the topic? Take a look at the corresponding part of our video tutorial.

See also

icon which returns an icon (icon overview).

color which returns a color.