Tag Field Type

A new field type has arrived in the latest CB build release. The tag field! Check out what this field can do below.

The tags field behaviors very similarly to a select field. The user can select from a predefined list of options as specified in backend like any other select field. However, it also accepts custom values on a per-user basis. This means your users can type in a custom value and hit Enter or Comma to add it to the list. That custom value then stores and displays on profile normally. To use this field simply create a new field with the type Tag then begin configuring it as you would any select field type.

The field displays as a tag usage on both edit and profile views. Take a look at edit below.

Values 1, 3, and 5 are predefined while Custom Value was added by my self. Minimum and Maximum Selection validation is also respected for this field if configured. The above would then, by default, display on profile as the following.

This however is optional. The display settings for Multi-Checkbox, Multi-Select, and Tag fields are all the same and can all 3 be displayed like the above. In addition to this you can have a Tag field simply display as a comma separated list if you wanted like a standard Multi-Select. Take a look at the parameters below.

By default you'll notice the tags are a blue color. This is actually just using Bootstrap classes for badges. If you add "badge-danger" for example to the "CSS class of the list" you can override the blue coloring with red coloring (default for danger color). Take a look at the available colors below.

https://getbootstrap.com/docs/4.3/components/badge/#contextual-variations

This is just the beginning of the Tag field. CB Code Field and CB Query Field will both be extended to have a Code Tag and Query Tag field to allow for programmatic output of initial tag options in later releases. Hope this new field can bring some great new usages to your site!



XBOOMX's Avatar
XBOOMX replied the topic: #315118 1 week 4 days ago
Very useful, thanks for the extension.
Facebook Twitter Google LinkedIn