How to customize the Tickets module for the ASAP Flutter SDK?

The Ticket module in Zoho Desk manages all customer support requests and inquiries. Each ticket includes the customer's name, email address, phone number, and issue description. The Ticket module also offers automated ticket assignment, escalation, and SLA management to help support teams streamline their workflow and assist customers efficiently.

These methods help configure the Submit Ticket form on the ASAP help widget:

Custom-configuring ticket actions

Users can perform various actions, including replying to, commenting on, and closing tickets.

The following method helps you define which actions must be allowed and which must be disallowed when users access the ticket submission screen on the ASAP help widget.

import 'package:zohodesk_portal_ticket/zohodesk_portal_ticket.dart' show ZohodeskPortalTicket;
import 'package:zohodesk_portal_ticket/data/zdp_ticket_configuration.dart' show ZDPTicketConfiguration;
void setupTicketConfiguration() {
ZDPTicketConfiguration configuration = ZDPTicketConfiguration();
configuration.isReplyAllowed = true;
ZohodeskPortalTicket.setConfiguration(configuration);
}

Here,

configuration.isReplyAllowed = false; disables the ticket reply option
configuration.isReplyAllowed = true; enables the ticket reply option

Refer to the table below for all the ticket module configurations:

Method name	Functional description	Default status
isReplyAllowed	To hide the ticket reply option.	Enabled
isCommentAllowed	To hide the ticket comment option.	Enabled
isTicketUpdateAllowed	To hide the ticket update option.	Enabled
isCommentEditAllowed	To hide the ticket comment edit option.	Enabled
isCommentDeleteAllowed	To hide the ticket comment delete option.	Enabled
isAddTicketAllowed	To hide the add ticket option on the ticket list screen.	Enabled
isHappinessThreadAllowed	To hide the ticket happiness thread.	Enabled
isTicketPropertiesAllowed	To hide the ticket properties section.	Enabled
isTicketChannelAllowed	To hide the ticket channel icon information.	Enabled
isTicketDetailSearchAllowed	To hide the search option in the ticket detail screen.	Enabled

Customizing the Field Visibility in the Submit Ticket Form:

The ZohodeskPortalSubmitTicket.setTicketsFieldsListTobeShown() method lets you control which fields appear in the Submit Ticket form within your ASAP help widget. By specifying the required fields, you can customize the form’s layout and improve the user experience.

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

This method takes a list of ZDVisibleTicketField objects, the object includes:

The department ID (mandatory) – Ensures correct mapping of fields to the respective department.
The layout ID – Specifies the layout for which the fields should be configured.
A list of field API names – Defines which fields should be shown in the ticket form.

import 'package:zohodesk_portal_submit_ticket/zohodesk_portal_submit_ticket.dart' show ZohodeskPortalSubmitTicket;
import 'package:zohodesk_portal_submit_ticket/common/ZDVisibleTicketField.dart' show ZDVisibleTicketField;
void setTicketsFieldsListTobeShown(){
ZohodeskPortalSubmitTicket.setTicketsFieldsListTobeShown(
[
ZDVisibleTicketField(
departmentId: 'departmentId',
layoutId: 'layoutId',
fieldNames: [
"fieldApiName",
]
)
]
);
}

Please note that the mandatory fields cannot be hidden even if you do not pass their names in the above method.

Pre-filling the ticket fields in the Submit Ticket form:

The preFillTicketFields() method allows you to prepopulate fields in the Submit Ticket form with predefined values. This is useful for automatically setting default values, reducing manual input, and ensuring mandatory fields are filled before submission.

Additionally, this method can be used to hide mandatory fields in the form. A mandatory field can only be hidden if it has a predefined value; this ensures that even though the user doesn’t see the field, it still contains valid data required for ticket submission.

Pre-filled fields with default values, such as auto-generated IDs or system data.
Ensure mandatory fields have values while keeping them hidden from users.
Control field editability, some fields can be locked (non-editable), while others remain user-modifiable.

Method Implementation

To pre-fill ticket fields, create a list of ZDCustomizedTicketForm objects.

Each form should include:

departmentId – The ID of the department where these fields should be applied.
layoutId – The layout ID associated with the ticket form.
customizedTicketFields – A list of ZDCustomizedTicketField objects, specifying the field name, value, and editability.

Each ZDCustomizedTicketField object contains three main properties:

fieldAPIName (string): The API name of the ticket field. You can retrieve the API name of each field using the getTicketFields() method.
fieldValue - The value assigned to the field (formatted based on field type).

For multi-select fields, pass the values as a list of strings.
Pass one of the values allowed as a string for pick list fields.
For date fields, pass the value as a string in the dd-MM-yyyy format.
For date-time fields, pass the value as a string in the dd-MM-yyyy HH-mm format.
For boolean fields, pass a Boolean value.
For all other field types, pass the values as string objects.
Make sure that the values you pass adhere to the max length and decimal restrictions defined for the field.

isEditable (Boolean) - A key that defines if the value in the field is editable or not.

import 'package:zohodesk_portal_submit_ticket/zohodesk_portal_submit_ticket.dart' show ZohodeskPortalSubmitTicket;
import 'package:zohodesk_portal_submit_ticket/common/ZDCustomizedTicketForm.dart' show ZDCustomizedTicketForm;
import 'package:zohodesk_portal_submit_ticket/common/ZDCustomizedTicketField.dart' show ZDCustomizedTicketField;
void preFillTicketFields(){
ZohodeskPortalSubmitTicket.preFillTicketFields(
[
ZDCustomizedTicketForm(
departmentId: "departmentId",
layoutId: "layoutId",
customizedTicketFields: [
ZDCustomizedTicketField( fieldName: 'fieldApiName', value: 'fieldValue')
],
),
],
);
}

To fetch the Department ID for Ticket operations:

The Department ID is essential for various ticket operations, including:

Pre-filling Ticket Fields – Ensuring default values are assigned.
Showing Visible Ticket Fields – Controlling which fields are displayed in the ticket form.

The getDepartments() method retrieves available departments, providing the necessary Department ID for these operations.

import 'package:zohodesk_portal_apikit/common/ZDResponseCallback.dart';
import 'package:zohodesk_portal_apikit/model/ZDDepartment.dart';
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart'
show ZohodeskPortalApikit;
class DepartmentsDownloader implements DepartmentsCallback{
@override
onDepartmentsFetch(List<ZDDepartment> departments) {
//departments fetched successfully
}
@override
onError(String errorMessage) {
//departments fetch failed
}
}
void fetchDepartments(){
ZohodeskPortalApikit.getDepartments(DepartmentsDownloader());//call this method to fetch departments
}

To fetch the layout for a specific Department:

The layout ID helps identify different form structures available under a department. The getLayouts() method retrieves all layouts associated with a given Department ID.

Takes the Department ID as input.
Returns a list of ZDLayout objects containing layout details (e.g., layout ID, name).
It helps determine which layout to apply when configuring ticket fields.

import 'package:zohodesk_portal_apikit/common/ZDResponseCallback.dart';
import 'package:zohodesk_portal_apikit/model/ZDLayout.dart';
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart'
show ZohodeskPortalApikit;
class LayoutsDownloader implements LayoutsCallback{
@override
onError(String errorMessage) {
//Failed to fetch the layouts
}
@override
onLayoutsFetch(List<ZDLayout> layouts) {
//Layouts fetched Successfully
}
}
void fetchLayouts() {
ZohodeskPortalApikit.getLayouts("departmentId", LayoutsDownloader()); //Call this method to fetch the layouts
}

To fetch the Ticket form fields for a Department and a Layout:

The getTicketForm() method retrieves the ticket form structure, including all sections and fields, for a specified Department ID and Layout ID.

Takes the Department ID and Layout ID as inputs.
Returns a ZDTicketForm object containing all ticket sections and fields.
Helps in configuring ticket fields, ensuring mandatory fields are included, and managing form visibility.

import 'dart:collection';
import 'package:zohodesk_portal_apikit/model/ZDTicketForm.dart';
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit;
import 'package:zohodesk_portal_apikit/common/ZDResponseCallback.dart' show TicketFormCallback;
class FormCallback implements TicketFormCallback{
@override
onError(String errorMessage) {
//Failed to Fetch the Ticket Fields
}
@override
onTicketFormDownloaded(ZDTicketForm ticketForm) {
//Successfully fetched the Ticket Fields
}
}
void fetchTicketForm(){
HashMap<String, String> map = HashMap();
map["departmentId"] = "pass departmentId here";
map["layoutId"] = "pass layoutId here";
ZohodeskPortalApikit.getTicketForm(FormCallback(), map, null);
}

To fetch Ticket fields for a Layout:

The getTicketFields() method retrieves all available ticket fields for a given Department ID and Layout ID. This enables developers to dynamically access field details, including API names, data types, and validation rules.

Requires Department ID and Layout ID as inputs.
Returns a ZDTicketFieldsList containing all ticket fields.
Used to retrieve field metadata, which is essential for pre-filling or displaying ticket fields dynamically.

import 'dart:collection';
import 'package:zohodesk_portal_apikit/zohodesk_portal_apikit.dart' show ZohodeskPortalApikit;
import 'package:zohodesk_portal_apikit/common/ZDResponseCallback.dart' show TicketFieldsCallback;
import 'package:zohodesk_portal_apikit/model/ZDTicketFieldsList.dart' show ZDTicketFieldsList;
class FieldsCallback implements TicketFieldsCallback{
@override
onTicketFieldsDownloaded(ZDTicketFieldsList ticketFields){
//Successfully fetched the Ticket Fields
}
@override
onError(String errorMessage) {
print(errorMessage);
//Failed to Fetch the Ticket Fields
}
}
void fetchTicketFields(){
HashMap<String, String> map = HashMap();
map["departmentId"] = "pass departmentId here";
map["layoutId"] = "pass layoutId here";
ZohodeskPortalApikit.getTicketFields(FieldsCallback(), map, null);
}