# Getting Started-Overview of Script Editor
## Overview
This section describes the parts of the Script Editor and gives the basics on opening and working with scripts in Script Editor.
The Script Editor view displays the JavaScript functions and variables related to a Servoy resource. During editing, the Script Editor interacts with the surrounding views, including the Solution Explorer on its left, the Properties view on the right, and the Problems view at the bottom.
The Script Editor itself consists of the following parts:
1. **Vertical Ruler** – This ruler shows line numbers and icons for cautions and warnings. The sidebar is customizable through the contextual menu (right-click on the sidebar) for the following options:
* Showing Line Numbers (toggle)
* Enabling Folding (with options available for expanding/collapsing, as well as collapsing blocks and comments in the submenu)
* Showing Quick Diff (addressed in the Code Navigation section)
2. **Outline Bar** – This bar is a navigational tool that includes the complete code range. Colored bars indicating markers, such as cautions, warnings, and bookmarks, are shown relative to their position in the entire document. Users can click on any of these bars to jump to the item flagged by the bars.
3. **Editor Area** – This is the script editing area. Code coloring is turned on by default. This and other options, such as fonts, can be customized via the context menu item **Preferences** (see [this section](#setting-general-preferences-for-script-editor)).
Script Editor Parts
## Vertical Ruler Context Menu Commands
A summary of commands available on **Vertical Ruler** section of the Servoy Editor via right-click context menu:
| Command | Summary |
| ------------------------------------------------------- | ------------------------------------------------------- |
| [Toggle Breakpoint](#toggle-breakpoint) | Adds or removes a breakpoint at the current line |
| [Disable Breakpoint](#disable-breakpoint) | Disables the breakpoint at the current line |
| [Toggle Watchpoint](#toggle-watchpoint) | Toggles a watchpoint for a variable |
| [Validate](#validate) | Validates the current file or selection |
| [Add Bookmark](#add-bookmark) | Adds a bookmark at the current line |
| [Add Task](#add-task) | Adds a task at the current line |
| [Show Quick Diff](#show-quick-diff) | Shows differences between current and previous versions |
| [Show Revision Information](#show-revision-information) | Displays revision history for the current line |
| [Show Line Numbers](#show-line-numbers) | Toggles the display of line numbers |
| [Folding](#folding) | Manages code folding options |
| [Preferencest](#preferences) | Opens preferences for the editor |
| [Breakpoint Properties...](#breakpoint-properties) | Opens properties for the selected breakpoint |
### Toggle Breakpoint
Adds or removes a breakpoint at the current line in the code editor. Breakpoints are used to pause the execution of the application at specific points, allowing you to inspect the state of the application and debug issues.
### Disable Breakpoint
Disables the breakpoint at the current line without removing it. This allows you to temporarily ignore the breakpoint during debugging sessions.
### Toggle Watchpoint
Toggles a watchpoint for a variable, allowing you to monitor changes to the variable's value during execution. Watchpoints are useful for tracking the behavior of specific variables and identifying unexpected changes.
### Validate
Validates the current file or selection, checking for errors and inconsistencies. This command helps ensure that your code adheres to syntax and style guidelines.
### Add Bookmark
Adds a bookmark at the current line, allowing you to quickly navigate to this location later. Bookmarks are useful for marking important sections of your code for easy access.
### Add Task
Opens the [Add Task](/reference/servoy-developer/object-editors/new-task-wizard.md) wizard, where you can add a task at the current cursor position. Tasks can be used for TODOs, reminders, or marking sections of code that need further attention.
### Show Quick Diff
keybinding: `Ctrl+Shift+Q`\
Shows differences between the current version of the file and its previous versions. This command is useful for tracking changes and reviewing modifications.
### Show Revision Information
Displays revision history for the current line, showing changes made over time. This command helps you understand the evolution of your code and identify when specific changes were made.
### Show Line Numbers
Toggles the display of line numbers in the code editor. Line numbers are helpful for navigation and referencing specific parts of your code.
### Folding
Manages code folding options, allowing you to collapse and expand sections of code for better readability. Options include:
* **Enable Folding**: Enables code folding; keybinding: `Ctrl+Numpad_Divide`
* **Expand All**: Expands all folded code sections; keybinding: `Ctrl+Numpad_Multiply`
* **Collapse All**: Collapses all code sections; keybinding: `Ctrl+Shift+Numpad_Divide`
* **Reset Structure**: Resets the code folding structure
* **Collapse Blocks**: Collapses blocks of code
* **Collapse Comments**: Collapses comment sections
### Preferences
Opens [Preferences](/reference/servoy-developer/preferences.md#preferences) for the editor, allowing you to customize various settings such as indentation, color themes, and keybindings. This command helps tailor the editor to your personal workflow.
### Breakpoint Properties
Opens properties for the selected breakpoint, allowing you to configure its behavior, such as conditions for breaking and log messages. This command provides fine-grained control over how breakpoints operate during debugging.
## Outline Bar Context Menu Commands
A summary of commands available on **Outline Bar** section of the Servoy Editor via right-click context menu:
| Command | Summary |
| ----------------------------- | ------------------------------------------------------------------------------------------------ |
| [Preferences](#preferences-1) | Opens [Preferences](/reference/servoy-developer/preferences.md#preferences) for the outline view |
| [Validate](#validate-1) | Validates the current file or selection |
### Preferences
Opens the [Preferences](/reference/servoy-developer/preferences.md#preferences) dialog for the annotations, allowing you to customize various settings specific to the annotations.
### Validate
Validates the current file or selection, checking for errors, warnings, and inconsistencies. This command is crucial for ensuring that your code adheres to syntax and style guidelines, helping to catch issues early in the development process. Validation can help prevent runtime errors and improve the overall quality of the code.
## Editor Area Context Menu Commands
A summary of commands available on **Editor Area** section of the Servoy Editor via right-click context menu:
| Command | Summary |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| [Undo Typing](#undo-typing) | Reverses the last typing action |
| [Revert File](#revert-file) | Reverts the file to its last saved state |
| [Save](#save) | Saves the current file |
| [Open Declaration](#open-declaration) | Opens the declaration of the selected element |
| [Open Call Hierarchy](#open-call-hierarchy) | Opens the call hierarchy of the selected element |
| [Quick Outline](#quick-outline) | Shows the quick outline of the file |
| [Open With](#open-with) | Opens the file with a specified editor |
| [Show In](#show-in) | Shows the selected element in various views |
| [Cut](#cut) | Cuts the selected text |
| [Copy](#copy) | Copies the selected text |
| [Paste](#paste) | Pastes text from the clipboard |
| [Quick Fix](#quick-fix) | Provides quick fixes for code issues |
| [Refactor](#refactor) | Refactors code elements |
| [Source](#source) | Source code-related actions |
| [Search](#search) | Searches within the project or workspace |
| [Run As](#run-as) | Runs the solution in a specified environmen |
| [Debug As](#debug-as) | Debugs the solution in a specified environment |
| [Compare With](#compare-with) | Compares the file with another resource |
| [Replace With](#replace-with) | Replaces the file with another resource |
| [Validate](#validate-2) | Validates the current file |
| [Preferences](#preferences-2) | Opens the [Preferences](/reference/servoy-developer/preferences.md#preferences) dialog |
| [Open in Form Editor](#open-in-form-editor) | Opens the current file in the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md#form-editor) |
| [Open Form Hierarchy](#open-form-hierarchy) | Opens the form hierarchy of the current file |
### Undo Typing
keybinding: `Ctrl+Z`\
Reverses the last typing action, restoring the previous state of the text.
### Revert File
[Reverts the file](/reference/servoy-developer/object-editors/scripting-editor/code-rewriting.md#revert-file) to its last saved state, discarding any unsaved changes.
### Save
keybinding: `Ctrl+S`\
Saves the current file, ensuring that all changes are written to disk.
### Open Declaration
keybinding: `F3`\
Opens the declaration of the selected element, such as a variable or method. This command navigates to where the element is defined.
### Open Call Hierarchy
keybinding: `Ctrl+Alt+H`\
Opens the call hierarchy of the selected element, showing where it is called from and what it calls. This command helps trace the flow of execution.
### Quick Outline
keybinding: `Ctrl+O`
### Open With
Provides options to open the file with different editors:
* **Generic Text Editor**: Opens the file in the Generic Text Editor.
* **JavaScript Editor \[DLTK]**: Opens the file in the JavaScript Editor \[DLTK].
* **Text Editor**: Opens the file in the Text Editor.
* **System Editor**: Opens the file in the system's default editor.
* **In-Place Editor**: Opens the file in the In-Place Editor.
* **Default Editor**: Opens the file in the default editor for the file type.
* **Other...**: Allows selection of other available editors. Opens the [editor selection](/reference/servoy-developer/object-editors/editor-selection.md) dialog.
### Show In
keybinding: `Alt+Shift+W`\
Opens a sub-list of available views where the file can be displayed in:
* **Solution Explorer**
* **Outline**
* **Form Hierarchy**
* **Script Explorer**
* **System Explorer**
* **Properties**
### Cut
keybinding: `Ctrl+X` Cuts the selected text and places it on the clipboard.
### Copy
keybinding: `Ctrl+C` Copies the selected text to the clipboard without removing it from the document.
### Paste
keybinding: `Ctrl+V` Pastes the text from the clipboard at the current cursor position.
### Quick Fix
keybinding: `Ctrl+1` Displays suggested actions. Provides quick fixes for issues in the code, such as auto-correcting errors or applying suggested improvements.
### Refactor
keybinding: `Alt+Shift+T`\
Provides a menu with various refactoring options to improve the structure and design of the code without changing its behavior. Refactoring helps make the code more maintainable and readable. Opens a sub-list of available commands:
* [Rename...](/reference/servoy-developer/object-editors/scripting-editor/refactoring.md#rename): Renames the selected element; keybinding: `Alt+Shift+R`
* [Move...](/reference/servoy-developer/object-editors/scripting-editor/refactoring.md#move): Moves the selected element
* [Extract Local Variable...](/reference/servoy-developer/object-editors/scripting-editor/refactoring.md#extract-local-variable): Extracts a local variable from the selected expression; keybinding: `Alt+Shift+L`
* [Change Method Signature...](/reference/servoy-developer/object-editors/scripting-editor/refactoring.md#change-method-signature): Changes the method signature of the selected method; keybinding: `Alt+Shift+C`
* [Extract Method...](/reference/servoy-developer/object-editors/scripting-editor/refactoring.md#extract-method): Extracts a new method from the selected code; keybinding: `Alt+Shift+M`
* [Introduce Parameter...](/reference/servoy-developer/object-editors/scripting-editor/refactoring.md#introduce-parameter): Introduces a new parameter to a method.
* [Inline...](/reference/servoy-developer/object-editors/scripting-editor/refactoring.md#inline): Inlines the selected element ; keybinding: `Alt+Shift+I`
### Source
Provides source code-related actions for editing and formatting:
* [Remove Block Comment](/reference/servoy-developer/menu/source.md#remove-block-comment): Removes a block comment; keybinding: `Ctrl + Shift + \`
* [Toggle Comment](/reference/servoy-developer/menu/source.md#toggle-comment): Comments / uncommnets the selected line / block; keybinding: `Ctrl+7`
* [Comment](/reference/servoy-developer/menu/source.md#comment): Comments the selected line(s)
* [Uncomment](/reference/servoy-developer/menu/source.md#uncomment): Uncomments the selected line(s)
* [Generate Element Comment](/reference/servoy-developer/menu/source.md#generate-element-comment): Generates the JSDoc comments for the selected variable or function; keybinding: `Alt+Shift+J`
* [Format](/reference/servoy-developer/menu/source.md#format): Formats the script's content; keybinding: `Ctrl + Shift + F`
* [Format Element](/reference/servoy-developer/menu/source.md#format-element): Formats the element
* [Correct Indentation](/reference/servoy-developer/menu/source.md#correct-indentation): Corrects indentation for the selected lines; keybinding: `Ctrl + I`
* [Shift Left](/reference/servoy-developer/menu/source.md#shift-left): Shifts the selected line(s) to the left
* [Shift Right](/reference/servoy-developer/menu/source.md#shift-right): Shifts the selected line(s) to the right
### Search
Provides options to search within the project or workspace, helping you locate references or declarations of elements:
* **References**: Opens a sub-list of available places where the references to the selected element should be searched in:
* **Workspace**: searches for references to the selected element in the entire workspace; keybinding: `Ctrl+Alt+G`
* **Project**: searches for references to the selected element in the current project
* **Hierarchy**: searches for references to the selected element within the current hierarchy
* **Working Set**: searches for references to the selected element within a specified working set
* **Declarations**: Opens a sub-list of available places where the declarations of the selected element should be searched in:
* **Workspace**: searches for declarations of the selected element in the entire workspace
* **Project**: searches for declarations of the selected element in the current project
* **Hierarchy**: searches for declarations of the selected element within the current hierarchy
* **Working Set**: searches for declarations of the selected element within a specified working set
### Run As
Runs the code using specific configurations:
* **1 JavaScript**: Runs the current file as a JavaScript application
* **Run Configurations...**: Opens the [Run configurations](/reference/servoy-developer/object-editors/run-configuration.md) dialog
### Debug As
Debugs the code using specific configurations:
* **1 JavaScript**: Debugs the current file as a JavaScript application
* **Debug Configurations...**: Opens the [Debug configurations](/reference/servoy-developer/object-editors/debug-configuration.md) dialog.
### Compare With
Provides options to [compare](/reference/servoy-developer/object-editors/scripting-editor/code-rewriting.md#compare-and-replace) the current file with various other resources:
* **Each Other**: Compares selected resources with each other.
* **Local History...**: Compares the file with its local history.
* **HEAD Revision**: Compares the file with the HEAD revision in version control.
* **Index**: Compares the file with the index in version control.
* **Index With HEAD**: Compares the index with the HEAD revision in version control.
* **Branch, Tag, or Reference...** Compares the file with a specific branch, tag, or reference.
* **Commit...**: Compares the file with a specific commit in version control.
### Replace With
Provides options to [replace](/reference/servoy-developer/object-editors/scripting-editor/code-rewriting.md#compare-and-replace) the current file with various other versions or resources:
* **Local History...**: Replaces the file with a version from local history.
* **Previous from Local History**: Replaces the file with the previous version from local history.
* **HEAD Revision**: Replaces the file with the HEAD revision in version control.
* **Index**: Replaces the file with the version from the index in version control.
* **Branch, Tag, or Reference...**: Replaces the file with a specific branch, tag, or reference.
* **Commit...**: Replaces the file with a specific commit in version control.
### Validate
Validates the current file, checking for errors and inconsistencies.
### Preferences
Opens the [Preferences](/reference/servoy-developer/preferences.md#preferences) dialog, where you can configure various settings for the editor.
### Open in Form Editor
keybinding: `Ctrl+Shift+A` Opens the current file in the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md#form-editor), allowing you to design and edit forms.
### Open Form Hierarchy
keybinding: `F4` Opens the [Form Hierarchy](/reference/servoy-developer/views/form-hierarchy.md#form-hierarchy). There you see the hierarchy tree (according to parent-child relation).
## Setting General Preferences for Script Editor
Settings for the Script Editor can be accessed via the context menu item Preferences. Clicking on this item reveals a filtered set for the Preferences pane, which reveals options for editing General and JavaScript editor preferences. Examples of customizable settings include:
* Code syntax coloring
* Use of smart carets
* Vertical ruler folding
* Code templates
* Types of annotation marks (caution, warnings, etc) shown in the rulers and in text
Script Editor Preferences
## Opening the Script Editor
To open a script in Script Editor, use one of the following methods:
* In the Solutions Explorer, right-click on the resource that you wish to open and select `Open in Script Editor`.
* In an open Form Editor window, access the context menu on a blank area and select `Open in Script Editor`.
* In an open Form Editor window, use the keyboard shortcut `CTRL+SHIFT+Z` (`shift-cmd-z`).
{% hint style="info" %}
Note\
To go back to the Form Editor, use `CTRL+SHIFT+A` (`shift-cmd-a`).
{% endhint %}
* In an open Form Editor window, select the desired object and in the Properties view, and click on the applicable event. A button will appear, which you can click to open the corresponding script file.
{% hint style="info" %}
Note\
If you have an element, such as a button, selected in Form Editor, switching to the Script Editor view will take you right to the line associated with the element.
{% endhint %}
## Creating Business Logic in Script Editor
To create or add business logic, you can either type directly into Script Editor, or use one of the following methods:
### From the Form Editor
1. Select an element in the Form Editor and double-click the appropriate Events item in the Properties panel. (This is the way most users will create a method, once they are familiar with Servoy.)
* A Select Method window will appear.
2. Select an existing method, or create a new method.
3. Click `OK` to go back to the Form Editor, or `OK and Show` to edit the script in Script Editor.
### Via the Solution Explorer Tree--New Method
1. Select an element (global or forms) in the Solution explorer.
2. Access the context menu (right-click).
3. Select `Create Method`.
4. Specify a Method Name in the New Method window
5. Select `Create Public` or `Create Private` as needed.
***
You can also insert existing business logic resources form Solution Explorer into your script. This method is discussed in the following section.
## Moving Code from the Solution Explorer into the Script Editor
The Script Editor allows users to quickly insert existing code resources (eg. methods, functions, and variables) within the Solution into the open Script Editor Window. To view a list of available methods:
1. Highlight a resource in the Solution Editor that contains the code you want to insert.
* You can use methods/functions found anywhere in the Solution Explorer, including in Globals, individual Forms, JS Lib, all the way down to Plugins.
* You can preview information about the method by hovering over the code resource name.
2. Click on the `Move Sample Code` or `Move Code` button.
* `Move Sample Code` inserts an example of how the selected code is can be used, along with informational comments:
```javascript
if (forms.main.foundset.find()) //find will fail if autosave is disabled and there are unsaved records
{
columnTextDataProvider = 'a search value'
columnNumberDataProvider = '>10'
columnDateDataProvider = '31-12-2010|dd-MM-yyyy'
forms.main.foundset.search()
}
```
* `Move Code` inserts only a bare function statement:
```javascript
forms.main.controller.find()
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.servoy.com/reference/servoy-developer/object-editors/scripting-editor/getting-started.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.