Ticket Form - Intercept the ticket form submission

How it works

The <ab-create-ticket> element exposes a method onCreatTicket().
This is a special callback function that acts as a middleware for the Ticket Form.

This function is called when the user submits the Ticket Form.
All values from the form are provided in the values argument which is a list of FieldValue objects.

This function should return a list of FieldValue objects.
These returned values will be shipped to the Aidbase API and stored as a new Ticket.

The FieldValue object uses the below interface.

The FieldValue interface

interface FieldValue {
  id: string;
  name?: string;
  description?: string;
  type?: FieldType;
  value: string | string[] | number | boolean | Date | File[] | FieldOption[] | null;
  error?: string;
}
 
interface FieldOption {
  value: string;
  label: string;
  isSelected?: boolean;
}

Example

Let's say we have a form containing a number field.
We use this form to collect the budget of the user.

For the sake of the example, let's say we want to convert this budget from dollars to cents before storing the ticket.

We can do this by intercepting the form submission and modifying the value of that field.

ticketform.onCreateTicket = (values) => {
  // For the sake of the example, let's say
  // this field is a number field asking for a dollar amount
  const fieldID = 'uc8xt';
 
  const newFieldValues = values.map((fieldValue) => {
    if (fieldValue.id === fieldID) {
      return {
        ...fieldValue,
 
        // In this example we want to display the amount in cents.
        // So we're multiplying the value by 100 to convert it from dollars to cents
        value: fieldValue.value * 100,
      };
    }
 
    return fieldValue;
  });
 
  return newFieldValues;
};