The Client Script IDE offers you a flawless experience during the development process by providing a cohesive solution with features like an enhanced code editor, code review, conflict management, and revision history tracking. It also allows you to save the scripts confidently by verifying your code in action along with the other scripts running on your application. Here is how the Client Script IDE looks.

The name of the Client Script and its description can be edited by clicking the edit icon at the top left of the IDE.

1. Code Editor

The code editor eases the development of a Client Script with multiple features like syntax highlighting, advanced customization settings, smart code completions for javascript syntax, and ZDK definitions. For adding single-line comments you can use // at the beginning of the line. For adding block comments, use the following syntax /* Comments */. While saving the script, if the editor finds an error, the error panel with the list of errors pops up at the bottom of the editor.  

a. Information

The Information section is available on the right pane of the editor. The page and event details of the Client Script are displayed in this Information section. You can add the comments for the code changes in the Commit Message section. You can find the documentation of the ZDK Client and Web libraries by clicking the help icon in the Library section.

b. Static Resources

The static resources section is available below the Information icon on the right pane of the Code Editor. The static resources added to your Zoho CRM account can be imported to the Client Script using this option. Click here for more information about Static Resources.

c. Status Bar

The status bar provides the information of the last modified user of the script. You can switch to full-screen mode using the full-screen icon in the status bar. The error panel can be opened by clicking the error icon available on the bottom-right of the status bar.

2. Review

Here, you can review your code changes before saving them. This section provides a diff-editor with differences in code highlighted. In addition, the IDE also provides conflict management. That is, on saving the script, if the IDE finds any recent update on that particular script, the latest script source, and the current local script is presented with a comparison for your review. 

 3. Revisions

The Revisions component lists the saved versions of the script along with their commit messages. Here,

1. You can track the history of the code changes along with changelog information.

2. You can make use of any archived revision of the script by clicking the 'Use this revision' option at the top-right of the Revision section.

4. Run

• See your code in action using the Run option.
• However, any CRM operation performed inside this run mode will get reflected in your Zoho CRM account.

• At the top right, you can see options to Reload and Hard Reload your Zoho CRM account for testing purposes.
• At the bottom of the Run section, there are two components. They are Messages and Terminal.

a.Messages

Client Script executions are logged here with the event and script details. Also, information about the execution status, logs, exception messages, and time taken for the execution are also displayed.

b. Terminal

If you want to try our ZDK APIs instantly, you can do it here. For example, when you type the below script in the Terminal section and hit enter, you can see the alert message on the screen.

Copy to Clipboard​


ZDK.client.showMessage('Welcome to Client Script IDE', { type: 'info' });

5. Settings

You can personalize the formatting and styling of the Client Script IDE in the Settings option available at the bottom of the left pane.

​

• Theme- There are two themes available for the IDE - Dark, and Light.
• Cursor- The cursor style, cursor animation, and mouse style options can be customized in this section.
• Format- The preference whether automatically format the pasted content or automatically format the line after typing can be specified here.
• Font- The font size, font weight, line spacing, and line height for the Code Editor can be customized here.
• Minimap- A Minimap provides an enhanced scroll for your script. You can enable or disable minimap, modify its size, position, scale, and enable the slider.

• Word Spacing- The word-wrap settings and render white space options can be modified in this section.
• Selection- Here you can enable the select and drag option to move a line or part of the script to a different place in the script. 
• Find- Options like search restart from beginning or end, cursor movement on find match, highlighting all similar words on selection can be mentioned here.
• Suggestion- You can either "Insert" or "Replace" the words listed in the suggestions. By default, it gets inserted.
• Brackets- Using this option you can enable highlighting all matching brackets, disable or enable highlighting the nearest brackets. By default, it is set to all matching brackets.