A. Code Editor 

      The code editor eases the development of a Client Script with several features like

• highlighted syntax
• advanced customization settings
• smart code completions for javascript syntax.
  

       When you save the script, if the Client Script IDE finds errors, the error panel lists the errors at the bottom of the editor.

B. Review 

      The Client Script IDE provides the Review component where you can compare and check the differences with the previous code.

C. Revision

      You can track the list of saved revisions of your script in the Revision component.

D. Run

      Client Script allows you to execute the script using the Run component. The success message, errors and output of log statements are available in the Messages pane at the bottom of the Run component. Terminal pane, next to the Messages pane allows you to try and execute the ZDK APIs instantly.

3. Available for multiple pages

      Client Script allows you to accomplish custom actions for different pages in Zoho CRM. This includes 

• Create page
• Edit page
• Clone page
  
• Detail(canvas) page of all standard and custom modules in Zoho CRM.
  

4. Executes Script based on Events

      Client Script allows you to configure events which will trigger your script whenever those events occur. For example, you can configure your script to execute whenever the user hits the Save button or when the user adds value to a particular field. Click here to know the event types available for different pages.

5. Instant form field validation

      Client Script is a boon when you want your script to run as soon as the user updates any value to a field. For example, to show an error or an alert message based on any condition as soon as the user enters data on a field. 

6. Code re-usability using Static Resources

      Client Script provides the convenience to import existing code files in the form of static resources and use them in your script.You can upload a Javascript file as a static resource, include the uploaded file in your script using the Add button on the right pane of the Code Editor and call the method in the static resource file from your script. Refer to Static resources in Client Script for more information.

7. Secured third party API calls

                   Client script provides organizations using Zoho CRM with Trusted Domains . This helps the CRM account admins whitelist domains that the client scripts can make calls to. The client scripts cannot make calls to any sites that are not on the whitelisted in domains list. Also,  this third party domain should be CORS enabled in addition to adding it to the Trusted Domain if you use fetch() method to make the API call. This helps prevent the security of the CRM from being compromised due to any misuse through the Client Scripts. 

      For example, you can fetch the distance between two cities using a third party API and populate the returned value in the field Distance only if you add the third-party domain to the list of Trusted Domains.

8. Rich collection of ZDK APIs

      Client Script provides us the luxury to use its collection of ZDK Client APIs and ZDK Web APIs . The ZDK Web APIs invokes the Zoho CRM APIs internally and so it accounts for API credits every time ZDK Web API call is invoked. 

Below are some of the typical use-cases of Client Script that can be accomplished using the ZDK APIs.

A. Keep information confidential from unauthorized parties

You can mask specific information for specific profiles/roles/criteria in Detail Page(Canvas) using the mask() ZDK Client API in Client Script. For example, you can hide the phone numbers of your customers for all profiles except Administrator. 

var user = ZDK.Apps.CRM.Users.fetchById($Crm.user.id);   if (user.profile.name !== 'Administrator') {     ZDK.Page.getField('Phone_Number').mask({ character: '*', length: 5, reverse: true });   }

The following screenshot shows that the Phone Number field is masked partially for a Standard user.

B. Auto-populate data based on your requirement or calculation

      You can auto-populate data for fields whenever the page loads based on any criteria or populate data based on calculations. For example: Auto populate the field Request Name whenever a new record is created in the module Request.

var todaysDate = new  Date(); //Append the date with REQ as per requirement var requestName = "REQ-" + todaysDate.getDate().toString() + "-" + todaysDate.getMonth().toString() + "-" + todaysDate.getFullYear().toString(); //Assign the field "Request Name" to a variable var reqName_field = ZDK.Page.getField("Request_Name"); //Populate requestName in the field "Name" reqName_field.setValue(requestName); //Make the field "Request_Name" read-only reqName_field.setReadOnly(true);

C. Display custom messages

       Using Client Script, you can display custom messages and alerts in Create/Edit/Clone/Detail (Canvas) Page of Zoho CRM. For instance, if you want to display the following message when the user creates a new Account, you can create a Client script on Create Page of Accounts module with onLoad event type and use the  ZDK Client API, ZDK.Client.showMessage() in your script. For more samples on displaying custom messages refer to Kaizen #59 .

D. Accomplish data auto-correction

      Using Client Script you can correct, update or modify data instantly after the user enters value in a field. For example, consider that your organisation wants the name of the user to be entered in capital letters, you create a Client Script on Create Page onChange Field event type on field First Name and write a script to auto-convert the name to Capital letters.

var first_name = ZDK.Page.getField("Name"); first_name.setValue(value.toUpperCase());

Here is how the Client Script Works.

            

9. Client Script Constants 

      Client Script provides the below constants which can be used in your Script for better Client Scripting.

• $Crm   - Provides information about the logged-in user, environment and org.
• $Client - Contains Information 
• $Page - Contains information about the contextual data that's been shared by the page.
  

      You can check the values that these constants hold in the Terminal section of Run Component in Client Script IDE as shown below.