Edit code with the Now Code Editor (advanced feature)

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Edit code with the Now Code Editor (advanced feature)

    The Now Code Editor is a rich-text coding interface designed for ServiceNow customers to efficiently edit and customize UI configurations, data resource configurations, styles, events, and both client-side and server-side scripts within Next Experience UI Builder components. It supports multiple programming languages including CSS, HTML, JavaScript, XML, and JSON, enabling comprehensive script editing and debugging.

    Show full answer Show less

    Key Features

    • Basic Editing: Includes code formatting with proper indentation, syntax highlighting, and syntax checking to identify errors. Users can toggle these features via the Settings menu.
    • Auto-suggestions: Provides context-aware suggestions for class names, functions, objects, and variables to accelerate coding.
    • Comments and Word Wrap: Easily comment/uncomment multiple lines and toggle word wrap for better code readability.
    • Minimap: Offers a code snippet overview for easier navigation, toggleable through Settings.
    • Command Palette: Allows execution of common editor commands such as find and replace, code folding, and toggling comments through an interactive window.
    • Editor Expansion: Users can expand or collapse the editor area for better workspace management.
    • Debugging: Integrated Script Debugger supports breakpoints, conditional breakpoints, and logpoints for JavaScript code. Debugging can be activated via the toolbar icon.
    • Diff Mode: Enables side-by-side or inline comparison of code changes for better version control and review.
    • Code Editor Macros: Provides quick insertion of common code templates such as loops, function templates, GlideRecord queries, and comment blocks to speed up development tasks.

    Practical Use for ServiceNow Customers

    ServiceNow developers and administrators can leverage the Now Code Editor to customize and enhance their instance with precision and efficiency. The editor's advanced features reduce coding errors, streamline script writing, and facilitate debugging within the UI Builder environment. By using macros and auto-suggestions, users can accelerate development, while debugging tools help ensure code quality and performance.

    Overall, the Now Code Editor empowers ServiceNow customers to deliver tailored, high-quality user experiences and automated workflows with greater confidence and agility.

    Now Code Editor is a rich-text editor like interface that supports Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), JavaScript, Extensible Markup Language (XML), and JavaScript Object Notation (JSON). Use Now Code Editor to modify UI configuration, data resource configuration, styles, events, client-side and server-side scripts in Next Experience UI Builder components.

    Now Code Editor supports the following features:
    • Basic editing
    • Debugging
    • Command palette
    • Code formatting
    • Syntax checking and highlighting
    • Auto-suggestions
    • Script macros for common code

    Basic editing

    Action Description
    Format code Applies proper indentation to the script.
    Keyboard shortcut:
    • Windows: Shift+Alt+F
    • Mac: Shift+Option+F
    Highlight syntax Highlights the syntax of the code.
    Check syntax syntax check icon Checks for formatting errors and highlights syntax errors.
    • Windows: Shift+Alt+C
    • Mac: Shit+Option+C
    Show suggestions Displays a list of valid elements at the insertion point such as:
    • Class names
    • Function names
    • Object names
    • Variable names
    Select and click an entry to add it to the script.
    Keyboard shortcut:
    • Windows: Control+Space
    • Mac: Control+Space
    You can also enable or turn off Syntax highlighting from the Settings menu.
    Toggle comments toggle comments icon Comments one or more lines of code with two consecutive forward-slashes //.
    Keyboard shortcut:
    • Windows: Control+/
    • Mac: Command+/
    Show minimap Displays the minimap of the code snippet.

    You can display or hide the minimap option, from the Settings menu.
    Enable word wrap Enables word wrap function in the editor area.

    You can toggle the Enable word wrap option from the Settings menu.
    Show command palette Displays a list of available commands for the common operations. You can execute editor commands, find and replace text, fold and unfold code blocks, toggle comments and many more tasks using the same interactive window.
    Keyboard shortcut
    • Windows: F1
    • Mac: F1
    Expand editor expand editor icon or collapse editor collapse editor icon Expands or collapses the editor.
    Keyboard shortcut
    • Windows: Control+M
    • Mac: Control+M

    Debugging

    To launch Script Debugger, click the Script Debugger icon Script Debugger icon in the toolbar.
    Note:
    You can add a breakpoint, conditional breakpoint, or logpoint, only when debugging is enabled and selected language is JavaScript.
    Task Do this
    Add breakpoint Right-click beside a line number in the ruler area and select Add breakpoint.
    Add conditional breakpoint
    1. Right-click beside a line number in the ruler area and select Add conditional breakpoint.
    2. Enter a break condition in the editor.
    Add logpoint Right-click beside a line number in the ruler area and select Add logpoint.
    Compare text in Diff mode

    Use the side-by-side view icon now code editor side by side view and inline view icon Now code editor inline view to toggle between views.

    Code editor macros

    for
    • Description: Inserts a standard for loop with an example array.
    • Output: 
      for (var i=0; i< myArray.length; i++) {
 //myArray[i];
 
}
    method
    • Description: Inserts an empty JavaScript function template.
    • Output:
      /*_________________________________________________________________
   * Description:
   * Parameters:
   * Returns:
   ________________________________________________________________*/
   : function() {
   
   },
    info
    • Description: Inserts a GlideSystem information message.
    • Output:
      gs.addInfoMessage(gs.getMessage(""));
    doc
    • Description: Inserts a comment block for describing a function or parameters.
    • Output:
      /**
 
* Description: 
 
* Parameters: 
 
* Returns:
*/
    vargror
    • Description: Inserts a GlideRecord query for two values with an OR condition.
    • Output:
      var gr = new GlideRecord('');
 
var qc = gr.addQuery('field', 'value1');
 
qc.addOrCondition('field', 'value2');
gr.query();
 
while (gr.next()) {

 
}
    vargr
    • Description: Inserts a standard GlideRecord query for a single value.
    • Output:
      var gr = new GlideRecord("");
gr.addQuery("name", "value");
gr.query();
if (gr.next()) {
   
}