Tickets Table - Reference

Bundle / Package

The tickets table is available through our CDN as a single JavaScript file or through NPM as a React component package.

<script async type="text/javascript" src="https://client.aidbase.ai/tickets-table.ab.js"></script>

Attributes / Props

<ab-tickets-table
  ticketFormID="YOUR-TICKET-FORM-ID"
  theme="dark"
  color="#8B5CF6"
  status="OPEN,ASSIGNED"
  userID="a64427d6"
  username="John Doe"
  email="john@doe.com"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
  referenceID="a738d158892b"
></ab-tickets-table>

Theme

This will render the ticket table in either light or dark mode.
Can be either light or dark.

Example

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" theme="dark"></ab-tickets-table>

Color

This will display the ticket table in a specific color.
Colors are included in the button, in focused states, and other places.

Example

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" color="#8B5CF6"></ab-tickets-table>

Status

This will filter the tickets table to only show tickets with the specified status.

// Status can be a single string or an array of strings with the following values
'OPEN' | 'ASSIGNED' | 'NEED_MORE_INFO' | 'RESOLVED' | 'CLOSED';

Example

<ab-tickets-table
  ticketFormID="YOUR-TICKET-FORM-ID"
  status="OPEN,ASSIGNED,NEED_MORE_INFO"
></ab-tickets-table>

User ID

Provide the User ID of the user who created the tickets.
If this is not provided, the table will be empty.

Additionally, this User ID will be used when the user comments on a ticket.

Example

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" userID="a64427d6"></ab-tickets-table>

If you want to identify the user by a username, you can pass it here.
This username will be used when the user comments on a ticket.

Example

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" username="John Doe"></ab-tickets-table>

Email

If you want to identify the user by an email address, you can pass it here.

Example

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" email="john@doe.com"></ab-tickets-table>

Profile Image URL

If you want to include a profile image for the user, you can pass the URL here. This will be used when the user comments on a ticket.

Example

<ab-tickets-table
  ticketFormID="YOUR-TICKET-FORM-ID"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
></ab-tickets-table>

Reference ID

If you want to include a reference ID for the user, you can pass it here. This will be used when the user comments on a ticket.

Example

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" referenceID="a738d158892b"></ab-tickets-table>

Callbacks

You can pass callbacks to the ticket table to listen to certain events.

Example

<ab-tickets-table
  id='my-ticket-table'
  ticketFormID='YOUR-TICKET-FORM-ID'
  // ...additional attributes
></ab-tickets-table>

// Get the DOM node of the ticket table
const ticketTable = document.getElementById('my-ticket-table');
 
// Assign a callback to the ready event
ticketTable.onReady = () => {
  console.log('Ticket Table is ready!');
};

On Ready

When the DOM element is registered on the page, the ticket table will make an initial request to the Aidbase API to fetch the configuration for the ticket table.

When the configuration is fetched and validated, the ticket table will be ready to use.
The onReady() callback will be called immediately after the ticket table is ready.

Example

ticketTable.onReady = () => {
  console.log('Ticket Table is ready!');
};

On Error

If the ticket table encounters an error during the process described above, the onError() callback will be called.

Example

ticketTable.onError = (error) => {
  console.error('Something went wrong: ' + error);
};