Ticket Form
Reference
Tickets Table

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.

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

Attributes / Props

You can include attributes in the <ab-tickets-table> tag to customize the tickets table. Most of these configurations are available from the Aidbase Dashboard, but you can override their values here.

Below is a full example of the <ab-tickets-table> tag with all available attributes.

HTML
<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.

AttributeTypeDefault value
themestringlight

Example

HTML
<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.

AttributeTypeDefault value
colorstring#8B5CF6

Example

HTML
<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.

AttributeTypeDefault value
statusstring | string[]N/A
Status
// Status can be a single string or an array of strings with the following values
'OPEN' | 'ASSIGNED' | 'NEED_MORE_INFO' | 'RESOLVED' | 'CLOSED';

Example

HTML
<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.

AttributeTypeDefault value
userIDstringN/A

Example

HTML
<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.

AttributeTypeDefault value
usernamestringN/A

Example

HTML
<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.

AttributeTypeDefault value
emailstringN/A

Example

HTML
<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.

AttributeTypeDefault value
profileImageURLstringN/A

Example

HTML
<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.

AttributeTypeDefault value
referenceIDstringN/A

Example

HTML
<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

HTML
<ab-tickets-table
  id='my-ticket-table'
  ticketFormID='YOUR-TICKET-FORM-ID'
  // ...additional attributes
></ab-tickets-table>
JavaScript
// 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.

CallbackTypeReturn value
onReady()Functionvoid

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.

CallbackTypeReturn value
onError(error: Error)Functionvoid

Example

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

Aidbase Docs © 2024