Great Combo between multi-select Choice component and Custom ai component

Marc-Olivier
Tue, 25 Feb 2025 15:59:17 +0000
Project Showcase

Hey Glide Community!

Discover a powerful and simple combination of the classic multi-select Choice component and the Custom AI component.

How It Works:

1. Choice Component:

Data Fields:

The Choice component displays all options from the options table.

It saves the selected option IDs as a comma-separated string in the choiceValues column.

Choice Component Data fields:

2. Custom AI Component:

Custom AI Component Data fields:

Functionality:

The Custom AI component displays labels as tags from the optionArray.

The optionArray is structured as follows:

[
  {"id":"0hMpgsHIRyu.zstJUSq.wQ","name":"Okra","genus":"Abelmoschus","species":"esculentus"},
  {"id":"KxlHv3oZSnGYvISfSuNREg","name":"Chenille Copperleaf","genus":"Acalypha","species":"hispida"},
  ...
]

It shows tags for options whose IDs are included in choiceValues.

Each tag includes a cross button to remove the corresponding ID from choiceValues.

Custom AI Prompt:

optionsArray is a string array structured like this:
[
  {"id":"0hMpgsHIRyu.zstJUSq.wQ","name":"Okra","genus":"Abelmoschus","species":"esculentus"},
  {"id":"KxlHv3oZSnGYvISfSuNREg","name":"Chenille Copperleaf","genus":"Acalypha","species":"hispida"},
  ...
]
choiceValues is a comma-separated string of IDs. Show in a tag, with a cross button, the label for which the ID is included in choiceValues. When the user clicks on the button, remove the ID from choiceValues.

Try it out: https://choice-customcomponent.glide.page/

7 posts - 4 participants