Old New ABAP Editor | SAP Blogs

2018-03-112018-03-12 ~ Kerem Kayacan

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:

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:

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

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

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.

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

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.

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.

Line duplicate

Ctrl + D

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

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

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.

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

Code Hint Color

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

And sometimes it has inverted, dark background:

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 :

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:

MS Outlook:

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:

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:

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

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

Full feature list of New ABAP Editor in state of 2006

OSS Note 1159543 – Modules for reading sales prices

2018-03-112018-03-11 ~ Kerem Kayacan

1159543_E_20170929.pdf

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

2018-03-112018-03-16 ~ Kerem Kayacan

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

You need a valid account on the https://account.hanatrial.ondemand.com cloud platform and enabled the following services in Cloud Platform cockpit.

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

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

For Additional Properties fields click New Property and fill-up

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.

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
After entering SAP Web IDE, select Tools > Preferences or click on the Preference icon directly on the left bar

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

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.

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

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

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

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.

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

10. Select GWSAMPLE_BASIC service.

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”

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

14. Click Next.

15. Click Finish to create the new application.

16. Run the newly generated web application

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

Configure Offline Settings to the project

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

2. Switch to code editor view

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

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

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

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

7. Enter onSyncData, click OK

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

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
Select Mobile Applications, then Native/Hybrid. Click new button

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

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

5. In editing application page. Select Connectivity

6. Click on new destination Icon to create new destination

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

8. Click Next

9. Fill-up the values as below

10. Click Next

11. Choose Basic Authentication for SSO Mechanism

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

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

Configure Hybrid App Toolkit Local Add-on Settings

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

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

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

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

Right-click on OfflineApp project and choose the menu option Run à Run On and choose your desired device/emulator
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
On start-up, application will load the Logon Screen as below

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

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

Testing the offline functionality of the app

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

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

3. Change the Currency Code from EUR to SGD.

4. Click Save button.

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

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.

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

2018-03-112018-03-16 ~ Kerem Kayacan

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.

In the Services tab, scroll down to the bottom to the “Portal” tile.
Click on Go to Service.

Add the flavor URL to the SAP Cloud Platform Portal menu

Click on “Site Directory”.
Hover over the tile of the site to which the flavor is to be added. Then click the “Edit” button.
Click on the menu editor button.
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.)
Enter the following information as below and then click the “Add” button:
Click the “Save” button.
Click the publish button.
Click the “Publish and Open” button.

Test the Menu Item

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.
Violà!