---
title: "Ticketing & Messaging Side Tab"
slug: "app-widget-ticketing-messaging-tab"
updated: 2022-07-14T08:33:22Z
published: 2022-07-14T08:33:22Z
canonical: "developer.comm100.com/app-widget-ticketing-messaging-tab"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.comm100.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ticketing & Messaging Side Tab

The widget appears as a tab in the right side tabs of ticketing & messaging in the agent console. The entry page you configured in the [manifest](/docs/app-manifest) will be displyed in the tab.

Example manifest:

```
{
  "manifestVersion": "2.0",
  "agentConsole": {
    "widgets": {
      "ticketSideTab": {
        "id": "ticket-custom-tab",
        "url": "./index.html",
        "label": "Custom Tab",
        "icon": "./icon.png"
      }
    }
  }
}
```

See [more introduction](/docs/app-manifest).

he following additional actions are available in this widget:

- [Ticket](/docs/app-widget-ticketing-messaging-tab#ticket)

## How to Use API

You must invoke api through SDK, which provides different methods, such as listening to events using the **on** method. Which method is used to call the api? It it desided by the providor.

Learn more for SDK view [here](/docs/guides-app-how-to-use-app-sdk-to-call-api).

## Ticket

### Get current ticket

```
const client = APPClient.init();
const ticket: Ticket = await client.get("agentconsole.ticketing.currentTicket");
```

### Get and set the `subject` of current ticket

```
const client = APPClient.init();
client.get("agentconsole.ticketing.currentTicket.subject");
client.set("agentconsole.ticketing.currentTicket.subject", value);
```

### Get and set the contact of current ticket

```
const client = APPClient.init();
const contact: Contact = await client.get(
  "agentconsole.ticketing.currentTicket.contact"
);
//Only the ID of the contact can be set
client.set("agentconsole.ticketing.currentTicket.contact", value);
//Example
client.set("agentconsole.ticketing.currentTicket.contact", {
  id: 1,
});
```

### Get and set the department assignee of current ticket

```
const client = APPClient.init();
const departmentAssignee: DepartmentAssignee = await client.get(
  "agentconsole.ticketing.currentTicket.departmentAssignee"
);
//Only the ID of the department can be set
client.set("agentconsole.ticketing.currentTicket.departmentAssignee", value);
//Example
client.set("agentconsole.ticketing.currentTicket.departmentAssignee", {
  id: 1,
});
```

### Get and set the agent assignee of current ticket

```
const client = APPClient.init();
const agentAssignee: AgentAssignee = await client.get(
  "agentconsole.ticketing.currentTicket.agentAssignee"
);
//Only the ID of the agent can be set
client.set("agentconsole.ticketing.currentTicket.agentAssignee", value);
//Example
client.set("agentconsole.ticketing.currentTicket.agentAssignee", {
  id: 1,
});
```

### Get and set the `priority` of current ticket

```
const client = APPClient.init();
client.get("agentconsole.ticketing.currentTicket.priority");
// Only one of urgent, high, normal, low can be set
client.set("agentconsole.ticketing.currentTicket.priority", value);
```

### Get and set the `status` of current ticket

```
const client = APPClient.init();
client.get("agentconsole.ticketing.currentTicket.status");
// Only one of new, pendingInternal, pendingExternal, onHold, resolved can be set
client.set("agentconsole.ticketing.currentTicket.status", value);
```

### Get, add and remove the `tags` of current ticket

```
const client = APPClient.init();
client.get("agentconsole.ticketing.currentTicket.tags");
client.do("agentconsole.ticketing.currentTicket.tags.add", value);
client.do("agentconsole.ticketing.currentTicket.tags.remove", value);
//Example
client.do("agentconsole.ticketing.currentTicket.tags.add", {
  id: 1,
});
client.do("agentconsole.ticketing.currentTicket.tags.remove", {
  id: 1,
});
```

### Get the custom field of current ticket by field name

```
const client = APPClient.init();
const field = await client.get("agentconsole.ticketing.currentTicket.customFields", name);
```

If you pass in no params, you get all custom field of current ticket.

```
const client = APPClient.init();
const allFields = await client.get("agentconsole.ticketing.currentTicket.customFields");
```

### Set the custom field of current ticket by field name

```
const client = APPClient.init();
client.set("agentconsole.ticketing.currentTicket.customFields", [
    {
        name: 'Custom FieldId', 
        value: 'test',
    }
]);
```

### Add event listener for ticket property change

```
const client = APPClient.init();
client.on(
  "agentconsole.ticketing.tickets.selected",
  function (event: ChangeEvent) {}
);
client.on(
  "agentconsole.ticketing.currentTicket.subjectChanged",
  function (event: ChangeEvent) {}
);
client.on(
  "agentconsole.ticketing.currentTicket.contactChanged",
  function (event: ChangeEvent) {}
);
client.on(
  "agentconsole.ticketing.currentTicket.departmentAssigneeChanged",
  function (event: ChangeEvent) {}
);
client.on(
  "agentconsole.ticketing.currentTicket.agentAssigneeChanged",
  function (event: ChangeEvent) {}
);
client.on(
  "agentconsole.ticketing.currentTicket.priorityChanged",
  function (event: ChangeEvent) {}
);
client.on(
  "agentconsole.ticketing.currentTicket.statusChanged",
  function (event: ChangeEvent) {}
);
client.on(
  "agentconsole.ticketing.currentTicket.tagsChanged",
  function (event: ChangeEvent) {}
);
client.on(
  "agentconsole.ticketing.currentTicket.customFieldChanged",
  function (event: ChangeEvent) {}
);
```

see [ChangeEvent](/docs/app-widget-ticketing-messaging-tab#basic-data-structure) definition.

### Append text to the input box of current ticket

```
const client = APPClient.init();
client.do("agentconsole.ticketing.currentTicket.reply.append", value);
client.do("agentconsole.ticketing.currentTicket.note.append", value);
```