Old New ABAP Editor | SAP Blogs

Source: https://blogs.sap.com/2017/08/01/old-new-abap-editor/
Capture Date: 11.03.2018 19:39:41

If you develop now UI for SAP, you use Web IDE. If you are doing backend and ABAP, you use ADT (ABAP in Eclipse). But sometimes you still need to come back to SAP GUI and ABAP Workbench and use the “New” ABAP Editor.

😉

For that rare cases when you are doing ABAP in old fashion way  I have some suggestions, which maybe someone not aware of, and that may help be more productive. In this blog, I will try to explain most useful functions added in ABAP Editor (from my point of view) and will try to collect links to other useful resources related to ABAP Editor for SAP GUI.

Do not expect too much in the beginning, but the list will grow up on demand.

I am long time not responsible for the ABAP Editor in Workbench so I cannot add or fix something. And I am not ABAP Workbench expert in general – I can only give details about that white area where you type your code. But for that white area, I can explain how it was designed and if the thing you want is in or is theoretically possible.

Quick start

It was designed, that when one starts “New” ABAP editor in the ABAP workbench for the first time, he gets an introduction page, explaining new features of the editor. But I never saw this working :).

The page is located aside to ABAP Editor user settings in:

“%APPDATA%SAPSAP GUIABAP Editorqstart.htm” Copy => Win + R => Paste => Enter

And here is most valuable part of the page:
quick_start.gif

Block / Column Selection

  • Alt + Shift + Left/Right/Up/Down

The ABAP editor allows you not only use standard (called “stream” selection) but also allow to select a rectangular block of text, which does not start from the beginning of the line:

block-selection.gif

You can select text block using the keyboard commands (Alt + Shift + Arrows) or with a mouse, keeping left Alt key during selection:

block-selection-mouse.gif

After selection, you can apply many of the editing functions in block mode:

  • Delete, Insert, Multi Edit
  • Copy/paste from Clipboard
  • Case conversion
  • Indent etc.

Multi Editing

multi-editing.gif

Null Width Selection

The degenerated version of the block selection is Null Width selection (not visualized 🙂 ), which you can use for indenting of text blocks.

null-width-selection.gif

Clipboard Ring or Multi Clipboard or Clipboard History

  • Ctrl + Shift + V

If you want to see all text pieces you have copied during your editing session, just press Ctrl + Shift + V, instead of normal Ctrl + V. Then you get a history of the clipboard items (up to 12, in chronological sequence) where you can select and paste any of the items (it also overwrites current Windows clipboard content).

clipboard-ring.gif

Case Modification

  • Ctrl + L -> lower case
  • Ctrl + U -> UPPER CASE
  • Ctrl + K -> sWAP cASE
  • Ctrl + J -> Capitalize Text
  • Ctrl + T -> Like in sentence

You can easily modify text case, without using a pretty print function. It works with stream and with block selection.

case-correction.gif

Lines move

  • Ctrl + Alt + Up/Down

The feature is useful when you need a block of lines, but do not want to overwrite keyboard content. You can move selected block of lines up or down. If no selection is done, the current line is moved.

lines-move.gif

Line duplicate

  • Ctrl + D

Sometimes it is much faster to duplicate the current line and adjust content than typing it once more.

line-duplicate-1.gif

Word/Line Selection

The ABAP editor supports different kinds of word/line selection:

  • Ctrl + Left/Right to select till word borders
  • Ctrl + Left Mouse Click on a word
  • Left Mouse Click on number margin to select lines

selection.gif

Incremental Search

  • Ctrl + I, Ctrl + Shift + I

In many cases when you want to do a simple text search you can achieve it without calling Find dialog and losing your editing context. Just start Incremental Search mode by pressing Ctrl + I and start typing.

incremental-search.gif

  • Press Ctrl + I to search for next occurrence
  • Ctrl + Shift + I for search of the previous occurrence
  • Backspace to correct your input
  • Esc to exit incremental search mode
  • See editor status bar for current search query

Code Hints

Code Hints were designed as proactive, not intrusive alternative for standard code completing list called by Ctrl + Space. It shall be very prudent to resources, but same time giving the user a way to speed up typing.

Code Hints may suggest syntactical construction, variables and code templates (somewhen before it was also auto correction suggestions in). The editor collects all fitting suggestions, rank them by type, usage count, input method and shows you the best hit. Code Templates are always won against keywords and variables, keywords (syntactical constructions) win against keywords.

Suggest Non-Keywords from the Text

The mentioned option is OFF by default (for some reason), but it brings a lot of value. “Non-Keywords from the Text” means in ABAP scope – your variables. So, if you enable the feature, you get your variables suggested by code hints (code completion list will show them independently of the flag) and this may save some typing effort especially if you are using “self-explaining”, meaningful variable names ;). Especially the flag would be useful, if you are forced to work on systems below SAP_BASIS 7.02, where full blown code completion is not enabled, and this flag and code hints the only “completion” you may get :).

suggest_not_keywords.png

Code Hint Color

When you using Code Hints, you see that it sometimes has light, standard background:

code_hint_ab4_single.png

And sometimes it has inverted, dark background:

code_hint_ab4_multi.png

Have you ever asked yourself: what does this crap mean? 😉

The secret meaning of the Code Hint background color:

ADT (ABAP in Eclipse) has also emulated implementation of Code Hints in some way, but the “secret knowledge” was lost, and the only inverted color is left 🙂 :

code_hint_eclipse.png

Why my code highlighted differently when I paste it in an email?

You may wonder, why when you copy/paste your code from the editor into email (or any other editor supporting HTML formatting) syntax highlighting of the ABAP code looks different from the one you had in ABAP editor.

ABAP Editor:
syntax_highlighting_editor.png

MS Outlook:
syntax_highlighting_outlook.png

The reason here – different highlighters that used for rendering of text in both cases. The one in ABAP editor, it is a highly sophisticated one, which works in respect of ABAP grammar available on ABAP system you work (and require fully qualified input), and the second one, is rudimental highlighter, which works based on keywords and can highlight even invalid code, but is not in sync to actual ABAP grammar. On the example above we see that keyword based parser has not highlighted OCCURRENCE, REGEX RESULTS (while in time the editor was written, these keywords were not yet known J ) but has highlighted the VALUE in the second sentence, that has been marked as an error by ABAP parser.

You would not be able to get code pasted into an email, always looking as one in ABAP editor, but you can extend syntax scheme of the keyword based parser, by simply adding missing keywords into abap_spec.xml file in ABAP Editor settings directory to get missing keywords highlighted:

“%APPDATA%SAPSAP GUIABAP Editor” -> abap_spec.xml

Add this:

… <TextType id="52" name="Keywords" ...> <Keywords> … <Keyword text="regex"/> <Keyword text="occurrence"/> <Keyword text="results"/> … </Keywords> </TextType> …

And get them also highlighted:

syntax_highlighting_outlook_corrected.png

Display list of assigned ABAP Editor keyboard shortcuts

The easiest way to get an overview of currently assigned keyboard shortcuts in your instance of the ABAP editor is a preview of the keyboard mapping scheme file in Internet Explorer (not in Chrome, you need a browser supporting XSLT transformations).

Paste the following path in your Windows Explorer:

%APPDATA%SAPSAP GUIABAP Editorkeymap.xml

If you are lucky and your default browser is still IE, you will get something like this:

keymap.png

The list is searchable and contains all assigned keyboard shortcuts and command IDs and descriptions for all installed keyboard mapping schemes.
If the command is not on the list, it means, there is no shortcut assigned to it.

Most of you know that it is possible to change the color of syntax elements shown in ABAP Editor. Using that “Settings” button in the status bar. But most of you a bit lazy to change that consistently and create new color scheme (Dark one for example) in a way that you can use and share with others.

But there are guys who did it. Check this GitHub repository if you want to get alternative color schemes for ABAP editor.

https://github.com/lucattelli/ab4-themes

abap_editor_dark_small.pngabap_editor_nostalgia_small.png

abap_editor_tb_dark_small.png

And if you have your own one – share it with the community!

Probably everyone used the ABAP Editor has also used Code Templates, speeding up typing of routine code. And definitely, there were some cases when you would like to have a new code template for some code block and have not found it among the standard SAP pre-installed ones (for example METHOD/ENDMETHOD.).

Here you can find an extended set of code templates for ABAP Editor which may help.

Feel free to suggest new code templates or request update of existing.

Let us make a world of ABAP Programming better 🙂

Creating Offline Application based on SAP Web IDE CRUD Master-Detail Template using Hybrid App Toolkit | SAP Blogs

Source: https://blogs.sap.com/2017/06/12/creatin…-hybrid-app-toolkit/
Capture Date: 11.03.2018 15:08:33

Introduction

In this blog, I am going to walk through the steps of creating an offline application based on CRUD Master-Detail template from SAP Web IDE using Hybrid App Toolkit

To follow the steps mentioned in this blog post, the following prerequisites needs to be met

Services.png

  • You need to install Hybrid App Toolkit local add-on in your local environment.The installation and setup instructions for Hybrid App Toolkit local add-on can be found here
  • To create a CRUD master-detail application, we need a backend destination setup in SAP Cloud Platform. For this blog, we use SAP Gateway ES4 Demo System OData Service. If you have not previously signed-up for SAP Gateway Demo System, you can sign-up here

Setting up backend destination

  1. Access Cloud Platform cockpit using https://account.hanatrial.ondemand.com/cockpit
  2. On the left-hand side, select Connectivity tab, then Destinations tab.
  3. Click on the New Destination link to open new destination configuration form.
  4. Enter all fields as shown in below tables

For Additional Properties fields click New Property and fill-up

Destination-1.png

5. Click Save.

Enable Hybrid App Toolkit Plugin in SAP Web IDE

Before creating the project using the SAP Web IDE Project template, we need to enable the “Hybrid App Toolkit” plugin, so that Hybrid Mobile features will be available in the SAP Web IDE.

  1. Open SAP Web IDE using the url https://webide-<your_trial_account>.dispatcher.hanatrial.ondemand.com Replace the string “<your_trial_account>” with your HCP Trial Landscape account
  2. After entering SAP Web IDE, select Tools > Preferences or click on the Preference icon directly on the left bar

tools.png

Or

pref.png

3. Select Plugins. Find and check Hybrid App Toolkit to enable the plugin.

plugin.png

4. Click Save.

5.Click Refresh to reload SAP Web IDE

Create new project based on CRUD Master-Detail template

Now you will create a new application using the SAP Web IDE Project template wizard.

  1. In the SAP Web IDE select the Workspace root and open the context menu by right-clicking.
  2. Choose New > Project from Template to open the new project creation wizard.

proj1.png

3. On Template Selection page, select SAP Fiori Application category and click on the CRUD Master-Detail Application to mark it as the template to be used for your new project

proj2.png

4. Click Next.

5. On the first page of the wizard, enter the Project Name as OfflineApp, Title as Products, and Namespace as com.sap.offlineapp

proj3.png

6. Click Next

7. On the Data Connection page click on Service Catalog as service source.

8. From the drop down box select the ES4 Gateway System entry.

proj4.png

9. Type “BASIC” in the Search input field to filter

10. Select GWSAMPLE_BASIC service.

proj5.png

11. Click Next.

12. On Template Customization page, fill up the Data Binding – Object section as below

Check the box for “Display only required fields when creating a new identity”

proj6.png

13. Scroll down to the Data Binding – Line Item section,fill up the section as below.

Capture-22-2.png

14. Click Next.

15. Click Finish to create the new application.

proj8.png

16. Run the newly generated web application

proj9.png

17. Congratulations! You developed your CRUD Master-Detail application and you see it already running in preview mode.

proj10.png

Configure Offline Settings to the project

  1. Go to Workspace, select OfflineApp/webapp/manifest.json and open it code editor.

off1.png

2. Switch to code editor view

off2.png

3. Add the following code snippet at the end of the file

"sap.mobile": { "_version": "1.1.0", "definingRequests": { "ProductSet": { "dataSource": "mainService", "path": "/ProductSet?$expand=ToSalesOrderLineItems" } } } 

4. Save and close the file

Add code to Synchronize data

In this step, we will add a button to the Master view and a javascript code to the button press event to synchronize data to and from back end to offline store on the device

  1. Go to Workspace, select OfflineApp/webapp/view/Master.view.xml
  2. Right click on Master.view.xml, choose Open With/Layout Editor
  3. Now we can view the file in Layout Editor. Drag the Button and drop to bottom panel of our app.

butt1.png

4. Select the button on the bottom panel that we just added. On the right-hand side canvas, we will see a Properties/Button setting panel. Delete values in Text and Width properties, add sap-icon://refresh to Icon property.

5. Now your bottom panel should look like this

butt2.png

6. On the right-hand side canvas, select Events setting. and Press, New Function

butt3.png

7. Enter onSyncData, click OK

butt4.png

8. Go to Workspace, open OfflineApp/webapp/controller/Master.controller.js file.

9. Replace empty onSyncData function with the following code

, onSyncData: function() { if (sap.hybrid && sap.hybrid.isApplicationOnline()) { this.getView().setBusy(true); sap.hybrid.synAppOfflineStore(jQuery.proxy(this._syncSuccess, this), jQuery.proxy(this._syncFailed, this)); } else { this._oODataModel.refresh(); } }, _syncSuccess: function() { sap.m.MessageToast.show("Data Synchronization succeeded", { duration: 3000 }); this.getView().setBusy(false); this._oODataModel.refresh(); }, _syncFailed: function() { sap.m.MessageToast.show("Data Synchronization failed", { duration: 3000 }); this.getView().setBusy(false); this._oODataModel.refresh(); } 

10. Save and Close both view and controller files

Create an application on SAP Cloud Platform mobile services

  1. Go to your CPms Administration page (https://hcpmsadmin-<your_trial_account>.dispatcher.hanatrial.ondemand.com). Replace the string “<your_trial_account>” with your HCP Trial Landscape account
  2. Select Mobile Applications, then Native/Hybrid. Click new button

cp1.png

3. In the New Application pop up dialog, fill up with the following values

cp2.png

4. Click Save button. This saves the application and go to Edit Application page

5. In editing application page. Select Connectivity

cp3.png

6. Click on new destination Icon to create new destination

cp4.png

7. In Create Destination popup dialog, choose Mobile Destination for Type, and com.sap.offlineapp for Destination Name

cp5.png

8. Click Next

9. Fill-up the values as below

10. Click Next

11. Choose Basic Authentication for SSO Mechanism

cp6.png

12. Click Next.

13. Fill in the User Name and Password for the backend account (SAP Gateway ES4 Demo System OData Service account).

14. Click Next and click Finish.

15. Go back to Edit Application page, and choose Security

cp7.png

16. Change Security Configuration to None, and then click Save

cp8.png

Configure Hybrid App Toolkit Local Add-on Settings

  1. Right click on OfflineApp, select Project Settings
  2. Choose Hybrid App Toolkit/ Hybrid App Configuration (Local Add-on)

h1.png

3. For Application section, enter the information as shown below. And for Build Options choose Release Mode. For Platforms, select Android

h2.png

4. For Plugins section, under Cordova tab, check Network Connection; under Kapsel tab, check Logon Manager, Logger and Offline OData

h3.png

h4.png

5. Click Save button

Now we are ready to deploy the app to mobile devices through Hybrid app toolkit

Deploy the app to mobile devices

In this step we are going to deploy the app to selected mobile device and run the application in offline mode

  1. Right-click on OfflineApp project and choose the menu option Run à Run On and choose your desired device/emulator
  2. Wait for the HAT local add-on to created Cordova Project, Build the application in desired platform, Install the App on device and launch the application on device
  3. On start-up, application will load the Logon Screen as below

r1.png

4. Enter your backend Username and Password and tap OK on Logon screen. If Logon is successful, you will see the Passcode screen.

5. Tap Disable Passcode button to load the application. It will show the loading screen as below. This is an indication that our application is an offline application

r3-1.png

6. After creating offline store, the application screen should be like below

r4.png

Testing the offline functionality of the app

To verify whether our app’s offline functions are working correctly, we can try the following steps

  1. Tap on HT-1000 row in master screen. This will navigate to detail screen.
  2. Click the Edit button on the detail page of item HT-1000.

r1-1.png

3. Change the Currency Code from EUR to SGD.

r2.jpg

4. Click Save button.

5. Now on the phone screen, we can see that the currency code of HT-1000 has been changed.

r2.png

6. Switch to WebIDE, and click run, to run our web app. We can see that the currency code of HT-1000 remains at EUR. This is because the changes we make on mobile app is only stored on local store and not yet updated in backend service.

7. Switch to the mobile app, and click the Synchronization button, wait for the synchronization completed successfully.

8. Switch to the web app that we are running, and refresh the page. We can see that after synchronization, the currency code is finally updated to SGD.

r3-2.png

Integrating SAP Screen Personas into the SAP Cloud Platform Portal | SAP Blogs

Source: https://blogs.sap.com/2017/07/03/integra…ud-platform-portal/#
Capture Date: 11.03.2018 15:08:06

There are numerous specific reasons for adding a link to an SAP Screen Personas flavor. In general, though, it’s done in order to streamline the user experience for your employees, customers, and partners who already access information, applications, and services in your organization via the SAP Cloud Platform Portal.

In fact, this is a common scenario for organizations who use the on-premise SAP NetWeaver Portal and who want to benefit from the simplification and other features that SAP Screen Personas brings to their screens (as one customer has done).

Obtain the URL to the flavor that will be added to the portal site.

Example:

http://<hostname>:<port>/sap/bc/personas?sap-client=<client>&sap-language=EN&sap-sec_session_created=X&~transaction=VA01&sap-personas-flavor=005056BB59E71DD213CD5BCB4D6450C6

Launch the Portal service from the SAP Cloud Platform Cockpit.

  1. In the Services tab, scroll down to the bottom to the “Portal” tile.Screen-Shot-2017-07-02-at-4.18.34-PM.png
  2. Click on Go to Service.Screen-Shot-2017-07-02-at-4.36.23-PM.png

Add the flavor URL to the SAP Cloud Platform Portal menu

  1. Click on “Site Directory”.Screen-Shot-2017-07-02-at-5.50.15-PM.png
  2. Hover over the tile of the site to which the flavor is to be added. Then click the “Edit” button.Screen-Shot-2017-07-02-at-6.12.34-PM.png
  3. Click on the menu editor button.Screen-Shot-2017-07-02-at-6.17.19-PM.png
  4. Hover over the first menu item in the list and the click the add button (the plus icon). Next, choose either option. (For this guide, I will choose sub-item.)Screen-Shot-2017-07-02-at-6.34.06-PM.png
  5. Enter the following information as below and then click the “Add” button:Screen-Shot-2017-07-02-at-7.16.49-PM.png
  6. Click the “Save” button.Screen-Shot-2017-07-02-at-7.24.52-PM.png
  7. Click the publish button.Screen-Shot-2017-07-02-at-7.24.52-PM-1.png
  8. Click the “Publish and Open” button.Screen-Shot-2017-07-02-at-7.34.50-PM.png

Test the Menu Item

  1. Once the portal has loaded, hover over the menu item under which the sub-item was placed and then click the menu item for the flavor.Screen-Shot-2017-07-02-at-7.29.30-PM.png
  2. Violà!Screen-Shot-2017-07-02-at-7.39.01-PM.png