SAP Web IDE Dev Guide (Local Installation)

customerDocument Version: 1.0 - 2014-10-15

SAP Web IDE Developer Guidefor Users with Local Installation

Table of Contents1 SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Learn About. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.1 SAP Web IDE Features and Benefits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.1 Assisted Development. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.1.2 User-Centric Customizability and Session Persistence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 Get Started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93.1 Setting up SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.1.1 Installing SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103.1.2 Optional - Changing the Orion Application Server Port. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.1.3 Optional - Connecting Remote Systems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.1.4 Starting SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

4 Develop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.1 SAP Web IDE Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.1.1 Optional - SAP Web IDE User Settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.1.2 Keyboard Shortcuts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.1.3 Resizing the SAP Web IDE Window Panes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184.1.4 Working with Files and Folders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194.1.5 Searching and Replacing in SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22

4.2 Customizing SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264.2.1 Checking Code with Customized JavaScript Linting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.2.2 Toggling Commenting Styles and Control Characters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374.2.3 Customizing Beautifier Properties for a Project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384.2.4 Customizing Cache Behavior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394.2.5 Picking a Code Editor Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.3 Creating New Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.3.1 Creating New Projects from Scratch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.4 Importing Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .424.4.1 Importing Projects from an Existing Archive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .424.4.2 Importing Applications from the SAPUI5 ABAP Repository. . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.5 Developing Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434.5.1 Enabling and Using Code Completion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434.5.2 Locating Objects in Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624.5.3 Enabling Dynamic API Reference Support. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634.5.4 Adding a New Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644.5.5 Creating an Application Descriptor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654.5.6 Editing Mock Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664.5.7 SAP Web IDE Layout Editor - Experimental. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

2 2014 SAP SE or an SAP affiliate company. All rights reserved.SAP Web IDE Developer Guide

Table of Contents

4.6 Deploying Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .754.6.1 Deploying New Applications to the SAPUI5 ABAP Repository. . . . . . . . . . . . . . . . . . . . . . . . .75

4.7 Updating Existing Applications Residing in the SAPUI5 ABAP Repository. . . . . . . . . . . . . . . . . . . . . . . 764.8 Running Applications for In-Development Testing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

4.8.1 Running Applications in Simulators or on Devices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774.8.2 Running Applications with Mock Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 784.8.3 Running Applications in the Fiori Launchpad Environment. . . . . . . . . . . . . . . . . . . . . . . . . . .80

4.9 Extending SAPUI5 Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .824.9.1 Creating New Extension Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 824.9.2 Extending Applications that Reside in the SAPUI5 ABAP Repository. . . . . . . . . . . . . . . . . . . .834.9.3 Creating New Extensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

4.10 Source Control in SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904.10.1 Setting Up Git. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904.10.2 Working with Git. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

5 Known Issues. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102

SAP Web IDE Developer GuideTable of Contents 2014 SAP SE or an SAP affiliate company. All rights reserved. 3

1 SAP Web IDEGet Started [page 9]Learn how to set up and start SAP Web IDE.

Learn AboutUnderstand how to use SAP Web IDE, and learn what the strategic features and benefits are.DevelopSee how SAP Web IDE supports key stages of the developer life cycle.


SAP Web IDE

2 Learn AboutSAP Web IDE is a fully extensible and customizable experience that accelerates the development life cycle with interactive code editors, integrated developer assistance, and end-to-end application development life cycle support. SAP Web IDE was developed by developers for developers.What is SAP Web IDE?The local installation version of SAP Web IDE is a trial shipment provided on SAP Community Network. The described features cannot be used productively. In addition, the functionality is restricted compared to the SAP Web IDE version that is available on SAP HANA Cloud Platform. The following features are not available if you are using SAP Web IDE as local installation: SAP HANA Cloud features:

Deploying to SAP HANA Cloud Mobile Platform Running applications on SAP HANA Cloud Extending applications on SAP HANA Cloud Importing applications from SAP HANA Cloud

Collaboration and JAM support Plug-in development Template development Consumption of external plug-ins

NoteTo use SAP Web IDE with its full functionality, go to SAP HANA Cloud Platform. For more information, see https://help.hana.ondemand.com/SAP_RDE/frameset.htm .

Who is it for?

SAP Application developers

SAP customers and partners are always looking for a modern and secure environment.

SAP Business experts and designers

You don't need to be a developer to create fully-functional prototypes and applications. Use the SAP Web IDE code editor to speed you along. As you type, use code assist to complete your code, or to support you with context-aware API reference information. SAP Web IDE knows what you are doing, even if you are a bit unsure.

Why use it?In today's fast-paced development environment, teams need a system that keeps up with them. SAP Web IDE allows your team to work more efficiently, effectively, and collaboratively than previous-generation IDEs. SAP Web IDE: Offers multiple code editors, templates, and interactive tooling to support all developers on your team,

regardless of their experience levels. Has an architecture that is simultaneously standards-driven (Orion), open-source-based (Git), and modular

(server-side REST interfaces), thereby allowing SAP Web IDE to mature and change with ease, offering minimal risk to your projects.

SAP Web IDE Developer GuideLearn About 2014 SAP SE or an SAP affiliate company. All rights reserved. 5

2.1 SAP Web IDE Features and BenefitsReview SAP Web IDE features to fully understand how your application development can benefit from them.SAP Web IDE contains key features that are intended to accelerate asynchronous development, especially in a geographically distributed team environment.

2.1.1 Assisted DevelopmentA collection of dynamic interactive features, code completion, and API reference support, facilitates development by expediting coding and testing.You can also start your development based on predefined templates.

2.1.1.1 Code CompletionUse code completion to assist in writing JavaScript (for SAPUI5 namespaces) or XML code. Inline code completion popups provide contextually-aware API reference support, and make hints available to the editor directly where they are needed.The editor completes words, code fragments, or entire SAPUI5 objects (including methods, properties, and events) based on the current context, and the context of other similar words within the same component. The selected code fragment is then entered into the cursor location in syntactically correct format.To generate an appropriate list of suggestions, SAP Web IDE parses and analyzes the context by reviewing: The parent node The current node Any prefixesSAP Web IDE then determines which suggestion is most appropriate: whether to suggest a namespace, a control, an attribute, event, value, or in the case of XML, only syntax. You can also select entire code snippets or custom objects. All suggestions appear as a filtered and sorted list, with an icon that indicates the type of code to be injected, allowing you to quickly find and select the correct option.

Related Information

Enabling and Using Code Completion [page 43]Try It: XML Code Assist [page 52]Try It: XML Code Snippet Insertion [page 55]Try It: JavaScript Code Assist Basics [page 45]Try It: JavaScript Code Assist with a User-Defined Object [page 49]Try It: XML Metadata Completion from Schema Files [page 57]


Learn About

2.1.1.2 Integrated and Dynamic API Reference SupportAPI reference information is embedded in SAP Web IDE, providing contextually-aware reference information on demand when you are writing code.

API reference information is available in a standalone pane. You can show this pane any time by clicking ViewAPI Reference Pane . The pane appears docked to the right side of the editor. Use this information with code completion to get API-specific help for code elements that are in focus.Use of the API Reference pane is optional. It remains docked and available until you close it.

Related Information

Enabling Dynamic API Reference Support [page 63]

2.1.1.3 JavaScript Linting for Syntax ValidationThe JavaScript editor in SAP Web IDE supports JavaScript linting for all opened *.js, *.xsjs, and *.xsjslib files. The linting functionality does not reside in the editor, but in a linter plugin that you select.This allows you to explicitly configure or toggle between one more linters, choosing the one that best helps you identify code that doesn't correspond to certain style guidelines, or one that best flags common or hard-to-find errors.The benefit of using multiple linter plug-ins is that it: Allows you to choose the rendering and behavior you prefer, depending on the stage of your code

development, and the benefits of each plug-in. Increases version independence: if a new linter comes available you can simply choose that plug-in. Supports multiple usage contexts beyond SAP Web IDE, so rendering remains predictable and familiar,

regardless of the editor used. For example, use LinterCore.js plug-in for: A voter job within a build process to execute linting with the same configuration to support continuous

integration. A nightly lint job to lint all projects with the same configuration to support continuous inspection.

2.1.2 User-Centric Customizability and Session PersistenceSAP Web IDE shares a common repository for code; however, all individual user settings, including any configuration changes or window resizing, are automatically saved when you exit. Your preferences persist, despite the repository being shared.Key customizations include:

SAP Web IDE Developer GuideLearn About 2014 SAP SE or an SAP affiliate company. All rights reserved. 7

Workspace View If you have changed the size of the workspace, the console, or various panes by dragging the splitter, the splitter's new position is saved automatically and your views are restored when you reopen SAP Web IDE.

Reset View You can reset to the default settings by choosing View Reset to Default .

Custom Code Readability and Inline Error Validation

The code beautification support allows you to apply readability standards to the files you work in. Define custom beautification settings and apply them to files as needed.You can also configure custom code validation checks as required so issues can be displayed and corrected inline.

Cache behavior Caching can be controlled by implementing custom properties.

Related Information

Customizing SAP Web IDE [page 26]


Learn About

3 Get StartedBefore you start SAP Web IDE, ensure that you have installed the correct Java runtime version, the Orion Application Server, and the standalone p2 director.Java RuntimeYou have installed Java runtime 7 (at least version 1.7) or higher in the 64 bit version. If required, get an installer from (Java SE Download ) and follow the instructions.

NoteYou can check the version by entering java -version in the command shell (Windows) or terminal window (Mac OS).Output example:

java version "1.7.0_55"Java(TM) SE Runtime Environment (build 1.7.0_55-b13)Java HotSpot(TM) 64-Bit Server VM (build 24.55-b03, mixed mode)

Local Folder SAPWebIDECreate the local folder SAPWebIDE:Windows Mac OS

In the command shell, enter the following commands:1. cd \2. C:\ mkdir SAPWebIDE3. C:\ cd SAPWebIDE

The system shows your local folder SAPWebIDE.

In the terminal window, enter the following commands:1. / cd /Applications/2. Applications mkdir SAPWebIDE3. Applications cd SAPWebIDE

The system shows your local folder SAPWebIDE.

Orion Application ServerDownload the Orion Application Server, version 5.0, and unzip it to your SAPWebIDE folder:Windows Mac OS1. Download from http://www.eclipse.org/down

loads/download.php?file=/orion/drops/R-5.0-201402262325/eclipse-orion-5.0-win32.win32.x86_64.zip&mirror_id=580 .

2. Unzip to c:\SAPWebIDE.

1. Download from http://www.eclipse.org/downloads/download.php?file=/orion/drops/R-5.0-201402262325/eclipse-orion-5.0-macosx.cocoa.x86_64.zip&mirror_id=17 .

2. Unzip to /Application/SAPWebIDE by entering the following in the terminal window:a. / cd /Applications/b. Applications cd SAPWebIDEc. SAPWebIDE unzip ~/Downloads/eclipse-

orion

Standalone p2 Director

SAP Web IDE Developer GuideGet Started 2014 SAP SE or an SAP affiliate company. All rights reserved. 9

Download the standalone p2 director and unzip it to your SAPWebIDE folder:Windows Mac OS1. Download from http://www.eclipse.org/down

loads/download.php?file=/tools/buckminster/products/director_latest.zip&mirror_id=324 .

2. Unzip to c:\SAPWebIDE.

1. Download from http://www.eclipse.org/downloads/download.php?file=/tools/buckminster/products/director_latest.zip&mirror_id=324

2. Unzip to /Application/SAPWebIDE by entering the following in the terminal window:a. / cd /Applications/b. Applications cd SAPWebIDEc. SAPWebIDE unzip ~/Downloads/

director_latest.zip

3.1 Setting up SAP Web IDEInstall the SAP Web IDE zip file. You can also change the Orion Application Server port and connect remote systems.

Procedure

1. Install SAP Web IDESee Installing SAP Web IDE

2. Optional - Change the Orion Application server portSee Optional - Changing the Orion Application Server Port

3. Optional - Connect remote systemsSee Optional - Connecting Remote Systems

4. Start SAP Web IDESee Starting SAP Web IDE

3.1.1 Installing SAP Web IDEDownload the SAP Web IDE zip file and install the Orion Application Server plugin.

Prerequisites

Make sure you have performed the steps described in the Get Started [page 9] section.


Get Started

Procedure

1. Download the SAP Web IDE zip file from SCN and unzip it to your local hard drive.2. Install the Orion Application Server plugin:

Windows Mac OSIn the command shell, enter the following commands:1. C: cd /d C:\SAPWebIDE\director2. C:\SAPWebIDE\director director -

repository jar:file:/!/ -installIU com.sap.webide.orionplugin.feature.feature.group -destination c:\SAPWebIDE\eclipse

In the terminal window, enter the following commands:1. / cd /Applications/SAPWebIDE/director2. director ./director -repository

jar:file:/\!/ -installIU com.sap.webide.orionplugin.feature.feature.group -destination /Applications/SAPWebIDE/eclipse

If you have installed the Orion Application Server to a different folder, adapt the command accordingly: Windows: director -repository jar:file:/!/

-installIU com.sap.webide.orionplugin.feature.feature.group -destination

Mac OS: director -repository jar:file:/\!/ -installIU com.sap.webide.orionplugin.feature.feature.group -destination

3.1.2 Optional - Changing the Orion Application Server PortBy default the Orion Application Server runs on port 8080. You can change the port, e.g. if there are conflicts with other servers running on the same machine.

Procedure

1. Change the port in the following line of the orion.ini file:Windows Mac OS1. Open the orion.ini file with a text editor, e.g.

WordPad.2. Change the port in line

Dorg.eclipse.equinox.http.jetty.http.port=8080 (e.g. 9080).

3. Save the file and close it.

1. In the terminal window, enter the following commands:a. / cd /Applications/SAPWebIDE/

eclipse/orion.app/Contents/MacOSb. MacOS vi orion.ini

2. Change the port in line Dorg.eclipse.equinox.http.jetty.http.port=8080 (e.g. 9080 ).


Windows Mac OSIf you use vi editor, press I to edit and ESC when you finished editing, and enter :wq to save and quit.

For more information see http://wiki.eclipse.org/Orion/How_Tos/Install_Orion_on_Localhost .

3.1.3 Optional - Connecting Remote SystemsYou can define service destinations to access remote systems.

Context

The service destinations are described via the following property files:

Key Value

WebIDEUsage Enter one or more of the possible values: odata_abap:

For the OData functionality of Gateway (corresponds to URL path /sap/opu/odata)

odata_gen:for generic OData functionality (service URL must be provided manually in the New Project wizard)

ui5_execute_abap:For executing SAPUI5 applications from the SAPUI5 ABAP Repository (corresponds to URL path /sap/bc/ui5_ui5)

dev_abap:For extensibility scenarios and developing or deploying to SAPUI5 ABAP Repository (corresponds to URL path /sap/bc/adt)

bsp_execute_abap:For working with Fact Sheets (corresponds to URL path /sap/bc/bsp)

odata_xs:For HANA XS OData services (corresponds to URL path/sap/hba)


Get Started

Key Value

NoteWhen you enter multiple usages for a destination, separate them by comma without space (e.g. odata_abap,ui5_execute_abap).

WebIDEEnabled true

WebIDESystem

sap-client

Procedure

1. To connect your remote system , you have to do the following:Windows Mac OS1. In the command shell, enter the following commands:

a. C: cd /d C:\SAPWebIDE\eclipseb. C:\SAPWebIDE\eclipse mkdir

config_master\service.destinations\destinations

c. C:\SAPWebIDE\eclipse cd config_master\service.destinations\destinations

d. C:\SAPWebIDE\config_master\service.destinations\destinations echo #ServiceDestination >

e. C:\SAPWebIDE\config_master\service.destinations\destinations notepad

2. Paste the content of example below to this file.3. Save the file and close it.

1. In the terminal window, enter the following commands:a. / cd /Applications/SAPWebIDE/

eclipse/b. eclipse vi orion.app/Contents/

MacOS/config_master/service.destinations/destinations/

2. Paste the content of the example below to this file.3. Save the file and close it.

Example for eclipse/config_master/service.destinations/destinations/:

Description= descritpionType=HTTPTrustAll=trueAuthentication=NoAuthenticationName=ProxyType=InternetURL=https\://\:WebIDEUsage=odata_abap,ui5_execute_abap,dev_abapWebIDESystem=WebIDEEnabled=true


3.1.4 Starting SAP Web IDEStart SAP Web IDE and access remote systems (if you have defined them).

Prerequisites

You have started the Orion Application Server.

NoteIn Mac OS, in the Security & Privacy settings, make sure that you have allowed apps to be downloaded from Anywhere.

If you start the Orion Application server for the first time, you have to create a new account for it:1. Choose Create a new account.2. Enter user and password.

Procedure

1. Access SAP Web IDE via the URL http://localhost:8080/webide/index.html.(The default port is 8080. If you have changed the port, you have to use the port that you have defined.)

2. On the Orion Server Application login page, enter the user and password that you have defined.If you have configured remote systems, you will be able to access them, e.g. in the project creation wizard.


Get Started

4 DevelopSAP Web IDE naturally supports two of the application development life cycle stages: development and stabilization.

Initiating a New Project Developing Applications [page 43] Running Applications for In-Development Testing Source Control in SAP Web IDE [page 90]

4.1 SAP Web IDE BasicsSAP Web IDE offers several state-of-the-art IDE features.

Context

MenusIn SAP Web IDE, you can choose from the following menus to perform your actions: Menu bar Global toolbar

Depending on the item that is activated in the workspace, you can choose from the icons in the global toolbar (icons of actions that are not applicable are greyed out).

SAP Web IDE Developer GuideDevelop 2014 SAP SE or an SAP affiliate company. All rights reserved. 15

Context menuTo open the context menu in the workspace, right-click a folder or file name.

LogoutTo end your session and log out, choose Logout in the top right corner of SAP Web IDE.

NoteIf you start SAP Web IDE after you have been logged out, the system restores the latest status of the workspace and all the editors that have been opened.

4.1.1 Optional - SAP Web IDE User SettingsYou can set your user settings for working in the SAP Web IDE.

To open the setting pane, from the left side bar, choose You can set the following: Code check settings enable and disable inline code validation. The project-level appearance settings are used

to validate code and flag messages. Code completion settings are used to enable inline code completion as well as comment completion. Code editor settings. You can select the theme to be used by the code editor and set the Enable Auto Save

option to have the changes in all open documents saved automatically at preset intervals.


Develop

Related Information

Enabling and Using Code Completion [page 43]Checking Code with Customized JavaScript Linting [page 27]

4.1.2 Keyboard ShortcutsYou can use keyboard shortcuts to perform actions from the menus of SAP Web IDE.The following keyboard shortcuts are available in SAP Web IDE (and are also indicated in parentheses ((...)) in the menus):Action Keyboard ShortcutNew file CTRL + ALT + NNew folder CTRL + ALT + SHIFT + NNew project CTRL + ALT + SHIFT + ONew extension project CTRL + ALT + SHIFT + EClose file ALT + WClose all files ALT + SHIFT + WSave file CTRL + SSave all files CTRL + SHIFT + SUndo CTRL + ZRedo CTRL + YCut CTRL + XCopy CTRL + CPaste CTRL + VRename F2Delete DELToggle show invisibles CTRL + IToggle line comment CTRL + 7Toggle block comment CTRL + SHIFT + 7Add todo comment CTRL + ALT + TIndent line TABOutdent line SHIFT + TABMove lines up ALT + UP ARROW


Action Keyboard ShortcutMove lines down ALT + DOWN ARROWCopy lines up ALT + SHIFT + UP ARROWCopy lines down ALT + SHIFT + DOWN ARROWBeautify JavaScript CTRL + ALT + BGoto JavaScript definition CTRL + ALT + GRun ALT + SHIFT + RRun without frame CTRL + ALT + SHIFT + RFind and replace CTRL + FAdvanced repository search CTRL + SHIFT + FView console CTRL + SHIFT + MView API reference pane CTRL + SHIFT + AView Git pane CTRL + SHIFT + VView outline CTRL + SHIFT + UUser preferences CTRL + .Extensibility pane CTRL + SHIFT + E

4.1.3 Resizing the SAP Web IDE Window Panes

Change and restore window pane portions.

Context

Changes you make in one session persist to the next

Procedure

1. Change the size of various panes of SAP Web IDE by dragging the splitter.2. Restore SAP Web IDE defaults by choosing View Reset to Default .


Develop

4.1.4 Working with Files and FoldersChange files and folders in various ways.

Context

Opening and Closing FilesOpen files in the SAP Web IDE code editor by double-clicking them in the workspace tree on the left side of SAP Web IDE or by opening the context menu and choosing Open with Code Editor. .There are different ways to close files: Close one file:

Click x next to the file name in the tab area. Choose File Close . Open the context menu with a right mouse click on the tab and choose Close.

Close all open files: Choose File Close All . Open the context menu with a right mouse click on the tab and choose Close All.

Close all files except the active one: Choose File Close Others . Open the context menu with a right mouse click on the tab and choose Close Others.

Save or discard your changes before closing.Cutting, Copying, and Pasting Files or FoldersYou can cut, copy, and paste files or folders to other locations: By using the key combinations Ctrl + x and Ctrl + v or by selecting Edit Cut or Edit Paste . By using key combinations Ctrl + c and Ctrl + v or by selecting Edit Copy or Edit Paste .Renaming Files or FoldersTo rename files or folders that are not on the top level in the workspace, choose one of the following options: Choose Rename from the context menu. Select Edit Rename .A wizard opens allowing you to enter a new name.


4.1.4.1 Importing FilesImport files into SAP Web IDE from the local file system.

Procedure

1. Choose the destination folder in the workspace.2. Choose File Import File . The File pop up is displayed.3. Choose Browse to go to the location of the file, select it, and choose Import.4. The imported file is added to the destination folder.

4.1.4.2 Working with Multiple FilesYou can open multiple files in the code editor, each of which appears in a separate tab.Tab AreaIf more than one file is opened, each one is shown in a different editor tab in the code editor. Each tab shows the file name and its extension as well as an x, which allows you to close the file by clicking it. If a file is being edited, its file name is shown in bold and a small asterisk appears next to its name.When you hover over the file name, the file path appears in a tooltip.Maximizing the Editing AreaTo enlarge the editing area, double-click any tab in the editor. All open SAP Web IDE panes disappear, and the complete current editor area is fitted to your screen. To minimize it, double-click the tab.Tab OverflowIf you open more files in the editor than there is space for holding their tabs in the editor area, a small menu appears on the right of the tab area:

Use the arrows to navigate to tabs in either direction. Click on the list icon on the right to see the names of all opened files.


Develop

4.1.4.3 Working with Code and Code CommentsUse common shortcut key codes to make quick edits in open files. All edit actions are also available from the Edit menu.

Context

Feature support depends on file types.

Procedure

1. To cancel or reapply the last one or more edits made, press Ctrl + Z to undo or Ctrl + Y to redo.2. To toggle invisibles of the file, press Ctrl + L.3. (For JS, HTML, and XML files only) To toggle the display of inline code comments:

To show and hide line comments, press Ctrl + /. To show and hide block comments, press Ctrl + Shift + /.

4. (For JS files only) To flag code with TODO, press Ctrl + Alt + T.A //TODO line comment is added at the cursor location. If the line already contains a //TODO comment, the action is ignored.

5. To change indents: For indents, press Tab. For outdents, press Shift + Tab.

6. To move lines: To shift a line up, press Alt + up arrow. To shift a line down, press Alt + down arrow.

7. To copy lines: To copy a line up, press Alt + Shift + up arrow. To copy a line down, press Alt + Shift + down arrow.

8. To beautify code with the settings defined for this feature, press Ctrl + Alt + B.For information on beautifier properties, see Customizing Beautifier Properties for a Project.


4.1.4.4 Showing the Location of Open Files in the Repository Tree Link the code editor to the repository to easily see the location of a file being edited. If the branch is closed, it is expanded to the correct folder.

Procedure

1. To permanently link the editor with the workspace, choose View Link Repository Browser with Editor . If you only want to highlight the currently active item in your editor and the workspace is not yet linked with the editor, right-click on its tab and choose Show in Repository Browser from the menu.

2. To unlink the editor from the workspace, choose View Unlink Repository Browser with Editor .

4.1.4.5 Refreshing the Repository TreeUpdate your repository tree and synchronize it with your workspace by right-clicking a file or folder in your workspace and selecting Refresh.

4.1.5 Searching and Replacing in SAP Web IDEChoose how you want to perform searches in SAP Web IDE. SAP Web IDE allows you to perform an advanced search and replace across multiple files in a project. Or you can perform a simple string search within an open file in the code editor.

4.1.5.1 Searching for Files or Content in the RepositoryPerform a file or string search within a folder or across all projects in your workspace. To determine the success of your search, use preview to quickly validate results, and refine your search further as needed.

Context

NoteSAP Web IDE uses index-based searching. Depending on the size of your workspace and number of files, some searches may take some time to return matching results. In some cases, the length of time can last minutes, and might suggest that the search was unsuccessful. Results are returned in due course.


Develop

Procedure

1. Click Search Advanced Repository Search .2. In the search pane, define the type of search:

To search for a file: enter the filename, then choose Filename. To search for a string: enter the string, then choose Content.

3. (Optional) Refine search results further: Set Folder to determine where the search scope is to be limited: use All to search across the entire

workspace, use Project to search across a single project, and use Folder to search within the current directory. If you choose Folder or Project, type the path to the target you require.

Set File Type to limit file or content searches to files with a specified extension.4. Click Search or press Enter to submit the values and start the search.5. In the results list at the bottom of the search pane, you see search results, enumerated by file.

Expand or collapse files with results, which is useful when lists are long. Below each file, positive matches are emphasized with a blue highlight. Hover over specific results to get the context of that item.If you do a search of file content for the string test, you might see results shown as in the following example. You can choose the /Test/ folder as the target, then change File types from all files (*), to *.js. Results are limited to two files. By hovering over the first result in the first file, you can quickly review the context without opening the file.

6. When you have identified the file and row you require, double-click the specific search result to open the file

with the appropriate row shown as a pale blue highlight.


4.1.5.2 Replacing Strings Across Multiple FilesPerform an advanced repository find and replace across multiple files with the Search pane.

Procedure

1. With or without any files open in the code editor, open the Search pane: Click Search Advanced Repository Search .

Click the Search icon ( ) from the right-side editor support tray.2. In the Search pane, type the string you want to find.3. (Optional) Refine search results further:

Set Folder to determine where the search scope is to be limited: use All to search across the entire workspace, use Project to search across a single project, and use Folder to search within the current directory. If you choose Folder or Project, type the path to the target you require.

Set File Type to limit file or content searches to files with a specified extension.4. Click Find.5. In the results list at the bottom of the search pane, you see search results, enumerated by file.


Develop

6. Enter the replace text and decide whether to perform:

A serial replace that allows you to evaluate each instance case-by-case. In the results list, hover over each result and click the replace icon at the end of the line to replace the sting. As each instance is replaced, it disappears from the results list. Skip all results you do not want to replace.

An inline replace that allows you to select only specific file reuslts, and clicking the replace icon adjacent to the result itself.

A global replace of all results in the list. Click Replace All.

NoteYou cannot undo the global replace operation.


4.1.5.3 Finding and Replacing in an Open File

Perform a simple find and replace within a single open file from the code editor.

Context

These searches are limited to the file that is currently in view. To search and replace across multiple files, perform an advanced repository search. See Replacing Strings Across Multiple Files

Procedure

1. Open the file(s) you want to perform a simple string search on.2. For the file that is currently in view, select Search Find and Replace .3. In the pane at the bottom of the code editor:

To perform a basic string search only, enter the Search for string. Use the adjacent up and down arrows to find instances previous to or following the current cursor location.

To additionally replace text enter both Search for and Replace with strings. To evaluate each search and replace serially, click Replace. If other instances exist, they will be selected. Otherwise, to automatically search and replace all instances, click Replace All.

4. If you replaced strings, save the file.

4.2 Customizing SAP Web IDE

Customize your developer experience beyond just changing the size and placement of panes in SAP Web IDE . You can also make specific changes to the appearance and behavior of the code editor. Any customization you make in one session persists to the next. Customizations can vary from user-to-user.

Related Information

User-Centric Customizability and Session Persistence [page 7]


Develop

4.2.1 Checking Code with Customized JavaScript LintingUnless you disable linting, once you open a *.js, *.xsjs, or *.xsjslib file, linting is triggered and the detected inline code issues will be displayed as annotations within the editor. Understand how to configure and use code checking in your project.

Related Information

Optional - SAP Web IDE User Settings [page 16]

4.2.1.1 Enabling or Disabling Code Checking for JavaScriptDifferent supported linters have a unique combination of benefits. Choose which linter you want to use for syntax validation and issue detection. Alternatively, you can disable linting if you choose.

Context

Supported linter plug-ins come integrated with SAP Web IDE. Use a validation tool called ESLint (www.eslint.org) or a hint tool called JSHint (www.jshint.com ), or even use a combination of both. Understand the benefits

of each plug-in and choose how to set up and use these plug-ins in your project.

NoteLinting is always enabled. The default setting uses ESLint that is triggered onChange. However you can change this default at any time.

Procedure

1. Click the settings icon in the code editor tray.2. Select Code Check.3. To enable the display of issues inline:

a) Select a plug-in: JSHint does not hide other issues. No custom checks are allowed with this option. ESLint hides other issues until the current one is resolved. Custom checks are allowed with this

option.b) Determine the trigger point for syntax checking:

Only when you save the file. Choose Save.


Every time a change is made. Choose Change.4. To suppress the display of issues inline, select Disable Code Check to stop displaying issues.5. Click OK.

4.2.1.2 Opening and Reading Files With AnnotationsThe linting plug-in annotates files with flags indicating different seventies. Understand the severity level of these flags so when you open a file you know how to interpret these annotations.

Context

Procedure

1. In the JavaScript editor open a supported file type (that is, *.js, *.xsjs, or *.xsjslib).Each annotation is colored depending on the severity:

Color Severity Fix PriorityRed Error Fatal, high, mediumYellow Warning High, medium, lowBlue Information Medium, low, or info

2. Hover over an annotation to read a tooltip that displays one or more detected issue and possible resolution for the annotated line.The detected issues of an annotated line are categorized (for easy identification), identified, prioritized, and described , so you can determine how best to resolve issue.Categories Are used to classify the issue: for example, possible error, best practice, stylistic issue, and

others.Rule IDs Are used to define the logic for detection or list known issue exceptions. For example, semi is a

rule id for ESLint, and W033 is a rule id for JSHint.Message Detail the issue or suggest a possible resolution.

3. For complete reference details about a detected issue:a) Select the annotated line.b) Hover over the annotation.c) Press Ctrl+N, where N is the placement order of the issue list. For example, press Ctrl+1 for the first issue

in the list, but Ctrl+2 for the second one.d) Read the corresponding reference page that appears.


Develop

4. Resolve the issue and continue development and iterative fixes as described the configured plug-in.

To understand how to use the ESLint OnChange plug-in to move through these changes, see Try it: Using the ESLint OnChange Plug-in.

4.2.1.2.1 Try it: Using the ESLint OnChange Plug-in to Correct Code

A self-guided example that demonstrates how to use the default ESLint OnChange plug-in to validate an open JavaScript file.

Prerequisites

Setup a ESLint OnChange plug-in as described in Setting or Disabling Linting and Hings for JavaScript.Then follow the steps in Opening and Reading Files With Annotations to open a file named Linter.js.


Procedure1. Once the Linter.js is opened, use the colored square flags to determine which potential issues are the

most serious.

2. Looking at the image and using the tooltips, you explore the most critical error. In this case, the error on row

799 is a fatal error.

3. Reading the hover text, you know that an unexpected token is a solution to the problem. You correct this

token and notice the flag disappears.4. Correct the issue on row 797 by repeating the hover process.5. Insert a code fragment that transgresses a well-known rule.

For example, JavaScript allows you to write a condition statement like this:

if (condition) statement;

However, ESLint flags this because the statement is not blocked. Notice that real-time errors are emphasized, meaning that all other flagged issues temporarily disappear. This allows your attention to be placed on the current problem and fix it instantaneously. This is a key feature of the OnChange timepoint plug-in.


Develop

6. Insert the block by placing braces around the statement.Notice that by correcting the syntax error, all other detected issues reappear.

7. Save and exit the file.

4.2.1.2.2 Linter Plug-in Shortcut Reference

Instead of using menu commands, use shortcut keys to interact with the linter plug-in or its settings.

Shortcut ActionCtrl+N Gets more details for the issue of an annotated line.

Substitute N, with the issue's list order. That is, for the first issue, enter Ctrl+1.

Alt+1 Toggles to the ESLint plug-in.Alt+2 Toggles to the JSHint plug-in.Alt+3 Toggles to the ESLint and JSHint plug-in. Duplications are

possible; avoid them by customizing the configuration. See Refining Project Linting with Customizations.

4.2.1.3 Customizing Code Checking for a Project

Refine linting behavior by performing targeted customizations: to rules, to checks, and to configuration.

4.2.1.3.1 Customizing Rule Exceptions From a Source File

Turn rules off and on in different sections of your JavaScript source, simply by adding lines to the file. The implementation varies between ESLint and JSHint plug-ins. However, when the exception is added, the default linting configuration is ignored in those defined sections.

Context

You can configure exceptions from within your JavaScript source files using special flags that disable and then enable syntax checking. If you disable a section, simply insert the enable code when you want the checks to start again.


Procedure

1. To disable and enable ESLint checks on sections of your code, add these lines in appropriate areas of your file:

Sample Code

// To temporary disable ESLint results in your file use the following format // Suppress all ESLint results between comments /* eslint-disable */ alert('foo'); /* eslint-enable */ // You can also disable and enable back ESLint results of specific ESLint rules by mentioning the corresponding rule id // (for doing so you need to know the specific rule id; the rule id will be displayed in the tooltip, if you hover over an annotation) /* eslint-disable no-alert, no-console */ alert('foo'); console.log('bar'); /* eslint-enable no-alert */

2. To disable and enable JSHint customizations on sections of your code apply comments that are prefixed with global.Use these comment on single or multiple lines. These comments are function-scoped: if you put comments inside a function, they affect only this function's code. Alternatively you can use also the JSHint rule IDs (those displayed in the tooltip of an annotation).To hide a warning about unused variables, just add the following snippet to your file:

Sample Code/* jshint -W034 */

To enable this disabled warning use:

Sample Code/* jshint +W034 */

3. To get notified by JSHint when undefined or unused variables occur in a file, use jshint undef:In this case, the jshint undef uses a list of comma-separated values that define rule.

Sample Code/* jshint undef: true, unused: true */


Develop

4. To include a directive for telling JSHint about global variables that are defined elsewhere, add this line.If value is false (which is the default), JSHint treats that variable as read-only.

Sample Code /* global MY_GLOBAL: false */

5. To blacklist certain global variables from the current file, include:

Sample Code/* global -BAD_LIB */

6. Save these changes.

4.2.1.3.2 Customizing Default Linting for a Project By Editing SettingsThe linter plug-in comes with a default configuration for both tools ESLint and JSHint. Override the default settings for ESLint and/or JSHint per project.

Context

Each configuration defines the rules to be executed and with which parameters. Additional metadata per rule is also supplied by the Linter plug-in. This metadata: Renders the annotations as an error, a warning, or information. Displays additional information via the tooltip for each annotation (like priority, category, rule ID). Offers a help link for each rule containing more detailed rule information (like how you can fix the detected

issue).

Procedure

1. Right click the project and choose Project Settings.2. Click either ESLint Settings to enable and configure custom ESLint rules or JSHint Settings to enable and

configure custom JSHint rules for this project.a) To enable a rule, check the box adjacent to the rule name.b) Configure the enabled rule by setting the severity, category, and priority for it. See Default Linting

Configuration Reference.For example, to ensure get a low priority notification when a mix of upper and lower case characters are not used (that is, camel casing) enable the CamleCase ESLint rule, and set the severity to info, the category to stylistic issue, and the priority to low. This rule yields the following result in the code editor:


However, to change the notification to this example, requires that you change severity to error, the category to best practice, and the priority to high.

c) Click Save.

4.2.1.3.2.1 Default Linting Configuration ReferenceReview the default linting configuration. Customizations always override these defaults.

ESLint Rule Execution Defaults

See these resoures for additional support:

For ESLint configuration details, see Configuring ESLint . For ESLint rule information, see Rules .

ESLint Rule Metadata Defaults

Attributes can have multiple supported values. Use the: severity attribute to define whether an issue renders as error, warning (default), or

information. priority attribute to prioritize the seventies as fatal, high, medium for an error; high,

medium, or low for a warning; medium, low, or info for an information category attribute for a better semantic classification: possible error, best

practice, stylistic issue, and others help attribute (optional) to override the default help links listed jslint4sap attribute (optional) to define the corresponding JSLint4SAP rule that

suppresses existing JSLint4SAP exceptions.

JSHint Rule Execution Defaults

See these resoures for additional support.

For JSHint configuration details, see Configuration . For JSHint options reference information, see JSHint Options For JSHint error information, see Error Explanations .

JSHint Rule Metadata Defaults

Attributes can have multiple supported values. Use the:


Develop

severity attribute to define whether an issue renders as error, warning (default), or information.

priority attribute to prioritize the verities as fatal, high, medium for an error; high, medium, or low for a warning; medium, low, or info for an information

category attribute for a better semantic classification: possible error, best practice, stylistic issue, and others

help attribute (optional) to override the default help links listed jslint4sap attribute (optional) to define the corresponding JSLint4SAP rule that

suppresses existing JSLint4SAP exceptions. eslint attribute (optional) to define the corresponding ESLint that suppresses duplicate

issues when using both ESLint and JSHint.

4.2.1.3.3 Customizing with New Linter DevelopmentUse the SAP Web IDE to develop custom linters using the SpiderMonkey Parser API.

Context

For development support see: https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API and http://eslint.org/docs/developer-guide/ .

Procedure

1. Begin by following the basic source code format for a rule:

Sample Code

function customRule (context) {

"use strict";

return {

// properties go here

};

}

2. For each rule you represent as a single object, add several properties.The properties are equivalent to AST node types from SpiderMonkey.


Sample CodeIf your rule wants to know when an identifier is found in the AST, then add a method called Identifier:

function customRule (context) { "use strict"; return { "Identifier": function(node) { // do something with node } };}

Each method that matches a node in the AST is passed to the corresponding node.3. To determine whether or not an issue needs reporting, evaluate the node and it's surrounding tree.

By default, the method matching a node name is called during the traversal when the node is first encountered. However, if you need to visit the node on the other side of the traversal, as it comes back up the tree, add :exit to the end of the node type:

... return { "Identifier:exit": function(node) { ...

This capability allows you to keep track as the traversal enters and exits specific parts of the AST.4. Add context.report() to publishes a warning or error (depending on the configuration being used).

This method accepts three arguments: the AST node that caused the report, a message to display, and an optional object literal which is used to interpolate.

Sample Codecontext.report(node, "This is unexpected!");

or

Sample CodeThe node contains all of the information necessary to figure out the line and column number of the offending text as well the source text representing the node.

context.report(node, "Identifier '{{name}}' is not in camel case.", { name: node.name });


Develop

4.2.1.4 Integrating Custom Linter Rules into SAP Web IDETo execute a new linter rule for your project, include a .eslint.rules folder as a child to the .lint folder of your project.

Context

If the folder is added, rules are automatically be integrated by default.

Procedure

1. In /.lint, create the .eslint.rules folder.2. Copy the source code to /.lint/.eslint.rules.3. Ensure that the filenames for the source matches the rule ID used.

For example, for the localization custom check, notice the rule ID is i18n and the file name is i18n.js.4. Ensure that you configure the custom check before using it.

The configuration of custom checks works in the same way as built-in checks.

4.2.2 Toggling Commenting Styles and Control CharactersToggle comment styles and invisible characters to customize the appearance of your code.

Procedure

1. To display shorter comments in a line, select a line of text and choose Edit Toggle Line Comment .Comment syntax is appended to the code fragment automatically as line. Each comment line is prefixed with //. For example:

//Use the comment style for short comments.

2. To display longer comments in a block of text, select multiple lines and choose Edit Toggle Block Comment .Comment syntax is appended to the code fragment as a block using /* and */ to wrap the comment block. For example:

/* This is a comment block. Use this block comment stylewhen comments span multiple lines. This style is easier to read you should choose blocks for comment that offers a longer explanation or description.*/


3. (For JS files only) To flag code with TODO, press choose Edit Add Todo Comment .A //TODO line comment is added at the curosor location.If the line already contains a //TODO comment, the action is ignored.

4. To show and hide invisible control characters, select Edit Toggle Show Invisibles .All control characters, such as space, tab, newline, and paragraph, appear or disappear accordingly.

4.2.3 Customizing Beautifier Properties for a Project

Beautify JavaScript to make the source code more readable. Once applied, the code is reformatted by parsing the JavaScript source code into components, (for example statements, blocks, and so on) and applying the correct style and format to the code.

Context

Values you configure apply to the whole project.

Procedure

1. Right-click a project name, then choose Project Settings.2. Select Beautifier.3. Determine how you want lines to be treated:

Option DescriptionBreak lines on chained method

Check this to add a line break when you add chained method. By default this option is disabled.

New lines Set the maximum number of new lines between tokens: no new lines, 1, 2, 5 (default), 10, unlimited. For example, if there are two \ns between tokens, but you set this value to 1 new line, the second \n is removed.

Wrapping Determine which length of characters triggers a line wrap. The limit you set automatically inserts a new line. Choose from do not wrap (default), or wrap after 40, 70, 80, 110, 120, 160 characters.

4. Determine how you want indents to be handled:Option DescriptionKeep array indentation Check this option to keep the array indentation as is. Disabling this option removes array

indentation. The default is to disable this option.Indent with Determine how large code indents will be: a tab, or one of 2, 3, 4 (default), or 8 spaces.

5. Determine other code formatting options:


Develop

Option DescriptionSpace before conditional Check this option to insert spaces before conditional "if/then" statements. By default, this

option is checked.Unesecape printable chars encoded

Check this option to decode encoded characters that are printable. By default this option is disabled.

Braces Determine the positioning of braces: braces with control statement (default), braces on own line, or end braces on own line only.

6. Click OK.The values you configure are saved to the .project.json file.

7. To an beautify an open file, click Edit Beautify JavaScript .

4.2.4 Customizing Cache BehaviorTemporarily include a cacheControl header to determine how long and which sources can be cached. This header has two attributes you can configure: path and maxAge.

Context

You can configure the cacheControl in /neo-app.json in a way that all sources are taken from the browser cache for a set time frame, for example for 604800 seconds, except the sources from the view or controller you are currently working on, for example the view mynewview:

"cacheControl": [{ "path": "**/view/mynewview**", "maxAge": 0},{ "maxAge": 604800}]

NoteTo not harm other developers who prefer to have other paths cached, only make this configuration temporarily and do not check it in.

To see the change in the preview, add the url parameter hc_reset or clear the browser cache after having changed the file /neo-app.json. You cannot see it if the preview is already open.


4.2.5 Picking a Code Editor ThemeChoose a theme to modify the appearance of the code editor, via a user preference.

Procedure

1. Click the settings icon in the left code editor sidebar.2. Click Code Editor and choose one of the available SAP editor themes.3. Check the preview, and if the theme is acceptable, click Save.

4.3 Creating New ProjectsSAP Web IDE offers various start-up methods for creating new projects. However, even before selecting a start-up method, make sure that you fully understand the application you are creating, the repository you require, the data sources that the application connects to.

4.3.1 Creating New Projects from ScratchYou can create a new project for an application using a specific data source, such as SAP NetWeaver Gateway, or from your file system.

Procedure

1. From the File menu, choose New Project .2. Enter a name for your project.3. Choose Next.4. Select the relevant template based on the project you want to generate.5. Choose Next.6. If relevant for your template, select the data source (OData service or RDL application) on which your project

will be based in one of the following ways: Choose Service Catalog and select the desired data source from the list. Once you select the desired data

source, choose a service and then choose Select, or, Choose workspace and browse for the relevant metadata in the SAP Web IDE system, or, Choose File System and browse for the relevant metadata in your file system, or, Choose Service URL and select the desired data source from the list. Then, paste the relevant URL in the

field beneath the data source.


Develop

After the data source is seleted, the service details are displayed.

NoteIf you select an OData service, a model folder containing the metadata.xml file is automatically created during the project generation .

NoteIf the data source is selected from a local file (using Browse), the created application project can be run only using Mock Data unless the service URL is manually added to the generated application code. See Running Applications for In-Development Testing [page 77].

7. Choose Next.8. If relevant for your template, customize the template parameters.Select a parameter group and provide the

relevant parameter values for it.a) Select a parameter group and provide the relevant parameter values for it.b) Repeat for all parameter groups that are available for the template you selected.

9. Choose Finish.The project wizard creates the project structure in the workspace. The repository contains a new folder with the project name you specified.

10. Choose Run from the toolbar to run your application in a new browser window.

4.3.1.1 Template LibraryThe Template Library view displays the templates that are available in SAP Web IDE grouped by category, as well as information of each category (category ID and description).This view offers two modes: The basic view shows only the basic information for each template: name, icon, ID, and the template

resources location. The extended view shows all information about each template (as it is configured in the template plugin):

template description and a static preview image of the artifact generated from the template, if supplied.You can switch between the modes by clicking the desired icon in the templates area toolbar.


4.4 Importing ApplicationsYou can import the generated code for an application and the resources that are contained in a project into SAP Web IDE's workspace.

4.4.1 Importing Projects from an Existing ArchiveYou can import the generated code for an application and its resources that are contained in a project, from the local file system into SAP Web IDE's workspace.

Prerequisites

You must have a zipped file of the project you want to import.

Procedure

1. In SAP Web IDE, choose to create a new folder and select it.2. Choose File Import . The Import Archive pop up shows the name of the selected folder.3. Browse to the location of the desired archived file, select it, and choose Open.4. Only if the folder is located directly under the root, select Import as a project , to convert the folder into a

project. If the folder is not located directly under the root, the project is added to the workspace as a simple folder.

5. Choose Import. The new content is displayed in the workspace under the local folder.

4.4.2 Importing Applications from the SAPUI5 ABAP RepositoryYou can import an existing application from the SAPUI5 ABAP repository into SAP Web IDEs workspace.

Prerequisites

To view the progress of the Import process, you must open the SAP Web IDE console. From the View menu, choose Console.


Develop

Procedure

1. In SAP Web IDE, select the folder that will contain the imported application.2. From the File menu, choose Import Application from SAPUI5 ABAP Repository . The Select Application

from SAPUI5 ABAP Repository dialog appears. The Target folder field is populated with the name of the selected folder.

3. Select the desired system.4. Browse for the application you want to import, or find it using the search mechanism.5. Select the application and choose OK. The application is displayed in the workspace under the selected folder.

Related Information

Using the SAPUI5 Repository Based on BSP RepositorySynchronizing with the SAPUI5 RepositoryTesting the SAPUI5 Application on an ABAP ServerSAP Note 1666368

4.5 Developing Applications

Once you have created a project, you can use interactive features to write code from scratch, add a new component to the application, or add an extension to it. Run the application at any time to see how it is evolving.

4.5.1 Enabling and Using Code Completion

Code assist provides language-appropriate code suggestions in a filtered and sorted list.

Prerequisites

Ensure you have enabled code completion from the coded editor user prefences settings. See Enabling Code Completion.


Context

Based your cursor location, SAP Web IDE establishes the context and displays a constrained list of suggestions. Use the corresponding icon to visually identify the code type being completed (that is XML or JavaScript).

Procedure

1. Create or open an XML or JS file.2. Place your cursor in the context for which you require assistance, and press Ctrl + Space.3. Scroll through the list, select the appropriate fragment, and press Enter.

The code fragment is added to the cursor location.

Related Information

Code Completion [page 6]Optional - SAP Web IDE User Settings [page 16]

4.5.1.1 Enabling Code CompletionBefore hints are displayed in code or in comments, you must enable code completion in the editor via user preferences.

Procedure

1. Click the settings icon in the code editor tray.2. Click Code Completion and check these boxes as required.

For code hints, click Enable. For JavaScript comment hints, click Enable in Comments.


Develop

4.5.1.2 Try It: JavaScript Code Assist BasicsA self-guided example that demonstrates how to use JavaScript code completion services for SAPUI5 applications.

Prerequisites

Open a new JavaScript file in a new or existing project.

Context

This example demonstrates these code assist features: JavaScript code completion Element hints Snippet insertion

Procedure

1. In the JavaScript editor, type s, and notice that the autocomplete suggestions automatically appear adjacent to the letter in context.

2. When you see sap, press Enter.3. Continue the string and type ., then press Ctrl+space to list all the namespaces for sap.4. In the popup, use the arrow keys to select ui : sap.ui, and press Enter.


5. To append the controller function, type cont. The suggestion reduces to the correct one. Press Enter to

append it in this location.

6. Add the onInit function in row 2, using the skills demonstrated in previous steps.

7. To inject a code snippet, create an empty line after row 2, start typing V, then press Ctrl+space to see the list

of possible code fragments.


Develop

8. Use the arrow keys to find var variable declaration, and press Enter.

The correct syntax is used for this var declaration. You must still choose a name.

9. Name the var as fc1 = form, then press Ctrl+space to retrieve a list of form templates for it.


10. Use the arrow keys to choose FormContainer in sap.ui.layout.form, then press Enter.

The form and all its properties and values are added correctly to the file:

Related Information

Code Completion [page 6]


Develop

4.5.1.3 Try It: JavaScript Code Assist with a User-Defined ObjectA self-guided example that demonstrates how to use autocompletion with an object you define. Create one file to define the object. Create a second file in which to use code assist with the object you define in the first file.

Context

SAP Web IDE code assist automatically displays user-defined objects in the same project.

Procedure

1. In a new or existing project, create a new JavaScript file.2. Add jQuery.sap.declare(FileName) to the start of all source file; otherwise, objects will not appear as a

hint.3. Create an object called obj1, by replicating these lines in this empty file and saving the changes:

4. In the same project, create another new JavaScript file.5. Add another statement to the start of this file: jQuery.sap.require(FileName). In the case of this

example, use jQuery.sap.require(cross-file1).6. Enter a new line and choose the object for which you want you want to get code assistance:

Either type var n = obj1, then press Ctrl+space to get this hint from the first file:


Or type var f = fun, then press Ctrl+space bar to get this hint from the first file:

7. Select the first result and press Enter.

Results

The code updates accordingly in the second file.

Related Information



Develop

4.5.1.4 Try It: JavaScript Code Assist and Kapsel Snippet Insertion with Third-Party Cordova Plug-insA self-guided example that demonstrates how to use autocompletion with a third-party Apache Cordova plug-in for Kapsel applications.

Prerequisites

Open a new JavaScript file in a new or existing project.

Context

NoteCode completion for Kapsel is not context-aware. Proposals are generated based only on the text prefix.

Procedure

1. In a JavaScript file, type navigator, then press Ctrl + space.The proposals for Cordova appear in the popup.

2. Use Ctrl + space to access all Cordova-related namespaces, classes, functions, or properties as required.3. To insert a Kapsel snippet, begin typing kapsel, then press Ctrl + space.

Kapsel snippets appear:


Snippets are only displayed if they contain a @example tag in the Kapsel library jsdoc.

4.5.1.5 Try It: XML Code AssistA self-guided example that demonstrates how to use XML code completion services.

Prerequisites

Open a new XML file in a new or existing project.

Context

This example demonstrates these code assist features: XML node completion Element hints

Procedure

1. Press Ctrl+space and select the root node suggestion.


Develop

The root node is automatically populated with required elements and values.

2. In row 8, type

5. Select backgroundDesign and press Enter.6. Define a value by typing =" and pressing Ctrl+space.7. Select List and press Enter.

The syntax completes correctly.

Related Information



Develop

4.5.1.6 Try It: XML Code Snippet Insertion

A self-guided example that demonstrates how to insert an XML code snippet.

Prerequisites

Open a new XML file in a new or existing project.

Procedure

1. Press Ctrl+space and select the root node suggestion.

The root node is automatically populated with required elements and values.

2. In the root node, type

3. Press the arrow keys to scroll through options. Select Page with the snippet icon ( ), and press Enter.

SAP Web IDE inserts a full snippet of code in the desired location:


Develop

Related Information


4.5.1.7 Try It: XML Metadata Completion from Schema Files

Display autocomplete metadata information from schema files. Metadata suggestions are context-aware. You can get suggestions for elements, attributes, attribute type, properties, and property values.

Prerequisites

Metadata and schema files must exist. For the purposes of this guided example, create two schema files:

Schema demo2a.xsd Includes these metadata definitions:


Schema demo2b.xsd Includes these definitions:


Develop

Procedure

1. In a new or existing project, create a new XML file, and specify demo2a.xsd and demo2b.xsd as the metadata schema instances.For example, if the XSD file uses a namespace, define the same namespace in the XML file as shown; otherwise, autocompletion for metadata fails:

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:SchemaLocation="http:// demo2a.xsdhttp:// demo2b.xsd"

TipThe XSD files you define can be a relative path or a full URL.


However, if no namespace is used, then define the schema as:

xsi:noNamespaceSchemaLocation="demo2a.xsd demo2b.xsd"

Autocompletion for metadata is ready to use from the new XML file.2. In the next row, type

NoteNotice the icons in this example: the mode attribute's icon shows an enum type, and the inheritable attribute's icon shows a boolean type.

9. Select gender, and press Enter to complete the syntax automatically.10. To get a list of values, for a specific attribute type, move the cursor to the value's location, and press Ctrl

+Space.

Boolean example

Enum example11. Continue independent experimentation with what you have learned, or save the file and exit.

Related Information


4.5.1.8 List of Supported SAPUI5 LibrariesCode completion is not supported for all SAPUI5 libraries.Code completion is only supported for:


sap.ca.scfld.md sap.ca.ui sap.m sap.me sap.ui.core sap.ui.layout sap.ui.unified sap.ushell sap.viz

4.5.2 Locating Objects in CodeThe code editor allows you to locate objects or definitions of object in code.

Context

You can use either: Goto services locate the definition action of a user-defined object (for example, a variable, function, object or

property) in JavaScript files, for in a project. Goto searches the active file as well as all files in the same project.

NoteGoto is not supported for JavaScript native keyword (for example, var, window, JSON), or SAPUI5 library objects (for example, sap, sap.ui, sap.ui.core), as they are not user-defined objects. If you attempt to use goto with a restricted object, a message appears in the console pane to indicate that the definition was not found.

Show all highlights all instances of the selected object in the active file.

Procedure

1. To locate the definition:a) Validate that the object is user-defined, by placing the cursor over the user-defined object and pressing

CTRL + ALT.If the object is has a user-defined definition, it will appear underlined in blue. Otherwise the console will report that the definition could not be found.

b) To go to the location, press CTRL + ALT and click the underlined object.If the definition is in the current file, the definition is highlighted. Otherwise, the correct file is first opened and the definition is highlighted.


Develop

NoteYou can also conflate both of these steps into a single action by selecting the object and pressing CTRL + ALT + G, or selecting the object and clicking Edit JavaScript Goto Definition .

2. To locate all instances of an object in an open file, double-click the object.All instances of the object are highlighted in a blue box.For example, if you double-click the first instance of the string content, all remaining instances are identified in the light blue box.

4.5.3 Enabling Dynamic API Reference SupportWhen you are writing code, especially if you are unfamiliar with a particular API, you might want to have API reference information easily available by opening the API Reference pane. As cursor focus changes, either in the editor or in the API reference content, the information shown changes accordingly.

Procedure

1. To enable dynamic API reference support, click View API Reference Pane .The API Reference pane docks to the right of the SAP Web IDE editor.

2. To get context-sensitive help, press Ctrl + spacebar . Based on the cursor location, SAP Web IDE triggers a full set of code assist support: code completion and corresponding API reference content for the context.


For example, to determine which values you can use for , move the cursor between the quotation marks as shown below, and launch code assist. The code completion feature lists the options, while the API Reference pane supports you with matching documentation.To learn about all options, change focus to each and read the corresponding help information. If you require additional information, click the More.... link. To complete the code, select an option and press Enter.

Related Information

Integrated and Dynamic API Reference Support [page 7]

4.5.4 Adding a New ComponentYou can extend an application project and customize it to suit your needs by adding components to it.

Procedure

1. From the workspace, select and then right-click the desired project or folder to which you want to add a new component.

2. Select New Component .3. Optional - If the path in the Location field is not the location to which you want to generate your component,

enter the desired path.4. If you are creating a component that will replace an existing one within this plugin, select the Overwrite

Existing Component checkbox.5. Choose Next.6. Select the relevant template based on the component you want to generate.7. Choose Next.8. If relevant for your template, select the data source (OData service) on which your project will be based:

In the Data Source field, enter the desired URL, or, Choose Browse and browse for the relevant metadata in your file system, or,


Develop

Choose Catalog and select the desired data source from the list.Once you select the desired data source, you can choose Details to see its entity sets and actions.

NoteIf you select an OData service, a model folder containing the metadata.xml file is automatically created during the project generation .

NoteIf the data source is selected from a local file (using Browse), the created application project can be run only using Mock Data unless the service URL is manually added to the generated application code. See Running Applications for In-Development Testing [page 77].

9. Choose Next.10. If relevant for your template, customize the template parameters.Select a parameter group and provide the

relevant parameter values for it.a) Select a parameter group and provide the relevant parameter values for it.b) Repeat for all parameter groups that are available for the template you selected.

11. Choose Next.12. Choose Finish to confirm and add your component.

4.5.5 Creating an Application DescriptorCreate an application descriptor yourself in a project that has not been imported or created via the project wizards.This is required for defining the connectivity for external resources required by the application, and will allow you to run the application properly in the SAP Web IDE.

Procedure

In SAP Web IDE:1. Select your project folder (e.g. myProject).2. From the File menu, select New Cloud Connectivity Configuration .3. Enter routes for your remote systems. For example, you can add an ABAP OData system for the

path /sap/opu/odata and a destination myRemoteDestination. For connecting remote systems, see Optional - Connecting Remote Systems.

{ "path": "/sap/opu/odata", "target": { "type": "destination", "name": "myRemoteDestination" "entryPath": "/sap/opu/odata" }, "description": "Target OData system"}


For more information, go to https://help.hana.ondemand.com/ . Select SAP HANA Cloud PlatformHTML5 Applications Development Developer's Guide Application Descriptor File .Not all features are supported for local installation, such as authorization, authentication, application forwarding.

4.5.6 Editing Mock DataYou can model the service data you want to use as mock data in your application.

Procedure

1. Open your project.2. Expand the model folder.3. Right-click on a metadata.xml or edmx file and select Edit Mock Data. The Edit Mock Data page is displayed.4. Select an entity set.

NoteIf the model folder contains a JSON file for the selected entity, its mock data is displayed in the Mock Data table.

5. Add, delete, or edit the mock data displayed as necessary.6. If you want to add random data to an entity, choose Generate Random Data. 10 rows of random data are

added to the selected entity each time the button is pressed.7. Choose OK. If not previously available, a JSON file is created and added to the model folder for each entity

containing mock data.

4.5.7 SAP Web IDE Layout Editor - ExperimentalDisplay the content of an XML view in the layout editor to see it in a way that closely corresponds to how it will appear in your finished application.

NoteExperimental features are not part of the officially delivered scope that SAP is going to guarantee for future releases means experimental features may be changed by SAP at any time for any reason without notice. The Experimental features are "NOT FOR PRODUCTION USE". You may not demonstrate, test, examine, evaluate or otherwise use the Experimental Features in a live operating environment or with data that has not been sufficiently backed up.The purpose of Experimental features is to get feedback at an early point of time allowing customers/partners to influence the future product accordingly. Please use the SCN Developer Center http://scn.sap.com/


Develop

community/developer-center/front-end to provide feedback accepting that Intellectual Property rights of the contributions or derivative works shall remain the exclusive property of SAP.The layout editor and all features that come with it are experimental.You can only use the layout editor if you run SAP Web IDE in Google Chrome.The current version supports applications that were created with the SAP Fiori Starter Application template.For more information on known issues regarding the layout editor, see Known Issues [page 102].

Layout Editor Area

PaletteThe layout editor is composed of a Palette on the left side of the canvas containing all supported SAPUI5 controls sorted in logical sections. You can expand each section by clicking the small arrow on each section's header. You can also search for controls by entering the control's name in the quick search filed above the palette. Based on this filter, the relevant sections are expanded. (Make sure to delete the filter if you want to expand other sections.)The listed controls can be added to the view by using drag and drop. For more information see Drag and Drop [page 70].CanvasThe canvas in the middle of the layout editor area is a graphical display of the selected XML view. By clicking on a control on the canvas, you can select the control. By clicking on the canvas, you can then tab through the parent controls (one level higher each time you click). By clicking outside the canvas you can remove the selection.Properties/Data PaneOn the right side of the canvas you find a pane containing two sections: Properties: This section displays the properties of the control that is currently marked in the editor area. The

properties are listed under expandable sections. A button, for instance, has the following sections: Appearance Bahavior Misc

Data: This section displays the entity sets and properties of the OData service used by the application.Each section can be expanded by clicking on the little arrow next to the section title.Outline Pane


The pane on the right of SAP Web IDE offers an outline of your XML view. Click the lowest icon to display it:

Controls selected in the Outline pane are selected in the canvas and vice versa.

4.5.7.1 Working with the Layout Editor

Prerequisites

You have opened SAP Web IDE in Google Chrome. You have created a project using the SAP Fiori Starter Application template. In the view folder of this project

you can edit the following views: Detail.view.xml Master.view.xml

NoteIf you have created your own XML mobile views (on the Template Customization screen, do not enter a value in the Namespace field), you can open them with the layout editor in a restrictive way.

Procedure

1. In the context menu of the XML view, choose Open with Layout Editor .2. Edit views of your application.

68 2014 SAP SE or an SAP affiliate company. All rights reserved.SAP Web IDE Developer G

SAP Web IDE Dev Guide (Local Installation)

Documents

Transcript of SAP Web IDE Dev Guide (Local Installation)