SAP Web IDE Code Editor Capabilities - Recap

[michal_keidar]

In this blog post I would like to refresh your memory regarding some of the capabilities offered in SAP Web IDE, specifically in the code editor.

So whether you're a new user or you have been with us for a while, I believe you will find the below information very useful 🙂

 

*The different options available in the context menu in the code editor.

 

Working in the Code Editor

Keyboard Shortcuts

Many actions in SAP Web IDE are available via keyboard shortcuts, and you can choose to modify the predefined shortcuts if you wish. For more information see Keyboard Shortcuts.

Important:
SAP Web IDE is a browser-based tool. Using certain browser shortcuts can trigger the assigned browser action. For example, Ctrl/Cmd + W will close the browser tab, therefore it should not be used as an SAP Web IDE shortcut.

 



 

Beautify

Beautify file formatting for JavaScript, JSON, XML, and CSS files using the context menu Beautify option or the matching keyboard shortcut.

• The XML beautifier formats code with line wrapping at 140 characters and an indentation of one tab space. The beautifier is not configurable.


• The CSS beautifier formats indentation with one tab space and is not configurable.


• You can customize the JavaScript beautifier settings for your project. For more information, see Customize JavaScript Beautifier Properties.

You can choose to beautify the file upon every save! See last section in this blog "Configure the Code Editor".

Using Multiple Cursors

You can use multiple cursors to rename several variables at once or to insert the same text in multiple locations.

To add cursors in your file, press Ctrl and click at the required locations. You can then type text, which will appear in all the cursor locations.

To remove multiple cursors click anywhere in the file.

Refactoring

You can change the name of a JavaScript function or variable by using the context menu Refactor or Alt + J . Enter a valid new name and click Rename. All references to the function or variable are automatically updated.

Viewing Git Blame

For files committed to Git, you can view who was the last developer to change each line, the commit that included the change, and the date of the change.

For more information, see Git Blame.

Navigating from View to Controller

While editing an XML view, you can navigate to the view's controller by using the Open Controller command from the context menu. The controller's JavaScript file is opened in a new tab.

If you right-click the name of an event handler and select Open Controller, the controller is opened to the event handler function (if it is defined in the controller).

Managing i18n Strings

In the context menu of an XML or JavaScript file, select Open i18n to open the i18n file defined in the manifest.json.

You can easily create a new string without having to open the i18n file by selecting Create i18n String. Add the string and its key, and they are added to the i18n file.

To edit a string, right-click on the i18n binding (for example, {i18n>fileType_title}) and select Edit i18n String.

You can get code completion when you need to select a string to add to an XML or JavaScript file. Put your cursor inside quotation marks and press Ctrl + Space , and get a list of strings defined in your i18n properties files. The properties files must be defined as i18n models in your manifest.

Generate JSDoc Comment Snippets

You can generate a snippet for a JavaScript function declaration that creates a template for documenting the function.
Right-click the function and choose Generate JSDoc Comment form the context menu.

 



 

Locate Objects in Code

You can use Go to Definition to navigate to methods declared explicitly in the dependency file and generated methods for metadata properties, associations, aggregations, and events of SAPUI5 controls.

The dependencies can be defined using a dependency declaration in either of the following ways:

• Use jQuery.sap.require(<moduleId1>,<moduleId2>,…). The dependency (target) file should contain the module declaration jQuery.sap.declare(<moduleId>).


• Use sap.ui.define([<dependencyFile1>,<dependencyFile2>,…], function(d1,d2,…){ }); where dependencyFile is the relative file path in the current project or the logical path to the library module. The dependency (target) files should contain a module declaration using sap.ui.define or Asynchronous Module Definition (AMD).

Right-click the object and choose Go to Definition from the context menu.

For more information, see Locate Objects in Code.

Code Completion

The code completion feature assists you when you are writing your code by preventing typos and other common mistakes, and providing API reference information for SAPUI5 objects.

Code completion is enabled by default, and can be disabled or re-enabled in the Preferences.

*If you're not getting the code completion dialog for certain UI5 controls, make sure the relevant UI5 library is checked in the project's settings, under SAPUI5.

For more information on the various options and examples, see Using Code Completion.

Code Validation

SAP Web IDE performs code checking (aka code validation) and displays the results in the file and in the Problems view.

 



 

Web IDE also performs XML semantic validation including deprecation checks per the SAPUI5 version used in the project.

You can configure when to trigger code validation and the level of messages to display in the Preferences.



 

For more information on JavaScript validation, see JavaScript Validation.

As an administrator of the account, you can also centrally define ESLint validation rules for JavaScript code checking, see Set JavaScript Rules for All Users.

For more information on XML validation, see XML Validation.

 

Problems View

You can view information about problems in your projects, using the Problems view.

It displays the total error count for each severity for all analyzed files, the scope of the analysis, the severity, the problem's description with a link to more information, a link to the file that contains the problem, and more.

The Problems view also provides the auto-fix feature for any fixable problem.

For more information, see Using the Problems View.

 



 

Outline Pane

The Outline pane helps you to understand the structure of the file and to navigate through the code. It provides a clear view of the main entities and displays the full hierarchy of the file's functions and objects.

*The Outline pane depicts 3 entities described in a .cds file.

 

*The Outline pane depicts the different functions and entities in a JavaScript file.

 

Tabs Handling

You can drag-and-drop the open tabs of the code editor, and use the keyboard shortcuts to move from tab to tab.

You can also make use of the buttons in the toolbar to navigate back and forward and to the tab that was edited last.



 

Configure the Code Editor

You can customize the appearance, input behavior, or save options of the code editor, all via the Preferences  in the left sidebar.

Appearance

You can customize the code editor theme (background color and color of text), font type and size, whether to show white-space characters, and more.

Input Behavior

You can choose whether to auto-pair characters such as quotation marks, brackets, etc,
use spaces for tab indentation, and New Line mode.

Save Options

My favorites: you can choose to automatically save your open files every 30 seconds, and also to automatically beautify the code upon every save!