SAP Web IDE Dev Guide (Local Installation)

customer Document Version: 1.0 - 2014-10-15

SAP Web IDE Developer Guide for Users with Local Installation

Table of Contents 1

SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2

Learn About. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.1

SAP Web IDE Features and Benefits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.1.1

Assisted Development. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.2

User-Centric Cu Customizability an and Se Session Pe Persistence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3

Get Started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.1

Setting up SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 10 3.1.1

Installing SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 10

3.1.2

Optional - Changing the Orion Application Server Port. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.1.3

Optional - Connecting Remote Systems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 12

3.1.4

Starting SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

4

De velop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.1

SAP Web IDE Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.2

4.3

4.1..1 4.1

Optional - SAP Web IDE User Settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.1.2

Keyboard Shortcuts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 17

4.1.3

Resizing the SAP Web IDE Window Panes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.1.4

Working with Files and Folders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.1.5

Searching and Replacing in SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Customizing SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Customizin 4.2..1 4.2

Checking Code with Customized JavaScript Linting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4.2.2

Toggling Commenting Styles and Control Characters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

4.2.3

Customizing Beautifier Properties for a Project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.2.4

Customizing Cache Behavior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

4.2.5

Picking a Code Editor Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Creating New Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 4.3..1 4.3

4.4

4.5

Creating New Projects from Scratch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 40

Importing Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Imp 4.4.1

Importing Projects from an Existing Archive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 42

4.4.2

Importing Applications from the SAPUI5 ABAP Repository. . . . . . . . . . . . . . . . . . . . . . . . . . 42

Developing Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 4.5.1

Enabling and Using Code Completion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

4.5.2

Locating Objects in Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

4.5.3

Enabling Dynamic API Reference Support. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

4.5.4

Adding a New Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

4.5.5

Creating an Application Descriptor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

4.5.6

Editing Mock Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 66

4.5..7 4.5

SAP Web IDE Layout Editor - Experimental. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

SAP Web IDE Developer Guide

2

© 2014 SAP SE or an SAP affiliate company. All rights reserved.

Table of Contents

Table of Contents 1

SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2

Learn About. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.1

SAP Web IDE Features and Benefits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.1.1

Assisted Development. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.2

User-Centric Cu Customizability an and Se Session Pe Persistence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3

Get Started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.1

Setting up SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 10 3.1.1

Installing SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 10

3.1.2

Optional - Changing the Orion Application Server Port. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.1.3

Optional - Connecting Remote Systems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 12

3.1.4

Starting SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

4

De velop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.1

SAP Web IDE Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.2

4.3

4.1..1 4.1

Optional - SAP Web IDE User Settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.1.2

Keyboard Shortcuts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 17

4.1.3

Resizing the SAP Web IDE Window Panes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.1.4

Working with Files and Folders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.1.5

Searching and Replacing in SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Customizing SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Customizin 4.2..1 4.2

Checking Code with Customized JavaScript Linting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4.2.2

Toggling Commenting Styles and Control Characters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

4.2.3

Customizing Beautifier Properties for a Project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.2.4

Customizing Cache Behavior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

4.2.5

Picking a Code Editor Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Creating New Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 4.3..1 4.3

4.4

4.5

Creating New Projects from Scratch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 40

Importing Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Imp 4.4.1

Importing Projects from an Existing Archive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 42

4.4.2

Importing Applications from the SAPUI5 ABAP Repository. . . . . . . . . . . . . . . . . . . . . . . . . . 42

Developing Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 4.5.1

Enabling and Using Code Completion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

4.5.2

Locating Objects in Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

4.5.3

Enabling Dynamic API Reference Support. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

4.5.4

Adding a New Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

4.5.5

Creating an Application Descriptor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

4.5.6

Editing Mock Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 66

4.5..7 4.5

SAP Web IDE Layout Editor - Experimental. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66


2


Table of Contents

4.6

Deploying Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 4.6.1

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

4.7

Updating Existing Applications Residing in the SAPUI5 ABAP Repository. . . . . . . . . . . . . . . . . . . . . . . 76

4.8

Running Applications for In-Development Testing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 77

4.9

4.10

5

4.8.1

Running Applications in Simulators or on Devices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 77

4.8.2

Running Applications with Mock Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

4.8.3

Running Applications in the Fiori Launchpad Environment. . . . . . . . . . . . . . . . . . . . . . . . . . .80

Extending SAPUI5 Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82 4.9.1

Creating New Extension Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

4.9 .9.2 .2

Extendi din ng Appli lic cat atiions that Resid ide e in the SA SAP PUI5 ABAP Repo possit ito ory. . . . . . . . . . . . . . . . . . . .83

4.9.3

Creating New Extensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Source Control in SAP Web IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 4.10.1

Setting Up Git. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 90

4.10.2

Working with Git. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

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

SAP Web IDE Developer Guide Table of Contents


3

1

SAP Web IDE Get Started [page 9]

Learn how to set up and start SAP Web IDE. Learn About

Understand how to use SAP Web IDE, and learn what the strategic features and benefits are. Develop

See how SAP Web IDE supports key stages of the developer life cycle.


4


SAP Web IDE

2

Learn About

SAP 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

Note To 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 customers and partners are always looking for a modern and secure environment. 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 Guide Learn About


5

2.1

SAP Web IDE Features and Benefits

Review 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 Development

A 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 Completion

Use 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 prefixes

SAP 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]


6


Learn About

2.1.1.2

Integrated and Dynamic API Reference Support

API 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

View

. 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.

API Reference Pane

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 Validation

The 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 Persistence

SAP 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 Guide Learn About


7

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. You can reset to the default settings by choosing

View

Reset to Default

.

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. Caching can be controlled by implementing custom properties.

Related Information Customizing SAP Web IDE [page 26]


8


Learn About

3

Get Started

Before 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 Runtime

You 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.

Note You 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 SAPWebIDE

Create the local folder SAPWebIDE:

In the command shell, enter the following commands:

In the terminal window, enter the following commands:

cd \

/ cd /Applications/

C:\ mkdir SAPWebIDE

Applications mkdir SAPWebIDE

C:\ cd SAPWebIDE

Applications cd SAPWebIDE

The system shows your local folder SAPWebIDE.

The system shows your local folder SAPWebIDE.

Orion Application Server

Download the Orion Application Server, version 5.0, and unzip it to your SAPWebIDE folder:

Download from http://www.eclipse.org/down


loads/download.php?file=/orion/drops/ R-5.0-201402262325/eclipse-orion-5.0-

loads/download.php?file=/orion/drops/ R-5.0-201402262325/eclipse-orion-5.0-ma

win32.win32.x86_64.zip&mirror_id=580

Unzip to c:\SAPWebIDE.

.

cosx.cocoa.x86_64.zip&mirror_id=17 .

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

orion Standalone p2 Director

SAP Web IDE Developer Guide Get Started


9

Download the standalone p2 director and unzip it to your SAPWebIDE folder:



loads/download.php?file=/tools/buckminster/

loads/download.php?file=/tools/buckminster/

products/director_latest.zip&mirror_id=324

.

Unzip to c:\SAPWebIDE.

products/director_latest.zip&mirror_id=324

Unzip to /Application/SAPWebIDE by entering the following in the terminal window: / cd /Applications/ Applications cd SAPWebIDE SAPWebIDE unzip ~/Downloads/

director_latest.zip

3.1

Setting up SAP Web IDE

Install the SAP Web IDE zip file. You can also change the Orion Application Server port and connect remote systems.

Procedure Install SAP Web IDE See Installing SAP Web IDE Optional - Change the Orion Application server port See Optional - Changing the Orion Application Server Port Optional - Connect remote systems See Optional - Connecting Remote Systems Start SAP Web IDE See Starting SAP Web IDE

3.1.1

Installing SAP Web IDE

Download 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.


10


Get Started

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


C: cd /d C:\SAPWebIDE\director C:\SAPWebIDE\director director repository jar:file:/!/ -installIU com.sap.webide.orionplugin.feature.fe ature.group -destination c:\SAPWebIDE \eclipse

/ cd /Applications/SAPWebIDE/director director ./director -repository

jar:file:/\!/ -installIU com.sap.webide.orionplugin.feature.fe ature.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
○

Orion Application Server folder>

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

Orion Application Server folder>

3.1.2

Optional - Changing the Orion Application Server Port

By 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 Change the port in the following line of the orion.ini file:

orion.ini

Dorg.eclipse.equinox.http.jetty.http. port=8080


/ cd /Applications/SAPWebIDE/

eclipse/orion.app/Contents/MacOS MacOS vi orion.ini Change the port in line Dorg.eclipse.equinox.http.jetty.http. port=8080 (e.g. 9080 ).



11

If 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 Systems

You can define service destinations to access remote systems.

Context The service destinations are described via the following property files:

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)


12


Get Started

Note When 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 To connect your remote system , you have to do the following:

C: cd /d C:\SAPWebIDE\eclipse C:\SAPWebIDE\eclipse mkdir config_master\service.destinations \destinations C:\SAPWebIDE\eclipse cd config_master\service.destinations \destinations C:\SAPWebIDE\config_master \service.destinations\destinations echo #ServiceDestination >


/ cd /Applications/SAPWebIDE/

eclipse/ eclipse vi orion.app/Contents/

MacOS/config_master/ service.destinations/destinations/ Paste the content of the example below to this file. Save the file and close it.

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

Example for eclipse/config_master/service.destinations/destinations/: Description= descritpion Type=HTTP TrustAll=true Authentication=NoAuthentication Name= ProxyType=Internet URL=https\://\: WebIDEUsage=odata_abap,ui5_execute_abap,dev_abap WebIDESystem= WebIDEEnabled=true



13

3.1.4

Starting SAP Web IDE

Start SAP Web IDE and access remote systems (if you have defined them).

Prerequisites You have started the Orion Application Server.

Note In 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: Choose Create a new account . Enter user and password.

Procedure 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.) 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.


14


Get Started

4

Develop

SAP 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 Basics

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

Context Menus

In 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 Guide Develop


15

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

●

Logout

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

Note If 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 Settings

You 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.


16


Develop

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

4.1.2

Keyboard Shortcuts

You 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):

New file

CTRL + ALT + N

New folder

CTRL + ALT + SHIFT + N

New project

CTRL + ALT + SHIFT + O

New extension project

CTRL + ALT + SHIFT + E

Close file

ALT +

Close all files

ALT + SHIFT + W

Save file

CTRL + S

Save all files

CTRL + SHIFT + S

Undo

CTRL + Z

Redo

CTRL + Y

Cut

CTRL + X

Copy

CTRL + C

Paste

CTRL + V

Rename

F2

Delete

DEL

Toggle show invisibles

CTRL + I

Toggle line comment

CTRL + 7

Toggle block comment

CTRL + SHIFT + 7

Add todo comment

CTRL + ALT + T

Indent line

TAB

Outdent line

SHIFT +

Move lines up

ALT + UP ARROW

W

TAB



17

Move lines down

ALT + DOWN ARROW

Copy lines up

ALT +

SHIFT + UP ARROW

Copy lines down

ALT +

SHIFT + DOWN ARROW

Beautify JavaScript

CTRL + ALT + B

Goto JavaScript definition

CTRL + ALT + G

Run

ALT +

Run without frame

CTRL + ALT + SHIFT + R

Find and replace

CTRL + F

Advanced repository search

CTRL + SHIFT + F

View console

CTRL + SHIFT + M

View API reference pane

CTRL + SHIFT + A

View Git pane

CTRL + SHIFT + V

View outline

CTRL + SHIFT + U

User preferences

CTRL + .

Extensibility pane

CTRL + SHIFT + E

4.1.3

SHIFT +

R

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 Change the size of various panes of SAP Web IDE by dragging the splitter. Restore SAP Web IDE defaults by choosing

View

Reset to Default

.


18


Develop

4.1.4

Working with Files and Folders

Change files and folders in various ways.

Context Opening and Closing Files

Open 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

○

Open the context menu with a right mouse click on the tab and choose Close.

File

Close

.

Close all open files: ○

Choose

○

Open the context menu with a right mouse click on the tab and choose Close All.

File

Close All

.

Close all files except the active one: ○

Choose

○

Open the context menu with a right mouse click on the tab and choose Close Others.

File

Close Others .

Save or discard your changes before closing. Cutting, Copying, and Pasting Files or Folders

You can cut, copy, and paste files or folders to other locations: ●

By using the key combinations Ctrl + x and Ctrl + v or by selecting

●

By using key combinations Ctrl + c and Ctrl + v or by selecting

Edit

Edit

Cut

Copy

or or

Edit Edit

.

Paste Paste

.

Renaming Files or Folders

To 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.



19

4.1.4.1

Importing Files

Import files into SAP Web IDE from the local file system.

Procedure Choose the destination folder in the workspace. Choose

File

Import

File

. The File pop up is displayed.

Choose Browse to go to the location of the file, select it, and choose Import. The imported file is added to the destination folder.

4.1.4.2

Working with Multiple Files

You can open multiple files in the code editor, each of which appears in a separate tab. Tab Area

If 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 Area

To 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 Overflow

If 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.


20


Develop

4.1.4.3

Working with Code and Code Comments

Use 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 To cancel or reapply the last one or more edits made, press Ctrl + Z to undo or Ctrl + Y to redo. To toggle invisibles of the file, press Ctrl + L. (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 + /.

(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. To change indents: ○

For indents, press Tab.

○

For outdents, press Shift + Tab.

To move lines: ○

To shift a line up, press Alt + up arrow.

○

To shift a line down, press Alt + down arrow.

To copy lines: ○

To copy a line up, press Alt + Shift + up arrow.

○

To copy a line down, press Alt + Shift + down arrow.

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 .



21

4.1.4.4 Tree

Showing the Location of Open Files in the Repository

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 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. To unlink the editor from the workspace, choose

4.1.4.5

View

Unlink Repository Browser with Editor

.

Refreshing the Repository Tree

Update 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 IDE

Choose 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 Repository

Perform 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 Note SAP 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.


22


Develop

Procedure Click

Search

Advanced Repository Search .

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.

(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.

Click Search or press Enter to submit the values and start the search. 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.

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.



23

4.1.5.2

Replacing Strings Across Multiple Files

Perform an advanced repository find and replace across multiple files with the Search pane.

Procedure With or without any files open in the code editor, open the Search pane: ○

Click

○

Click the Search icon (

Search

Advanced Repository Search

.

) from the right-side editor support tray.

In the Search pane, type the string you want to find. (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.

Click Find. In the results list at the bottom of the search pane, you see search results, enumerated by file.


24


Develop

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 .

Note You cannot undo the global replace operation.



25

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 Open the file(s) you want to perform a simple string search on. For the file that is currently in view, select

Search

Find and Replace .

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 .

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]


26


Develop

4.2.1

Checking Code with Customized JavaScript Linting

Unless 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 JavaScript

Different 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.

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

Procedure Click the settings icon in the code editor tray. Select Code Check. 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.



27

○

Every time a change is made. Choose Change.

To suppress the display of issues inline, select Disable Code Check to stop displaying issues. Click OK.

4.2.1.2

Opening and Reading Files With Annotations

The 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 In the JavaScript editor open a supported file type (that is, *.js, *.xsjs, or *.xsjslib). Each annotation is colored depending on the severity:

Red

Error

Fatal, high, medium

Yellow

Warning

High, medium, low

Blue

Information

Medium, low, or info

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. Are used to classify the issue: for example, possible error, best practice, stylistic issue, and others. 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. Detail the issue or suggest a possible resolution. 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.


28


Develop

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.



29

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

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.

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. Correct the issue on row 797 by repeating the hover process. 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.


30


Develop

Insert the block by placing braces around the statement. Notice that by correcting the syntax error, all other detected issues reappear. 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.

Ctrl+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.



31

Procedure 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 */

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 */

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 */


32


Develop

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 */

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

Sample Code /* global -BAD_LIB */

Save these changes.

4.2.1.3.2 Customizing Default Linting for a Project By Editing Settings The 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 Right click the project and choose Project Settings . 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. SeeDefault 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:



33

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 Reference

Review the default linting configuration. Customizations always override these defaults. See these resoures for additional support: ●

For ESLint configuration details, see Configuring ESLint

●

For ESLint rule information, see Rules

.

.

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. 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

.

Attributes can have multiple supported values. Use the:


34


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 Development

Use 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 Begin by following the basic source code format for a rule:

Sample Code function customRule (context) { "use strict";

return { // properties go here }; }

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



35

Sample Code If 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. 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. 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 Code context.report(node, "This is unexpected!");

or

Sample Code The 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 });


36


Develop

4.2.1.4

Integrating Custom Linter Rules into SAP Web IDE

To 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 /.lint, create the .eslint.rules folder. In /.lint/.eslint.rules. Copy the source code to

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. 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 Characters

Toggle comment styles and invisible characters to customize the appearance of your code.

Procedure 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.

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 style when comments span multiple lines. This style is easier to read you should choose blocks for comment that offers a longer explanation or description.*/



37

(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. 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 Right-click a project name, then choose Project Settings . Select Beautifier . Determine how you want lines to be treated:

Break 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.

Determine how you want indents to be handled:

Keep 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.

Determine other code formatting options:


38


Develop

Space 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.

Click OK. The values you configure are saved to the .project.json file. To an beautify an open file, click

4.2.4

Edit

.

Beautify JavaScript

Customizing Cache Behavior

Temporarily 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 }]

Note To 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.



39

4.2.5

Picking a Code Editor Theme

Choose a theme to modify the appearance of the code editor, via a user preference.

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

4.3

Creating New Projects

SAP 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 Scratch

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

Procedure From the File menu, choose

New

Project

.

Enter a name for your project. Choose Next. Select the relevant template based on the project you want to generate. Choose Next. 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.


40


Develop

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

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

Note If 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]. Choose Next. 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. Choose Finish. The project wizard creates the project structure in the workspace. The repository contains a new folder with the project name you specified. Choose Run from the toolbar to run your application in a new browser window.

4.3.1.1

Template Library

The 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.



41

4.4

Importing Applications

You 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 Archive

You 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

In SAP Web IDE, choose Choose

File

Import

to create a new folder and select it. . The Import Archive pop up shows the name of the selected folder.

Browse to the location of the desired archived file, select it, and choose Open.

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. Choose Import. The new content is displayed in the workspace under the local folder.

4.4.2 Importing Applications from the SAPUI5 ABAP Repository You can import an existing application from the SAPUI5 ABAP repository into SAP Web IDE’s workspace.

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


42


Develop

Procedure In SAP Web IDE, select the folder that will contain the imported application. From the File menu, choose

Applic App licat ation ion from from SAPU SAPUI5 I5 ABAP ABAP Reposi Repositor tory y . The Select Application from SAPUI5 ABAP Repository dialog appears. The Target folder field is populated with the name of the Import Imp ort

selected folder. Select the desired desired system. Browse for the application you want to import, or find it using the search mechanism. 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 Repository Synchronizing with the SAPUI5 Repository Testing the SAPUI5 Application on an ABAP Server SAP 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 Enabling C ompletion

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 .



43

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 Create or open an XML or JS file. Place your cursor in the context for which you require assistance, and press Ctrl + Space. 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 Completion

Before hints are displayed in code or in comments, you must enable code completion in the editor via user preferences.

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

For code hints, click Enable .

○

For JavaScript comment hints, click Enable in Comments.


44


Develop

4.5.1.2

Try It: JavaScript Code Assist Basics

A 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 In the JavaScript editor, type s, and notice that the autocomplete suggestions automatically appear adjacent to the letter in context.

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



45

To append the controller function, type cont. The suggestion reduces to the correct one. Press Enter to append it in this location.

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

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.


46


Develop

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.

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



47

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]


48


Develop

4.5.1.3 Object

Try It: JavaScript Code Assist with a User-Defined

A 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 In a new or existing project, create a new JavaScript file. Add jQuery.sap.declare(FileName) to the start of all source file; otherwise, objects will not appear as a hint. Create an object called obj1, by replicating these lines in this empty file and saving the changes:

In the same project, create another new JavaScript file. 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). 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:



49

○

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

Select the first result and press Enter.

Results The code updates accordingly in the second file.



50


Develop

4.5.1.4 Try It: JavaScript Code Assist and Kapsel Snippet Insertion with Third-Party Cordova Plug-ins A 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

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

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

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



51

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

4.5.1.5

Try It: XML Code Assist

A 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 Press Ctrl+space and select the root node suggestion.


52


Develop

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

In row 8, type
Press the arrow keys to scroll through options. When you see Page, press Enter. Type a space, then press Ctrl+space. A new list of hints, based on context appears. Suggestions can include XML syntax, property, and event proposals.



53

Select backgroundDesign and press Enter. Define a value by typing =" and pressing Ctrl+space. Select List and press Enter. The syntax completes correctly.



54


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 Press Ctrl+space and select the root node suggestion.

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

In the root node, type


55

Press the arrow keys to scroll through options. Select Page with the snippet icon ( Enter.

), and press

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


56


Develop


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: demo2a.xsd Includes these metadata definitions:



57

Includes these definitions:


58


Develop

Procedure 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.xsd http:// demo2b.xsd"

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



59

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. In the next row, type
Because is defined for the employee element, the gender attribute from demo2b.xsd appears in this list. Select gender, and press Enter to complete the syntax automatically. In the next row type < and press Ctrl+space to see the list of children for this element.

These suggestions appear for employee, because is defined for element "employee", so more elements beyond firstname and lastname appear, including customer from demo2b.xsd. Select customer, and press Enter. Type a space and press Ctrl+space to see the list of suggestions for this context.


60


Develop

Note Notice the icons in this example: the mode attribute's icon shows an enum type, and the inheritable attribute's icon shows a boolean type. Select gender, and press Enter to complete the syntax automatically. To get a list of values, for a specific attribute type, move the cursor to the value's location, and press Ctrl +Space.

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


4.5.1.8

List of Supported SAPUI5 Libraries

Code completion is not supported for all SAPUI5 libraries. Code completion is only supported for:



61

●

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 Code

The 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.

Note Goto 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 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.


62


Develop

Note You 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

.

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 Support

When 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 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. 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.



63

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 Component

You can extend an application project and customize it to suit your needs by adding components to it.

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

New

Component

.

Optional - If the path in the Location field is not the location to which you want to generate your component, enter the desired path. If you are creating a component that will replace an existing one within this plugin, select the Overwrite Existing Component checkbox. Choose Next. Select the relevant template based on the component you want to generate. Choose Next. 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,


64


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.

○

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

Note If 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]. Choose Next. 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. Choose Next. Choose Finish to confirm and add your component.

4.5.5

Creating an Application Descriptor

Create 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: Select your project folder (e.g. myProject). From the File menu, select

New

Cloud Connectivity Configuration

.

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" }



65

For more information, go to https://help.hana.ondemand.com/ . Select HTML5 Applications Development

Developer's Guide

SAP HANA Cloud Platform

Application Descriptor File

.

Not all features are supported for local installation, such as authorization, authentication, application forwarding.

4.5.6

Editing Mock Data

You can model the service data you want to use as mock data in your application.

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

Note If the model folder contains a JSON file for the selected entity, its mock data is displayed in the Mock Data table. Add, delete, or edit the mock data displayed as necessary. 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. 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 - Experimental

Display 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.

Note Experimental 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/


66


Develop

to provide feedback accepting that Intellectual Property rights of the contributions or derivative works shall remain the exclusive property of SAP. community/developer-center/front-end

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 Palette

The 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]. Canvas

The 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 Pane

On 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



67

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

Note If 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 In the context menu of the XML view, choose

Open with

Layout Editor .

Edit views of your application.


68


Develop

○

Bind controls in the layout editor to elements from the OData service.

○

To add controls to your view, use drag and drop functionality.

○

To delete controls from your view, you have the following options: ○

Drag and drop the control outside of the canvas.

○

Mark it in the outline and press DEL .

Rearrange controls in your view using the keyboard or drag and drop functionality.

○

Use the keyboard to navigate within the canvas. Clicking on the same control again, moves the selection to its parent.

○

4.5.7.1.1

OData Binding in the Layout Editor

In the layout editor, you can bind properties of controls or control aggregations to an artifact in the OData service.

Context The following types of bindings are possible: ●

Properties of controls

●

Aggregations of controls

Note To bind properties of models that are not OData models, you must work from the source code files and not from the layout editor.

Note If your application does not consume an OData service, you can add the Service Connectivity component to it. To perform binding from the Outline pane: In the Outline pane, select the desired artifact. The relevant elements are displayed in the Data pane. For properties, in the Data pane, select the desired property of the OData service. OData properties are filtered by type. For aggregations, in the Data pane, select the desired entity sets of the OData service. To perform binding from the canvas: Select the desired control on the canvas. Open the Data pane. The relevant elements are displayed. For properties, select the desired property of the OData service. OData properties are filtered by type. For aggregations, select the desired entity sets of the OData service.

Note The binding is done between the default property/aggregation of the selected control, and the desired OData artifact.



69

To perform unbinding: Select the desired property or aggregation from the Outline pane or the desired control from the canvas. In the Data pane, select Unbind.

Results The layout editor creates a template from the first item inside of the aggregation and removes all other items from it. You cannot select or change the template item, but you can still bind its properties (to edit the template in the canvas, you have to unbind it). Templates are marked with a template label in the canvas. If you select a template’s parent, it will also be labeled as template .

Related Information SAPUI5 API Reference

4.5.7.1.2

Drag and Drop

Add or remove controls to the layout editor by using drag and drop. Pick the control you want to add to your view from the palette on the left side of the layout editor area and drag it to the drop target. Possible drop targets are highlighted by a green border. By pressing CTRL you can tab through the available drop targets, getting one level lower each time you press CTRL . Once the lowest level is reached, by pressing CTRL again the drop target on the highest level is displayed. To delete controls from your view, drag and drop it outside of the canvas.

Example You want to add an HBox containing a Button to your view. Go to the palette. Open the Container section by clicking the arrow to the right of the section's title. Enter hbox in the quick search field above the palette. Choose HBox and drag it to the view. Drop it at the position you would like it to appear. Delete the hbox filter in the quick search field. Open the Action section by clicking the arrow to the right of the section's title. Choose Button and drag it to the view. Press the CTRL key so that the HBox is highlighted and marks a possible drop target. Drop the Button .


70


Develop

4.5.7.1.3

Keyboard Support

Use the keyboard to move selected controls or navigate within the view you have opened with the layout editor.

Selecting Controls If you have selected a control in the canvas of the layout editor, you can move the selection using the arrow keys: : moves the selection to the parent of the selected control

●

UP ARROW

●

DOWN ARROW

: moves the selection to the child of the selected control

●

LEFT ARROW

: moves the selection of the control up/to the right (within the same aggregation)

●

RIGHT ARROW

: moves the selection of the control down/to the left (within the same aggregation)

Moving Selected Controls If you have selected a control in the canvas of the layout editor, you can change its position within the aggregation: ●

SHIFT

+ LEFT ARROW : moves the control up/to the right

●

SHIFT

+ RIGHT ARROW : moves the control down/to the left

Changing the Drop Target When you drag and drop a control from the palette to the canvas or from one position within the canvas to another, you can use the keyboard to define the drop position of the dragged control: ●

●

Use the SHIFT or ALT key to define the drop position of the dragged control within an aggregation: ○

SHIFT

○

ALT

: moves the drop position up/to the right

: moves the drop position down/to the left

Use the CTRL key to add the dragged control as a child of another control.

4.5.7.2

Try It: Build an Application With the Layout Editor

Get an overview of the features that are available with the layout editor by following this tutorial.

Prerequisites ●

You have opened SAP Web IDE in Google Chrome.



71

●

You have created the OData model file SalesOrderService_metadata.xml for a simple sales order service with the following content: OData Model for a Simple Sales Order Service [page 74]. You have created an application for Sales Order tracking using the SAP Fiori Starter Application template. ○

○

○

On the Data Connection screen, you have selected your local OData model file SalesOrderService_metadata.xml. On the Template Customization screen, you have entered the following mapping data for the Master Section: Title

Sales Orders

OData Collection

SalesOrders

Item Title

SalesOrderNumber

Numeric Attribute

TotalAmount

Units Attribute

Currency

Attribute 1

CustomerID

Attribute 2

CustomerName

Search Field

SalesOrderNumber

You have entered the following mapping data for the Detail Section : Title

Sales Order

Detail Text

Sales Order Details

Item Title

CustomerName

Numeric Attribute

SalesOrderNumber

Units Attribute

CustomerID

Attribute 1

NetPriceAmount

Attribute 2

TaxAmount

Attribute 3

OrderDate

Procedure Expand the view folder and select the view Detail.view.xml. In the context menu, choose Open With Layout Editor . The content of the XML view is displayed in a way that closely corresponds to how it will appear in your finished application. Delete the icon on the bottom bar. ○

Select the control in the canvas and drag it outside of the canvas.

○

Select the control in the canvas or in the Outline pane and press DEL .

Edit the properties of the IconTabFilter control.


72


Develop

a) In the canvas, select the icon of the tab filter. In the Outline pane, sap.m.IconTabFilter is selected. b) In the Properties/Data pane, expand the Properties . c) In the Data section, enter the value Hint to the field Key. Add a new IconTabFilter control to the view. a) In the palette, expand the Container section or use the search field. b) Drag the IconTabFiltercontrol to the canvas and drop it on the information icon. Change the properties of the new IconTabFilter control. a) In the canvas, select the icon of the new tab filter. In the Outline pane, sap.m.IconTabFilter is selected. b) In the Properties/Data pane, expand the Properties . c) In the Appearance section, select the value Default for the Icon Color field. d) In the Data section, delete the value of the Count field and enter the value Customer for the Key field. e) In the Misc section, change the value of the Icon field to sap-icon://customer and the value of the Text field to Customer. Add a SimpleForm control to the new IconTabFilter control. a) In the palette, expand the Layout section. b) Drag the SimpleForm control to the canvas and drop it on the icon of the new tab filter. To tab through the different levels of aggregations or drop targets, press CTRL before dragging the control. Change the properties of the new SimpleForm control. a) In the canvas, select the title in the simple form. b) In the Properties/Data pane, in the Properties section, under Appearance, change the value of the Text field to Customer Details . c) In the canvas, select Label 1 in the simple form. d) In the Properties/Data pane, in the Properties section, under Misc, change the value of the Text field to Sales Organization . e) In the canvas, select Label 2 in the simple form. f)

In the Properties/Data pane, in the Properties section, under Misc, change the value of the Text field to Sales Organization Name .

g) Delete the second input field under Sales Organization. Bind the property value of the input fields to elements from the OData service you have created. a) In the canvas, select the Sales Organization input field in the simple form. b) In the Outline pane, expand the sap.m.Input node and the properties node, and select the property value. c) In the Properties/Data pane, under Data, expand the SalesOrders node and select SalesOrganization. d) In the canvas, select the Sales Organization Name input field in the simple form. e) In the Outline pane, expand the sap.m.Input node and the properties node select the property value. f)

In the Properties/Data pane, under Data, expand the SalesOrders node and select SalesOrganizationName.

Save your changes. Your changes are saved for both layout and code editor. Run your application to test the result. a) In your project folder, select the file index.html. b) In the context menu, select

Run

Run with Mock Data .

c) In the Run with Mock Data dialog box, choose Run (no further input required).



73

The application preview is started, the application is loading and data is being mocked based on the service structure you have created.

4.5.7.2.1

OData Model for a Simple Sales Order Service


74


Develop

4.6

Deploying Applications

You can deploy new applications from SAP Web IDE to different servers.

4.6.1 Deploying New Applications to the SAPUI5 ABAP Repository You can deploy an existing application from SAP Web IDE’s workspace to the SAPUI5 ABAP repository.

Prerequisites ●

If you are using NetWeaver 7.31 ABAP backend, make sure that the software component SAP UI5 TEAM PROVIDER ON 731 (UI5_731) is installed.

Note If you are using NetWeaver 7.40 ABAP backend, you do not need to install an additional component. ●

If you need transport support, make sure that SAP Note 2046730

●

Make sure that SAP Note 1684342

is implemented in your system.

is implemented in the NetWeaver 7.31 ABAP backend.

Procedure In your browser repository, right-click the desired project. Select

Deploy

Deploy to SAPUI5 ABAP Repository

.

From the System drop-down list, select the desired system. Select the Create a new application radio button. Choose Next. Provide a name and meaningful description for the application. Choose Browse. In the Package Selection search field, enter the name of the desired package and choose OK.

Note The Browse button is enabled only after providing a name for the application. Choose Next If the selected package is local, choose Finish. If it requires transport, select a transport request for your application using one of the following options:



75

○

Enter a request number.

○

Create a new request and enter its description.

Note The request ID is automatically generated. ○

Select a request in which you are involved from the table.

Choose Next and then Finish. A successful message is printed to the IDE’s console and a notification message displays once the deployment is done.

Related Information Using the SAPUI5 Repository Based on BSP Repository Synchronizing with the SAPUI5 Repository Testing the SAPUI5 Application on an ABAP Server SAP Note 1666368 - Installing UI add-on 1.0 for SAP NetWeaver

4.7 Updating Existing Applications Residing in the SAPUI5 ABAP Repository You can update your applications residing in the SAPUI5 ABAP repository.

Procedure In your browser repository, right-click the desired project. Select

Deploy

Deploy to SAPUI5 ABAP Repository

.

From the System drop-down list, select the desired system.

Note Only systems that have the SAPUI5 ABAP Filestore installed are valid for deployment. Select the Update an existing application radio button. Choose Next. Select the desired application.


76


Develop

Note If you receive a message informing you that the system you selected supports only local object creation, implement SAP Note 2046730 updated.

. Otherwise, applications whose packages are not $TMP will not be

Choose Next and then Finish.

Note A list showing updated files that will be overwritten and new files that have been added displays. Click OK to confirm the update.

4.8

Running Applications for In-Development Testing

Evaluate the progress of your application's development, by choosing one of the supported methods of running an application to test in-development functionality and design.

4.8.1

Running Applications in Simulators or on Devices

Test your application at any time, by running its HTML5 file on a simulator. Use it to check localizations and functionality.

Prerequisites

●

●

Decide whether to run the application with a simulator frame. The simulator frame keeps the menu bar visible, and allows you to toggle between all predefined and custom simulators. However, to debug the application, load the it directly into the browser, without using a simulator frame. This makes issue detection more apparent, as SAP Web IDE runs only the application. Know which HTML file loads the application. There might be multiple HTML files in one project; therefore, when running an application for the first time, you must select the correct one.

Note SAP Web IDE remembers the HTML file on subsequent run actions: the previously selected file is used until you choose a new one from the current project.



77

Procedure Choose

Run

Run With Frame or

Run

Run Without Frame

.

If you are running with a frame, to preview the application in a predefined simulator, select one of the large/ desktop, medium/tablet, or small/mobile simulators. Each time you select a different menu option, the proportions change accordingly. To toggle the orientation, click the Orientation button. Validate the languages the application supports, by selecting a Language. The applications re-renders accordingly.

Note Languages vary from application to application. If an application supports multiple languages, codes are read from the .project.json file in the order in which they appear. For example, "supportedLanguages": "en,fr,de,zh_cn" in .project.json , displays English, French, German, and S Chinese in SAP Web IDE language preview. To run the application from a custom simulator: a) Click the Edit icon beside the Custom menu option. b) Change the dimensions to ones that match the screen size of your device. c) Click the Confirm icon, and the proportions change to the custom values.

Related Information Application Testing

4.8.2

Running Applications with Mock Data

Working with mock data allows you to create an application regardless of the relevant OData service availability.

Context Running an application using a client mock server enables you to test your application without depending on the OData provider. Likewise, it enables you to work on your application while offline. Prerequisites ●

●

Make sure you have an existing web application project in SAP Web IDE that uses the SAPUI5 OData model with JSON format. Make sure your project has a model folder containing the metadata.xml file. This file has the metadata of the OData service on which the application is based.


78


Develop

Note If you are working on a project that was generated in SAP Web IDE, the model folder containing the metadata.xml file is automatically created for you during the project generation. ●

Optional - If want mock data, you need to save a JSON file per service entity in the model folder.

●

Make sure you have the right settings for the mock server. Right click on any file in your project and select Project Settings . From the Project Settings options, select Mock Data. In the Service URL field, enter the root URL. The URL must be the same as the project’s service URL. ○

If you selected a service when you created your project, this field is automatically populated.

○

If the service URL changes, this field must be edited accordingly.

○

If there is no service URL, this field must remain empty.

If you want the mock server to generate data, select the Random data radio button. If you want the data to be provided based on the project JSON files, select the JSON files radio button.

Note Make sure the application’s JSON files are located within the model folder. Save your changes. A new html file is added to the project but remains hidden. This file runs the application using the mock server. Open the desired project from the workspace. Select the HTML file used to run your application. For example, index.html. Select

Run

Run with Mock Data

. A new tab is opened showing the application.

.

Note If your project does not have a model folder, this option is disabled. If your application is already using mock data and you want to alter it, follow the procedure below: Edit the application's preview URL by adding the following parameter: run-with-mock=false. The application will run using the relevant OData provider. To return to the mock server (for example, to work offline), change the URL parameter to run-withmock=true.




79

4.8.3 Running Applications in the Fiori Launchpad Environment Test your application within the Fiori launchpad environment, which offers a unified shell runtime, allowing to use Fiori launchpad integration services. The local sandbox environment for the Fiori launchpad is a simplified environment that you can use for local development and testing. This allows you to ensure that the application can be embedded properly into the Fiori launchpad. The sandbox shell implementation uses local configuration files instead of ABAP or SAP HANA backend services.

4.8.3.1

Testing a Single SAP Fiori Application

Test your SAP Fiori application in a simplified SAP Fiori launchpad environment.

Prerequisites You have created a SAP Fiori application in SAP Web IDE. A Component.js file has automatically been created and is accessible in your workspace.

Procedure In the workspace, open the desired project. Select the file Component.js. Choose

Run

Run in SAP Fiori launchpad sandbox from the menu bar.



80


Develop

4.8.3.2

Testing Multiple SAP Fiori Applications

Test the interaction of multiple SAP Fiori applications in a simplified SAP Fiori launchpad environment.

Prerequisites You have created several SAP Fiori applications in SAP Web IDE. These applications are located in the same project.

Context To test multiple SAP Fiori applications, several configuration steps are required.

Procedure Create a local JSON file, in which to store the configuration data. Use the following naming convention: *fioriSandboxConfig*.json Configure a set of SAP Fiori applications in the JSON file. For more information, go to http://help.sap.com/nw-uiaddon and select Creating a Local Configuration File . In SAP Web IDE, navigate to the file *fioriSandboxConfig*.json you created in step 1 and select it. Choose

Run

Run in SAP Fiori Launchpad Sandbox

from the menu bar.

The applications you configured in step 2 are displayed.



81

4.9

Extending SAPUI5 Applications

You can extend SAPUI5 applications currently residing in SAP Web IDE as well as applications residing remotely.

4.9.1

Creating New Extension Projects

Extension projects alter the functionality or appearance of a parent application. Changes are made only to the extension project which allows the parent application to remain unchanged.

Prerequisites You must have an existing Fiori application in SAP Web IDE.

Procedure

From the File menu, choose

New

Extension Project

.

Choose Workspace to select the desired Fiori application you want to use as your parent application. By default, the Extension Project Name field is populated with the name of the parent application with the suffix Extension. You can change this name. If necessary, select the Open extension project in extensiblity pane checkbox to have the extensibility pane automatically opened after the project is generated. Click Next. Click Finish.

Results A new extension project is generated and added to your workspace. The new extension project contains its own index.html and Component.js files.


82


Develop

4.9.2 Extending Applications that Reside in the SAPUI5 ABAP Repository You can extend an existing Fiori application that resides on the SAPUI5 ABAP repository without importing it to SAP Web IDE.

Context You can also import an existing application to your workspace during the creation of the extension project.

Note The SAPUI5 Repository is technically based on the BSP Repository of the ABAP Server. The BSP repository is only used as a repository or storage for SAPUI5 application files; the BSP runtime, however, is not used at runtime and, hence, the flow logic ABAP parts cannot be used as they are not executed at runtime.

Procedure From the File menu, choose Choose Remote... displayed.

New

Extension Project

.

SAPUI5 ABAP Repository . The Select SAPUI5 ABAP Repository Application dialog is

Select the desired remote system. Search for the application you want to extend. Select the application and choose OK. The Extension Project Name field is automatically populated in the wizard. If necessary, you can edit this name. If necessary, select the Import parent application checkbox. If necessary, select the Open extension project in extensiblity pane checkbox to have the extensibility pane automatically opened after the project is generated. Choose Next. Choose Finish to confirm and create your extension project. The new extension project is added to the workspace.

Related Information Using the SAPUI5 Repository Based on BSP Repository Synchronizing with the SAPUI5 Repository Testing the SAPUI5 Application on an ABAP Server SAP Note 1666368



83

4.9.3

Creating New Extensions

Extensions enable you to change the views or the logic of an extended project.

Prerequisites There must already be an extension project in your workspace.

Context You can create extensions to: ●

Replace an existing view with a new view in an existing project.

●

Add logic to an existing view using an extension point that is defined in the parent project.

●

Change control visibility.

●

Extend an existing controller with new logic.

Once the extensions have been created, a reference to them is created in the Component.js file of the extended project.

Note If you delete or rename a file that is referenced from the component.js file, the application does not work properly. Make sure you delete the reference or update the file name on the component.js file as well.

Note If you hide a control and then want to show it again, you must delete the extension from the Component,js customizing block. Changing the Visible property from False to True does not make the control appear.

4.9.3.1

Extending a UI Element Using the Extensibility Pane

You can extend an existing Fiori extension project from the extensibility pane, as well as by using the Extension wizard.

Context The extensibility pane shows an extension project in preview mode. You can choose the Extensibility Mode option from the toolbar to enable a 2-way selection of elements from the application.


84


Develop

Note The extensibility mode disables the ability to preview the application's functionality. The Outline section shows the UI elements available in the application. You can filter the UI elements displayed in the outline as follows: ●

All Elements - Shows all the UI elements contained in the application's view.xml file. Elements without a

configured ID, will appear only as the element type, for example, content.

Note You cannot extend elements that do not have configured IDs. Also, you cannot hide elements that do not have a “visible” property. ●

Extended Elements - Shows all UI elements that are already extended.

●

Extensible Elements - Shows all UI elements that have a configured UI ID. The outline follows a "views >

elements" hierarchy. You can select a UI element's ID in the Outline and see it highlighted in the previewed application and vice-versa: if you hover over a UI element in the previewed application, the respective element’s ID is highlighted in the extensibility pane. If you click on a UI element in the previewed application when in Extensibility Mode, this element is selected and highlighted in the Outline. You can deselect it by clicking on it again.

Note This 2-way selection is only available if Extensibility Mode is selected from the menu bar.

Note Only UI elements that are part of the application's XML views appear in the Application Outline. The extensibility pane provides information regarding UI elements (for example, where the element is located in the application, which view holds this element, its ID, and so on), in a visual manner. From the extensibility pane, you can also view the parent application’s views and controllers in read-only mode.

Note You can view the parent’s code even if the parent application does not reside in the workspace. You can also use mock data for the extensibility pane by selecting the desired extension project, and from the Tools menu, choosing Extensibility Pane with Mock Data

Procedure In SAP Web IDE, select the desired extension project.



85

From the Tools menu, choose Extensibility Pane .

Note The extensibility pane is also automatically displayed when a new extension project is created. Select the UI element you want to extend. From the Possible Extensions drop-down list, select the extension you want to add and choose OK, or rightclick and select the extension. The extension is added to the project and the extended UI element is marked in bold. Refresh the application to make the change visible. Select the extended UI element and select that represents the extension.

Go to Code

Extension Code

to go directly to the relevant file

You can remove an extension by right-clicking an extended UI element and selecting Remove Extension. You can view the relevant code from the parent application by selecting an element in the Outline (for example view, controller, UI control) and selecting SAP Web IDE editor in read-only mode.

Go to Code

Parent Code . This opens the relevant file in the

Note If the parent code resides in your workspace, the file opens ready for editing.

4.9.3.2

Extending Controllers

You can add code to a controller of the parent application.

Procedure


New

Extension

.

Select the extension project to which you want to add the extension. Choose Next. Select Extend Controller . Choose Next. Select the controller you want to extend. From the Replace with drop-down list, select Copy of the parent controller to edit the controller based on the original controller, or, select Empty Controller to replace the controller with an entirely new one. Choose Next. Choose Finish to add the extension to the selected extension project.


86


Develop

4.9.3.3

Extending Views

You can extend a view using an extension point.

Prerequisites You must already have defined extension points in the parent application.


New

Extension

.

Select the extension project to which you want to add the extension. Choose Next. Select Extend View. Choose Next. Select the view you want to extend. Select the desired extension point.

Note Not all views have extension points. Choose Next. Choose Finish to add the extension to the selected extension project.

4.9.3.4

Hiding Controls

You can hide a specific control in the parent application.

Context

Note You can only hide controls that have their Visible property defined as true. If the Visible property does not exist, you cannot hide the control.



87

Procedure


New

Extension

.

Select the extension project to which you want to add the extension. Choose Next. Select Hide Control . Choose Next. Select the view containing the control you want to hide. Select the specific control you want to hide.

Note Only controls with an ID defined in the parent application appear in the list. Choose Next. Choose Finish to add the extension to the selected extension project.

4.9.3.5

Editing Strings

The i18n Resource Text Customization extension allows you to copy the i18n folder of the parent application to your extended application. This lets you edit the UI strings in the extended application without altering the parent application.

Prerequisites The parent application must have an i18n folder with at least one Properties file containing the relevant strings.

Procedure


New

Extension

.

Select the extended application you want to customize. Choose Next. Select the i18n Resource Text Customization tile. Choose Next. Choose Finish to confirm and add the extension.


88


Develop

Results The i18n folder of the parent application is copied to your extended application, including all its.Properties files. You can change one or more of the strings in the .Properties file and run your extended application to see them in runtime. The parent application remains unchanged.

4.9.3.6

Replacing OData Services

You can replace the extended application's OData service with a new OData service.

Prerequisites The new OData service must be compatible (similar metadata, similar operations, as well as any extensions) with the current OData service of the parent application project.

Procedure


New

Extension

.

Select the extended application you want to customize. Choose Next. Select the Replace Service tile. Choose Next. Select the new OData service in one of the following ways: a) In the Service field, enter the desired service’s URL. b) Choose Catalog and select the desired service. c) Choose Browse and browse for the relevant service metadata in your file system. Choose Next. Choose Finish to confirm and replace the OData service.

Results You can run your extended application to see data from the new OData service.



89

4.9.3.7

Replacing Views

You can replace a specific view in a parent application with a new view.


New

Extension

.

Select the extension project to which you want to add the extension. Click Next. Select Replace View. Click Next. Select the view you want to replace. From the Replace with drop-down list, select Copy of the parent view to edit the view based on the original view, or, select Empty View to replace the view with an entirely new one. Click Next. Click Finish to add the extension to the selected extension project.

4.10 Source Control in SAP Web IDE As a Git-enabled development environment, SAP Web IDE allows you to divide application development into small increments.You will eventually reach a point where a working product is demonstrated and accepted. This minimizes overall risk and allows the project to adapt to changes quickly.

4.10.1 Setting Up Git You must set a user name and email address for your Git account. This user name and password are the credentials Git uses whenever committing changes in any SAP Web IDE project.

Procedure From the Tools menu, select

Git Settings

.

Enter the new user name or email address. Use the same email address that is assigned to your SCN account.

Note The Git Email Address field is case sensitive.


90


Develop

Choose Update. Choose Clear Authentication from Memory to remove saved credentials from the memory.

4.10.2 Working with Git The Git client allows you to perform Git operations from an integrated UI. You can access the main Git features by right-clicking an element in the workspace and selecting the appropriate option from the Git entry in the context menu.

4.10.2.1

Configuring Git Repositories

You can create, read, update, or delete Git repository settings.

Procedure Right click on the desired Git repository. From the context menu, select

Git

Configuration .

To create a new entry, choose Add and type the relevant values in the Key and Value fields.

Note The Key must be provided in the following form:
.. For example, User.Name To delete an entry, select the desired entry's row and choose Remove. To update an entry: a) Select the desired entry row and choose Edit. b) Enter the new Value properties and choose OK.

Note The Key field is not editable.



91

4.10.2.2 Cloning Git Repositories You can clone an existing Git repository into a new directory.


Git

Clone Repository .

In the URL field, enter the Git repository URL (in SSH or HTTPS format) and press Enter. The relevant fields are populated with information from the URL. Fill in any remaining empty fields. If the Git repository you selected is in SSH format, choose Browse , navigate to your SSH private key, and open it. If the Git repository you selected is in HTTPS format, in the Password field, enter your system password. Choose Remember Me to avoid being asked for your password or SSH key in future actions.

Note To clear the credentials from the memory, go to from Memory.

Tools

Git Settings

and choose Clear Authentication

Choose OK. The cloned repository appears in the workspace.

4.10.2.3 Fetching Changes from Git Fetching from Git enables you to download objects and references from another repository into your project.

Procedure From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Select the Git repository for which you want to fetch changes. Choose Fetch from the Git pane. If the Git repository you selected is in SSH format, choose Browse , navigate to your SSH private key, and open it. If the Git repository you selected is in HTTPS format, in the Password field, enter your system password. Choose Remember Me to avoid being asked for your password or SSH key in future actions.


Tools

Git Settings



92


Develop

Choose OK. The changes are fetched from all the available braches. The Changes Fetched table shows changed details for each branch.

4.10.2.4 Rebasing Changes Rebasing enables you to take all the committed changes on one branch and incorporate them into a different branch.

Procedure From the workspace, select a Git repository. From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Choose Rebase . Select the branch from which you want to obtain the changes.

Note The branch that is currently checked out is automatically disabled. It cannot be selected.

Note By default, the corresponding remote branch is selected. Choose OK. The latest changes are integrated and shown in your workspace.

Note Rebase can fail due to conflicts between the current branch and the branch whose changes you want to incorporate. When conflicts are identified, the Git pane switches to the Rebase Interactive mode and different actions are available to enable conflict resolution.

Related Information Rebase Interactive Mode [page 94] Conflicts when rebasing a branch trigger the rebase interactive mode.



93

4.10.2.4.1 Rebase Interactive Mode Conflicts when rebasing a branch trigger the rebase interactive mode. When the interactive mode is enabled, the caption [rebase in progress] is displayed next to the repository name in the Git pane. The following actions can be executed in the rebase interactive state: ●

Continue the rebase process. Fix the conflicts visible in the staging table and save the fixed files. Stage the fixed files. Choose Continue . If all conflicts are resolved, the repository returns to its normal mode, if there are still errors, repeat the procedure.

●

Abort the rebase process. Choose Abort.

●

Skip a specific conflictive commit. Choose Skip Patch.

●

Reset changes. Resetting changes discards all staged and unstaged changes on the current local branch and so that it is identical to the remote branch. Choose Reset.

4.10.2.5 Pulling Changes from Git Choosing Pull allows you to perform Fetch and Merge in a single call and enables you to download objects and references from the remote branch of your local checked-out branch and incorporate them into your project.

Procedure From the workspace, select a Git repository. From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Choose Pull. If the Git repository you selected is in SSH format, choose Browse , navigate to your SSH private key, and open it. If the Git repository you selected is in HTTPS format, in the Password field, enter your system password. Choose Remember Me to avoid being asked for your password or SSH key in future actions.


Too oolls

Gitt Se Gi Sett ttiing ngs s



94


Develop

Choose OK. The changes are fetched from the specific branch and rebased into your local checked-out branch.

4.10.2.6 Staging Files The stage table shows changed repository files.

Context Each time a file belonging to a specific repository is updated, added , or deleted, it appears in the Stage table in Unstaged status.

Procedure To change the file status to Staged, select the file's Stage checkbox. To change the status of all files to Staged, select the Stage All checkbox.

4.10.2.6.1

Staging Table Options

You can edit, compare, ignore, or delete files directly from the staging table. When you select a file on the staging table and right-click, a context menu opens with the following options: ●

Delete

Removes the selected file from the staging table and from the repositroy browser. This option is only enabled for new files (Status N) which have not been staged. ●

Git Ignore

The selected file is marked as Non Git and it will not be pushed to the Git server on the next push operation. This option is enabled only for new files (Status N) which have not been staged. When ignoring a file, a new file named .gitignore is created in the ignored file's folder. This file contains "/" + the name of the file that has to be ignored. For example, /IgnoreMe.js. If the .gitignore file already exists, it is updated with the name of the new file that needs to be ignored. ●

Edit

Opens the selected file in the code editor. This option is enabled for all file statuses except deleted files (Status D). ●

Compare

Compares the selected file with its previous version. This option is enabled for conflicting and modified files (Status M and C).



95

4.10.2.7 Git Decorations Any change in a file's status is reflected in the workspace by decorators. The table below shows the meaning of these decorators:

Committed file Modified file that has not been staged Modified file that has been staged New file Folder containing deleted files File with merge conflicts

4.10.2.8 Discarding Changes Discard removes all changes from an existing file in the local environment. For example, discarding a new file deletes the file from the branch.

Context

Note Only unstaged files can be discarded.

Procedure From the workspace, select a Git repository. From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. In the Commit section, click the

Discard icon from the row containing the change you want to discard.

To discard all files, choose Discard All . All unstaged files in the Commit section table are discarded.


96


Develop

4.10.2.9 Amending Committed Changes You can make additional changes to the last committed change.

Procedure From the workspace, select a Git repository. From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. From the Stage table in the Commit section, change the status of the file containing the change that needs to be committed to Staged. Select the Amend Changes checkbox. The ID of the last committed change appears in the Commit Description field. The new changes are added to the last committed change.

4.10.2.10 Committing Changes You can commit changes to the repository locally.

Procedure From the workspace, select a Git repository. From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. From the table in the Commit section, select the Stage checkbox to change the status of the file containing the change that needs to be committed to Staged. Double-click a table row to see the difference between the current file and the old version of the file (HEAD) in the editor. Enter a description of the change. If you want to add the current changes to the last (or previous ) commit, select the Amend Changes checkbox. The commit description of the last committed change appears in the Commit Description text box. Choose Commit. The changes are committed locally and added to the Unsynced commits table.



97

4.10.2.11 Performing Push The Push option incorporates all unsynced committed changes into the remote branch of the currently checkedout local branch. The number of unsynced committed changes is displayed next to the repository name.

Procedure From the workspace, select a Git repository. From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Choose Push. Choose origin/ if your local branch is based on a specific remote branch. Or, Choose Remote Branch to select a different remote branch. If the Git repository you selected is in SSH format, choose Browse , navigate to your SSH private key, and open it. If the Git repository you selected is in HTTPS format, in the Password field, enter your system password. Choose Remember Me to avoid being asked for your password or SSH key in future actions.


Tools

Git Settings


4.10.2.12 Using Multiple Branches From the Git pane you can check out a local branch, add a new local branch, and remove a local branch. To check out a local branch:

From the workspace, select a Git repository From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Select the desired local branch. The selected branch is checked out.

Note If you have uncommitted changes in your workspace, a dialog containing the list of conflicting files displays. Choose Cancel to abort, or Reset and Checkout to remove all uncommitted changes. To create a new local branch referencing any available remote or local branch:

From the workspace, select a Git repository From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Choose + (plus sign). The Create a New Branch page appears. From the Source Branch drop-down list, select the desired branch.


98


Develop

Enter a name for the new local branch. If the desired referenced branch is a remote branch, the name of the new branch is filled automatically according to the remote branch. Choose OK. The new local branch is created and checked out.

Note If you have uncommitted changes in your workspace, a dialog containing the list of conflicting files displays. Choose Cancel to abort, or Reset and Checkout to remove all uncommitted changes. To delete a local branch:

From the workspace, select a Git repository From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Choose - (minus sign). The Delete Branch page appears, showing all the branches that are not checked out.

Note If there is only one branch available, it cannot be deleted.

4.10.2.13 Resetting a Branch You can delete all new objects and references that were added to an existing local branch to make it identical to its remote branch.

Context When you reset a branch, all unsynced committed changes are removed, and all staged and unstaged files are reverted to their original state in the local copy of the respective remote branch.

Procedure From the workspace, select a Git repository. From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Choose Reset. Select the branch from which you want to obtain the changes.


Note By default, the corresponding remote branch is selected.



99

Choose a Resert type.

Note Hard reset removes all changes. Choose OK.

4.10.2.14 Merging Changes in Git You can incorporate all the changes from one branch into another one in one single commit.

Procedure From the workspace, select a Git repository. From the View menu, choose Git Pane, or, from the right sidebar, click the Git Pane icon. Choose Merge. Select the branch from which you want to obtain the changes.


Note By default, the corresponding remote branch is selected. Choose OK. The latest changes are integrated and shown in your workspace.

Note Merge can fail due to conflicts between the current branch and the branch chosen to incorporate the changes from.

4.10.2.15 Git History Pane You can view the history of committed changes that have been made for repositories, folders, and files. From the workspace, select the desired Git repository. From the File menu, select

Git

History

.

From the workspace, select the desired file, or folder. The commit history for the selected option is displayed in the History pane.


100


Develop

Click a commit to open the Commit section to see the commit details. Double-click the changed file to see the commit's changes in the editor. To tag a commit:

Tagging allows you to mark specific points in history as important, usually used for release points. Select the desired commit’s radio button and choose Tag. Enter a name for the new tag. Choose OK. To cherry-pick a change:

Enables you to apply the changes of the selected commit only to the current branch. Select the desired commit’s radio button and choose Cherry-Pick . Choose OK to confirm the commit. If there is a conflict, a warning is displayed. Open the Git pane to resolve the conflicts as follows: Open the Git pane and find the conflicting files in staging table. Edit the files to resolve the conflicts. Stage the edited files. Commit the changes. To revert a commit:

Revert allows you to undo all the changes that were incorporated in the selected commit. Select the desired commit’s radio button and choose Revert .



101

5

Known Issues

Locate the symptom and follow the recommended analysis and resolution steps for it.

SAP Web IDE Freezes when Debugging in Preview You can debug an application in the Preview tab of SAP Web IDE using Google Chrome, with the Chrome Developer Tools. However, if you opened the Preview by choosing Run Run without Frame , stopping with breakpoints in this tab has the following effect on the original tab containing the development environment: SAP Web IDE freezes and it is not possible to continue, that is, to use the editors. Solution

Copy and paste the URL of the Preview into a new tab.

Parallel Instances of SAP Web IDE can Cause Issues You can open several instances of SAP Web IDE in parallel, but this can cause issues and lead to unhandled exceptions.

Using the Same Class for Multiple External Plugins If you want to use the same class for several external plugins, you must: Define the desired class as an SAP Web IDE service for the first external plugin. Consume the class as a service in the other external plugins.

Browser Issues Firefox Browser Support

SAPUI5 does not support smartphone simulation in Firefox using the fakeOS parameter in the URL (which is what the preview services requires). When you preview your application in the Firefox browser, it will always run as a tablet or desktop. Safari Browser Support ●

Basic Authentication

If you defined a destination to a remote system which requires a Basic Authentication popup, this popup might not appear for synchronous requests when running or extending an application with SAP Web IDE in Safari.


102


Known Issues

Solution

For your own application, ensure to load the OData metadata asynchronously: For example new sap.ui.model.odata.ODataModel(sServiceUrl, {json: true,loadMetadataAsync: true}); ●

Exported Files

Exported files of projects or folders do not have the .zip extension. (To export a file, choose

File

Export

Project or Folder from the menu bar.) Solution Add .zip as extension to the exported file manually.

Issues in the Layout Editor Drag and Drop

Dragging and dropping an item from the canvas outside of a valid drop target deletes the item instead of dropping it back at its old location. Data Binding

Data binding supports only one OData service. No Support for Comments

The layout editor does not support comments. When you open a view with comments, a dialog box appears. To open the view using the layout editor, confirm the dialog box. This means that all comments will be lost when the document is saved and reopened again. Unsupported Controls

Some controls are not supported by the layout editor. These unsupported controls are marked with the label unsupported when selected in the canvas or in the Outline pane. The following aspects apply to unsupported controls: ●

They are not displayed in the palette.

●

You cannot edit their properties.

●

You can delete them.

●

You cannot delete, move, or change the properties of controls that are children of an unsupported control.

Note Use the XML code editor to perform operations on the view layout you cannot achieve with the layout editor. Layout Editor Deletes Undo/Redo History in code editor

If you are working with the code editor and open the layout editor in parallel, the undo/redo function in the code editor is not available any more (because the undo/redo history was deleted).

SAP Web IDE Developer Guide Known Issues


103

Important Disclaimers and Legal Information Coding Samples Any software coding and/or code lines / strings ("Code") included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended to better explain and visualize the syntax and phrasing rules of c ertain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, unless damages were caused by SAP intentionally or by SAP's gross negligence.

Accessibility The information contained in the SAP documentation represents SAP's current view of accessibility criteria as of the date of publication; it is in no way intended to be a binding guideline on how to ensure accessibility of software products. SAP in particular disclaims any liability in relation to this document. This disclaimer, however, does not apply in cases of wilful misconduct or gross negligence of SAP. Furthermore, this document does not result in any direct or indirect contractual obligations of SAP.

Gender-Neutral Language As far as possible, SAP documentation is gender neutral. Depending on the context, the reader is addressed directly with "you", or a gender-neutral noun (such as "sales person" or "working days") is used. If when referring to members of both sexes, however, the third-person singular cannot be avoided or a gender-neutral noun does not exist, SAP reserves the right to use the masculine form of the noun and pronoun. This is to ensure that the documentation remains comprehensible.

Internet Hyperlinks The SAP documentation may contain hyperlinks to the Internet. These hyperlinks are intended to serve as a hint about where to find related information. SAP does not warrant the availability and correctness of this related information or the ability of this information to serve a particular purpose. SAP shall not be liable for any damages caused by the use of related information unless damages have been caused by SAP's gross negligence or willful misconduct. All links are categorized for transparency (see: http://help.sap.com/disclaimer).


104


Important Disclaimers and Legal Information

SAP Web IDE Developer Guide Important Disclaimers and Legal Information


105

SAP Web IDE Dev Guide (Local Installation)

Recommend Documents