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.
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.
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" }
See also
icon, which returns an icon (icon overview).
color, which returns a color.
Do you want to dive deeper into the topic? Take a look at the corresponding part of our video tutorial.
Last updated
