Edit code with the Now Code Editor (advanced feature)

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	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 disable Syntax highlighting from the Settings menu.
Toggle comments	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 or collapse editor	Expands or collapses the editor. Keyboard shortcut Windows: Control+M Mac: Control+M

Debugging

To launch Script Debugger, click the 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	Right-click beside a line number in the ruler area and select Add conditional breakpoint. 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 and inline view icon 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()) {
     
  }