Color and Decimal Fields

Print

More field types have arrived! This time it's Color and Decimal field types. These new field types potentially bring all kinds of new use cases for your sites. We've also made some HTML5 input type changes to better improve some fields usability across devices. Find out more below!

First up is the new Decimal field type. This is similar to the Integer field type except it's capable of storing decimal places. So for example 1.00 added to an integer field would just store has 1, but for a decimal field it would store as 1.00. Take a look below.

This may seam like a normal integer field, but the validation and storage will both allow for decimal places. You can limit how many decimal places using the new Step validation parameter below. So for example if you only want 2 decimal places you'd have something like 0.01 and if you wanted 3 you'd use 0.001, etc..

In addition to this you've display formatting options to control how this field will display as a number on the users profile. You can optionally specify a thousands and decimal separator with both supporting language strings for localized formats. You'll find these new parameters under the Parameters > Display tab of your decimal fields as shown below.

The above would give the following display for example.

It doesn't stop there. The Decimal field type and Integer field type are both HTML5 number fields. This means it supports browser based number type functionality using up/down increment arrows. How much it increments on up/down is based off the Step parameter mentioned above. Also the thousands separator is also available to Integer fields. For example on Chrome the number field is displayed as follows.

Next up is the new color field type. This is mostly just a fun field type to try and use in more creative ways. For example you could substitute the color field into some inline CSS in a Custom HTML field or within a fields layout to allow users to colorize parts of their profile. You could also use it in CSS loaded by CB Auto Actions. It will strictly validate that the value supplied is a web safe color. The below is how the color field for example is displayed on profile edit in Chrome; note that usage varies by browser.

If you display the field on the users profile it is then displayed as a helpful color block with quick select of the color code as follows.

Clicking on the color block will automatically select the color code for fast copy and paste. Some additional minor improvements have also been made. For example email fields are now correctly HTML5 email type instead of text. The validation parameters for text fields have also been cleaned up to be easier to understand with an option for a success message instead of only failed message. There's also a few more default validation rules added to match our new Input Masks feature.