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

he following additional actions are available in this widget:

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

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 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);