Ticket Form - Providing options for the Select and Multiselect field types

How it works

From the Aidbase Dashboard we can create a Select or Multiselect field and provide a list of options for the user to choose from. However, sometimes it is necessary to provide these options dynamically.

The <ab-create-ticket> element provides an options property for this purpose.

The options property expects a map of Record<string, FieldOption[]> where the key is the field ID and the value is a list of FieldOption objects.

The FieldOption object uses the below interface.

The FieldOption interface

interface FieldOption {
  value: string;
  label: string;
  isSelected?: boolean;
}

Example

Let's say we have a form containing a Select field.
We want to provide a list of tags that are specific to this user.

We can do this by providing the options to the <ab-create-ticket> element.

// This function will return a list of strings
const latestTagsFromUser = getLatestTagsFromUser();
 
ticketform.options = {
  yvgmh: latestTagsFromUser.map((tag) => ({
    value: tag,
    label: tag,
  })),
};

In this example, yvgmh is the field ID of the Select field.