Our new release enables you to assign custom colors to all the elements of your app. Sometimes you need to take input from your user into account before assigning a color, and to do so, you use a formula.
What are the uses of this feature? You can make the background color of all panels red if, and only if, a key calculated value is out of range. You can make invalid fields really stand out by changing their background colors when they become invalid, complementing the error message displayed by Calcapp’s field validation feature. You could even create a settings panel in your app where you allow your user to change the colors of your app using a drop-down field. (Be sure to make the drop-down field persistent so that your user’s choice is remembered.)
Generating a color using the COLOR function
A color is a number which you typically generate using the new COLOR
formula function. This function accepts as its sole parameter a text
string describing the color and returns that color as a number. For
instance, you can pass the text string “red” to the COLOR function to
have it return the color red: COLOR("red").
In the image below, the user registration form that we built in March has been given a fresh coat of paint. Let’s say that we want its email field to stand out if the user has not filled it out. To ensure that its background is turned yellow in that case, we associate the following formula with its BackgroundColor property:
The ISBLANK formula function returns TRUE if the sole parameter is blank, which in this case means that the email field has not been filled out. That is, if no email address has been entered, the background of the field is made yellow. Otherwise, a blank value is returned, which means that the background color of the panel is inherited and used. Returning a blank value using the BLANK formula function is equivalent to not setting a color in the inspector (in which case the symbol is shown).
If we instead want the field to stand out if the entered email address is invalid, we can use this formula:
The sole parameter to the COLOR formula function can be written in a variety of ways. In fact, it accepts the same input as the name field in the color picker. In other words, these formulas are all valid:
COLOR("red")
COLOR("lime")
COLOR("black")
COLOR("white")
COLOR("antiquewhite")
COLOR("red 500")
COLOR("Deep Purple A700")
COLOR("#f44336")
COLOR("#0091ea")
COLOR("rgb(255, 0, 0)")
COLOR("rgb 255, 0, 0")
COLOR("rgb 100%, 0, 0")
COLOR("hsb 100%, 50%, 100%")
COLOR("hsb 255, 128, 255")
COLOR("hsv 100%, 50%, 100%")
COLOR("hsv 255, 128, 255")
COLOR("hsv 255 128 100%")
COLOR("hsv(255 128 255)")
COLOR("hsl 255 100% 100%")
Forcing a default color using the DEFAULTCOLOR function
By returning a blank value from a formula associated with a color property (through the BLANK formula function), we ask Calcapp to act as though there was no formula to begin with and no color set in the inspector. Calcapp first tries to inherit a color. For instance, if a field has no background color assigned, it tries to use the background color for the group it’s part of. If the group has no background color set either, it tries to use the background color set for the panel that the field and group are part of. Failing that, it tries to use the background color of the preceding panel. Only if all that fails, and there truly is no background color to inherit, does Calcapp resort to using a default color, in this case white.
It is possible to ask Calcapp to skip straight to using a default color using the formula function DEFAULTCOLOR. Let’s say that you have a colorful welcome panel using your company’s brand colors. That probably means that you have set a custom background color and a custom primary color and a custom accent color as well. If you want the rest of your app to use the more subdued default colors, associate those three color properties on the second panel (following the welcome panel) with the following formula:
The remaining 22 new color functions
In addition to the COLOR and DEFAULTCOLOR functions, Calcapp supports 22 additional color-related functions:
BRIGHTEN
DIM
LIGHTEN
DARKEN
SATURATE
DESATURATE
COLORSPIN
RGB
RGBA
HSB
HSBA
HSL
HSLA
RED
GREEN
BLUE
ALPHA
HUE
HSBSATURATION
HSLSATURATION
BRIGHTNESS
LIGHTNESS
These functions are all related to the color models RGB, HSL and HSB (also known as HSV). These color models are typically used by graphic designers to describe and reason about colors. RGB stands for red, green, blue and is the most common way of describing colors, as being made up of varying degrees of red, green and blue. HSB stands for hue, saturation, brightness, HSV stands for hue, saturation, value and, finally, HSL stands for hue, saturation, lightness.
The BRIGHTEN, DIM, LIGHTEN, DARKEN, SATURATE, DESATURATE and COLORSPIN functions do what their names imply and serve as easy-to-use alternatives to the other functions in this category. To brighten a color, for instance, you only need to pass the color and a number between 0 and 100 to the BRIGHTEN function.
The RGB, RGBA, HSB, HSBA, HSL and HSLA functions allow you to create new colors using the color components supported by the various color models. For instance, the RGB function takes three parameters representing varying degrees of red, green and blue that together describe a color. The RED, GREEN, BLUE, ALPHA, HUE, HSBSATURATION, HSLSATURATION, BRIGHTNESS and LIGHTNESS functions do the opposite: they operate on colors and extract their components. RED, for instance, extracts the red color component from a color. To lighten a color using these functions, you could use the HSL function in conjunction with the HUE, HSLSATURATION and LIGHTNESS functions. You get more control over the end result than if you use the LIGHTEN function, but at a cost of greater complexity.
These functions are documented in full in the reference sidebar (which also holds documentation for all the new color properties). To learn more about how you can use them to enhance your app, refer to this tip.