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

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:
  1. import {ZohoDeskPortalTicket} from '@zohocorp/zohodesk-portal-ticket';
    //This is the default value for this configuration
    ZohoDeskPortalTicket.updateConfiguration({
    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:
  1. 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.
  1. 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:

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

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

Get Products

To get the products of a specific department, use the following code snippet:
  1. 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

  1. departmentID - The departmentID of the products.
  2. from - The from limit for listing agents.
  3. 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:
  1. 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.
  1. class ZDVisibleTicketField {
    constructor(departmentId, layoutId, fieldNames) {
    this.departmentId = departmentId;
    this.layoutId = layoutId;
    this.fieldNames = fieldNames;
    }

Params

  1. departmentId - ID of the department for which you want to configure the Ticket Fields list.
  2. layoutId - ID of the particular layout for which you want to configure the Ticket Fields.
  3. 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:
  1. 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:
  1. class ZDCustomizedTicketForm {
    constructor(departmentId, layoutId, customizedTicketFields) {
    this.departmentId = departmentId;
    this.layoutId = layoutId;
    this.customizedTicketFields = customizedTicketFields;
    }
    }
ZDPCustomisedTicketForm can be created with following input:
  1. departmentId - ID of the department for which you want to configure the Ticket Fields list.
  2. layoutId - ID of the particular layout for which you want to configure the Ticket Fields.
  3. customisedTicketFields - List of ZDCustomizedTicketField objects.
  1. class ZDCustomizedTicketField {
    constructor(fieldName, value, isEditable) {
    this.fieldName = fieldName;
    this.value = value;
    this.isEditable = isEditable;
    }
    }
ZDCustomizedTicketField can be created with following input:
  1. filedName - apiName of the TicketField
  2. value - Object default value of the Ticket Field
  3. isEditable - indicates, whether this field can be editable

AddAttachments

Add attachments for the tickets using the following code snippet:
  1. import {ZohoDeskPortalSDK} from '@zohocorp/zohodesk-portal-apikit'
    var fileName = "HelloWorld.txt"
    ZohoDeskPortalSDK.addAttachments(fileName,base64Data, (success)=>{
    console.log(success);
    },(error)=>{
    console.log(error);
    }

Params

  1. FileName - The pass the file name with .extension.
  2. 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):
  1. 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):
  1. 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

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

ShowTicketDetail

To open the specific tickets detail screen, use the following code snippet:
  1. import {ZohoDeskPortalTicket} from '@zohocorp/zohodesk-portal-ticket';
    ZohoDeskPortalTicket.showTicketDetail("Your_ticket_Id")

    Access your files securely from anywhere

      Zoho CRM Training Programs

      Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

      Zoho CRM Training
        Redefine the way you work
        with Zoho Workplace

          Zoho DataPrep Personalized Demo

          If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

          Zoho CRM Training

            Create, share, and deliver

            beautiful slides from anywhere.

            Get Started Now


              Zoho Sign now offers specialized one-on-one training for both administrators and developers.

              BOOK A SESSION






                          Quick Links Workflow Automation Data Collection
                          Web Forms Enterprise Begin Data Collection
                          Interactive Forms Workplace Data Collection App
                          Offline Forms Customer Service Accessible Forms
                          Digital Forms Marketing Forms for Small Business
                          HTML Forms Education Forms for Enterprise
                          Contact Forms E-commerce Forms for any business
                          Lead Generation Forms Healthcare Forms for Startups
                          Wordpress Forms Customer onboarding Order Forms for Small Business
                          No Code Forms Construction RSVP tool for holidays
                          Free Forms Travel
                          Prefill Forms Non-Profit

                          Intake Forms Legal

                          Form Designer HR

                          Card Forms Food
                          Assign Forms Photography

                          Translate Forms Real Estate
                          Electronic Forms

                          Notification Emails for Forms Alternatives
                          Holiday Forms Google Forms alternative 
                          Form to PDF Jotform alternative





                                            You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                                Manage your brands on social media

                                                  Zoho Desk Resources

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                    Zoho Marketing Automation

                                                      Zoho Sheet Resources

                                                       

                                                          Zoho Forms Resources


                                                            Secure your business
                                                            communication with Zoho Mail


                                                            Mail on the move with
                                                            Zoho Mail mobile application

                                                              Stay on top of your schedule
                                                              at all times


                                                              Carry your calendar with you
                                                              Anytime, anywhere




                                                                    Zoho Sign Resources

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now




                                                                              Zoho TeamInbox Resources



                                                                                      Zoho DataPrep Resources



                                                                                        Zoho DataPrep Demo

                                                                                        Get a personalized demo or POC

                                                                                        REGISTER NOW


                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now









                                                                                                              • Related Articles

                                                                                                              • Introducing ASAP React Native SDK

                                                                                                                Equipping the Help Center services as widgets to deliver instant assistance to your customers The ASAP SDK for Android/iOS provides easy access to help your mobile app's end users. Using this SDK, you can create and customize a help widget within ...
                                                                                                              • Working with the ASAP SDK for React Native

                                                                                                                The ASAP SDK for mobile provides easy access to help end-users of your React Native app. Using this SDK, you can create and customize a help widget that resides within your app and provides end-users with easy access to the Help Center services: • ...
                                                                                                              • How to Integrate the ASAP SDK with React Native

                                                                                                                After successfully setting up the ASAP SDK on your mobile application, the next step is to integrate it. Code block to installing the react-native plugin: We have the following list of plugins, customers can integrate the SDK based on their ...
                                                                                                              • Introducing ASAP Flutter Apps SDK

                                                                                                                Equipping the Help Center services as widgets to deliver instant assistance to your customers The ASAP SDK for Android/iOS provides easy access to help your mobile app's end users. Using this SDK, you can create and customize a help widget within ...
                                                                                                              • How to enable push notifications for the ASAP SDK via the React Native?

                                                                                                                You can configure the ASAP help widget to send notifications to end-users when an agent responds via chat. Ensure that Push Notifications settings are configured in the ASAP help widget setup page in Zoho Desk. Ensure that push notifications are ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  Resources

                                                                                                                  Videos

                                                                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                  eBooks

                                                                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                  Webinars

                                                                                                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                  CRM Tips

                                                                                                                  Make the most of Zoho CRM with these useful tips.



                                                                                                                    Zoho Show Resources