Chip group

The UI component Chip Group is a data iterator which display each data item as a chip. You can add an On Click action and an On Delete Click action to the Chip, which will run in context of a given data item. Each Chip may also be styled using Conditional Styles.

A Chip Group is bound to a Data Source. You may select one or many Chips. The Selected attribute of the items in the Data Source is toggled (true/false) when the user clicks the Chips, and you may use that information further in your logic (e.g. save the user preferences) or for the Conditional Styles.

An example setup of a Chip Group is showcased in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

Settings

Here are some of the properties in Appfarm Create which are custom for a Chip Group:

Data Source

The Data Source to iterate. One chip will be displayed per item in this Data Source (after Filter has been applied).

You may also select a multi-reference property (an Object Class Property with Cardinality Many), and iterate the referenced objects.

Filter / Conditional Filter / Sorting

Apply filters to this Data Source, i.e. to limit which items to display. These filters may be conditional. You may also add sorting of the Chips.

Label

Select the property of the Data Source to display as title for each Chip

Icon / Icon Value

You may select an icon to display for each Chip (optional).

Appearance and Conditional Properties

Control the look-and-feel of these Chips. You may also add conditional properties, for example to have a different Icon given some condition.

Event Handlers

Connect an Action to the Click-event of each chip. By connecting an action to eh On Delete Click event, a Delete-icon will be added to the right-side of the Chip.