Jerry has written several posts on the SAP ABAP development environment before:

  • The SAP IDE I used over the years
  • Don’t like SAP GUI? Try using Eclipse for ABAP development
  • Write and activate ABAP Code using Visual Studio Code

This article takes another look at syntax highlighting in an ABAP development environment.

As the saying goes, clothes make the man. Although we programmers wear uniform business clothes to work on weekdays:



Plaid umbrella for programmers:



Jerry’s wardrobe has no shortage of these:

Outside the chain picture archiving failure, the source station might be hotlinking prevention mechanism, proposed to directly upload picture preserved (img – wqdWWCGr – 1574928873302) (user-images.githubusercontent.com/5669954/697…)”

Fortunately, our development environment can be personalized, so everyone is wearing the same plaid shirt, but the development environment is different colors. For example, the Options option in SAPGUI provides ABAP developers with a wide variety of custom Settings for ABAP editor UI element styles, such as background color, keyword highlighting, comment highlighting, breakpoint highlighting, and so on.



After we click the Save button, these personalization Settings are saved locally somewhere. Take the ABAP editor for example. When writing code with it, how do syntax elements in ABAP language be highlighted according to different types?

In the SAPGUI Settings, go to Traces->Session Traces, and click the Enable button to turn on Traces in the ABAP Editor. Go back to the ABAP Editor and do whatever you need to do, such as add a note, a few Spaces, activate the code, etc.



Then open the generated trace file:

C:\Users<user name>\AppData\Local\SAP\SAP GUI\Traces\sapfewdll_01_0001_00_4272_2800.trc

Can see chunks of CStyleCache: : OnLinesChanged and CAbapFgLexer: : InternalLexer this c + + class method call.

  • Line 189: InvalidateLineStyle – Ready to redraw syntax highlighting on line 43883 of ABAP code
  • Lines 190 to 191: FindBeginOfStatement + FindEndOfStatement: Finds the start and end positions of the ABAP statement.
  • Line 193: Synchronous Syntactical Analysis Started – Starts syntactic analysis of the synchronous mode
  • Line 195: call the C++ implemented compiler method m_parser->run to parse the ABAP statement in 89 microseconds.
  • Line 196: End of analysis.
  • Line 197: according to the analysis of the compiler, call ISyncStyleCache: : SetStylesSync carries on the corresponding element syntax highlighting.

As you can see from the trace file, the syncing of the ABAP statement parsing and syntax highlighting will process the statement line by line. Normally, you will hardly notice any delay because there are fewer lines of ABAP code to edit.

When Jerry edited the ABAP git project locally, the report source code had nearly 50,000 lines, so when the modified code was activated, he felt a delay of several seconds. During these seconds, the compiler implemented by C++ in SAPGUI was busy with ABAP statement parsing and syntax highlighting. There will be no syntax highlighting in the ABAP editor until this is done:

Without the cache, ABAP Git syntax highlighting takes about four seconds on Jerry’s Thinkpad P50, assuming 89 microseconds per line parsing.



With SAPGUI out of the way, let’s take a look at other ABAP development environments. Although SAP WebIDE does not do ABAP development yet, in S/4HANA we can write Custom Logic in the browser using ABAP and support syntax highlighting.

How, you may ask, does ABAP syntax highlighting show up in a browser? Make your own food and clothing.

Let’s find out the answer to this question by debugging it with Jerry.

(1) Type the ABAP keyword in your browser, such as data. The discovery is highlighted. Using Chrome development tools, you can see that highlighting is implemented using a CSS class called ace_keyword.

Search Chrome dev tools with the keyword”.ace_keyword” : this CSS class is hard-coded in theme-ap-cumulus.js.

(2) Now you need to find the implementation of the editor in your browser that does the ABAP code editing. Enter “.xml “in the Chrome Developer Network TAB as a filter and find the Fiori implementation of the Editor: editor.view.xml

The specific editor is implemented in the ABAPWrapper tag of the namespace reuse.

Find the UI5 application that implements the ABAP editor based on this namespace, as shown below: nw_APs_ext_lib.



Open abapwrapper-dbg.js and set a breakpoint at line 68. This function is responsible for fetching the PAD file from the ABAP background, which is associated with syntax highlighting.

Refresh ABAP editor page, breakpoint triggered, in the debugger to observe the contents of the PAD file:

All ABAP keywords are listed in the PAD file so THAT UI5 knows which strings should be highlighted in the editor.



(3) The last question is, for example, when I type ABAP keyword “new”, which line of code does UI5 apply to add the corresponding CSS class to the DOM node corresponding to the string?

As shown below, once I have typed a character w, the string new needs to be highlighted as a keyword:

Once the character “w” is typed, onInput is fired as an event handler:



The function $renderLine is responsible for generating the corresponding HTML source code. The input character “new” is passed to the function getLineTokens to calculate whether the string is a keyword or a normal variable.

In the file acerndTokenizer.js, the ABAP parser parses “new” as a keyword as we expect, because the parser has a reference to the PAD file, so it knows which strings are keywords and which are ordinary variables.

(4) The DOM node source code is generated here. “ACE” and “keyword” are connected to generate the complete CSS class ace_keyword that we finally see in Chrome development tools.

And so the mystery was solved.

Other tools, such as Visual Studio Code, Sublime Text, etc., are not strictly considered ABAP development environments. They are only tools for viewing ABAP Code and implementing ABAP syntax highlighting.

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: