How to customize the Tickets module for the ASAP React Native SDK?

Tickets Module

Update Ticket Configurations

To update the ticket configurations use the following code snippet:

import {ZohoDeskPortalTicket} from '@zohocorp/zohodesk-portal-ticket';
//This is the default value for this configuration
ZohoDeskPortalTicket.setConfiguration({
isReplyAllowed: true,
isCommentAllowed: true,
isTicketUpdateAllowed: true,
isCommentEditAllowed: true,
isCommentDeleteAllowed: true,
isAddTicketAllowed: true,
isCustomerHappinessThreadAllowed: true,
isTicketChannelAllowed: true,
isTicketPropertiesAllowed: true,
disableTicketDetailSearch: false
})

By default, all the configurations are enabled. If any of the functionalities need to be disabled, the above can be used to disable some specific functionalities.

Method name	Functions	Default enabled/disabled status
isReplyAllowed	To allow reply the reply option	Enabled
isCommentAllowed	To allow the comment option	Enabled
isTicketUpdateAllowed	To allow ticket update	Enabled
isCommentEditAllowed	To allow the comment option	Enabled
isAddTicketAllowed	To allow add ticket option	Enabled
isCustomerHappinessThreadAllowed	To allow customer happiness thread	Enabled
isTicketChannelAllowed	To allow ticket channel	Enabled
isTicketPropertiesAllowed	To Show ticket properties	Enabled
disableTicketDetailSearch	To disable the ticket screen search	Disabled

GetCallbackOnCreate

In case the callback needs to be received when users submit tickets, use the following code snippet:

import {ZohoDeskPortalSubmitTicket} from '@zohocorp/zohodesk-portal-ticket';
ZohoDeskPortalSubmitTicket.getCallbackOnCreate((success)=>{
console.log(success)
},(error)=>{
console.log(error)
});

Get Departments

Add the following code snippet to fetch the list of Departments available in the Help Center.

import {ZohoDeskPortalSDK} from '@zohocorp/zohodesk-portal-apikit'

ZohoDeskPortalSDK.getDepartments((success)=>{
console.log(success)
},(error) => {
console.log(error)
}

Get Layouts

Add the following code snippet to fetch the list of Layouts available in the Help-center:

import {ZohoDeskPortalSDK} from '@zohocorp/zohodesk-portal-apikit'
var QueryParams = {
'departmentId': 'your_departmentId',
'limit': '1'
}
ZohoDeskPortalSDK.getLayouts(QueryParams,
(success) => {
console.log(success);
},
(error) => {
console.log(error);
}
)

Query Params

departmentId - ID of the department in which the layouts are configured.
layoutName - Name of the layout used as the keyword for the search.
from - from index.
limit - no of layouts to be fetched.

Get Products

To get the products of a specific department, use the following code snippet:

import {ZohoDeskPortalSDK} from '@zohocorp/zohodesk-portal-apikit'
var departmentID = 'Your_departmentID'
var queryParams = {
'limit': '1'
}
ZohoDeskPortalSDK.getProducts(departmentID,queryParams
,(success) => {
console.log(success);
}, (error) => {
console.log(error);
})

Query Params

departmentID - The departmentID of the products.
from - The from limit for listing agents.
limit - The number of records to be fetched.

Hiding fields in the Submit Ticket form

The Submit Ticket form in your ASAP help widget displays the same fields configured in the ticket layout in your Zoho Desk portal. To hide any of the fields in the form, you can use the setTicketsFieldsListTobeShown() method.

After you include this method, the form displays only the fields you passed:

import {ZohoDeskPortalSubmitTicket} from '@zohocorp/zohodesk-portal-ticket';
import {ZDVisibleTicketField} from
'@zohocorp/zohodesk-portal-ticket/src/Components/ZDPortalSubmitTicketWrapper';

const visibleField = new ZDVisibleTicketField('departmentId', 'layoutId', ['subject']);
const visibleFields = [visibleField];
ZohoDeskPortalSubmitTicket.setFieldsListTobeShown(visibleFields);

setFieldsListTobeShown method takes a param which is a List of ZDVisibleTicketField.

class ZDVisibleTicketField {
constructor(departmentId, layoutId, fieldNames) {
this.departmentId = departmentId;
this.layoutId = layoutId;
this.fieldNames = fieldNames;
}

Params

departmentId - ID of the department for which you want to configure the Ticket Fields list.
layoutId - ID of the particular layout for which you want to configure the Ticket Fields.
fieldNames - List of apiNames of Fields which need to be shown.

Hiding mandatory fields in the Submit Ticket form

If you want to hide a mandatory field in the form, you can do so, provided the field's value is prefilled. To do this, you must use the preFillTicketFields() method:

import {ZohoDeskPortalSubmitTicket} from '@zohocorp/zohodesk-portal-ticket';
import {ZDCustomizedTicketField, ZDCustomizedTicketForm} from
'@zohocorp/zohodesk-portal-ticket/src/Components/ZDPortalSubmitTicketWrapper';
const ticketField1 = new ZDCustomizedTicketField('fieldName', 'This is pre fill value', true);

const ticketField2 = new ZDCustomizedTicketField('fieldName', '5678', true);
const ticketForm = new ZDCustomizedTicketForm('departmentId', 'layoutId',
[ticketField1, ticketField2]);

const ticketForms = [ticketForm];
ZohoDeskPortalSubmitTicket.preFillTicketFields(ticketForms)

preFillTicketFields method takes ticketForms (list of TicketForm object) as input:

class ZDCustomizedTicketForm {
constructor(departmentId, layoutId, customizedTicketFields) {
this.departmentId = departmentId;
this.layoutId = layoutId;
this.customizedTicketFields = customizedTicketFields;
}
}

ZDPCustomisedTicketForm can be created with following input:

departmentId - ID of the department for which you want to configure the Ticket Fields list.
layoutId - ID of the particular layout for which you want to configure the Ticket Fields.
customisedTicketFields - List of ZDCustomizedTicketField objects.

class ZDCustomizedTicketField {
constructor(fieldName, value, isEditable) {
this.fieldName = fieldName;
this.value = value;
this.isEditable = isEditable;
}
}

ZDCustomizedTicketField can be created with following input:

filedName - apiName of the TicketField
value - Object default value of the Ticket Field
isEditable - indicates, whether this field can be editable

AddAttachments

Add attachments for the tickets using the following code snippet:

import {ZohoDeskPortalSDK} from '@zohocorp/zohodesk-portal-apikit'
var fileName = "HelloWorld.txt"
ZohoDeskPortalSDK.addAttachments(fileName,base64Data, (success)=>{
console.log(success);
},(error)=>{
console.log(error);
}

Params

FileName - The pass the file name with .extension.
base64Data - To convert the attachment to a base64 format.

CreateTicket

To create a new ticket for an authenticated user (only users logged in through the ASAP SDK can create tickets using this method):

import {ZohoDeskPortalSDK} from '@zohocorp/zohodesk-portal-apikit';
var ticketData = {
"cf" : {
"data" : "cf_new_data s"
},
"phone" : "your_phone_number",
"subject" : "ticket_subject",
"departmentId" : "your_DepartmentID",
"description" : "your_ticket_description",
"priority" : "High",
"classification" : "ticket_classification"
}
ZohoDeskPortalSDK.createTicket(ticketData,(success)=>{
console.log(success)
},(error) =>{
console.log(error)
})

Create Guest Ticket

To create a new ticket for guest users (users who are not logged into the ASAP SDK are allowed to create tickets using this method):

import {ZohoDeskPortalSDK} from '@zohocorp/zohodesk-portal-apikit';
var ticketGuestData = {
"cf" : {
"data" : "cf_new_data"
},
"phone" : "your_phone_number",
"contactName" : "your_contact_name",
"subject" : "New Ticket API",
"departmentId" : "your_DepartemnetID",
"description" : "description of the ticket",
"priority" : "High",
"classification" : "ticket_classification",
"email" : "yourmail@gmail.com"
}
ZohoDeskPortalSDK.createGuestTicket(ticketGuestData,(success)=>{
console.log(success)
},(error) =>{
console.log(error)
})

TicketData Query Params

Subject - The subject of the ticket.
contactName - Name of the ticket creator.
email - Email address of the ticket creator.
Phone - Customer’s contact phone number (optional).
departmentId - The ID for the department handling the ticket.

ShowTicketDetail

To open the specific tickets detail screen, use the following code snippet:

import {ZohoDeskPortalTicket} from '@zohocorp/zohodesk-portal-ticket';
ZohoDeskPortalTicket.showTicketDetail("Your_ticket_Id")