How ABAP syntax highlight is implemented in "WebIDE" launched via browser

[JerryWang]

• How to debug by yourself to find the answer


• Further reading

In my blog Open your SAP GUI transaction in Fiori launchpad I have introduced the step how to launch tcode SE80 by Fiori launchpad and run it in the browser with the help of SAP ITS.

It's cool but not that cool because the syntax highlight is missing in ABAP editor opened there.

As I have mentioned in my blog S/4HANA for Customer Management 1.0 introduction from technical point of view now parts of service scenario in SAP CRM have been moved to S/4HANA. And I have found in the custom logic application whose detail is described in blog Key User Extensibility on SAP S/4HANA Cloud – Adding Custom Business Logic, the syntax highlight is supported there:

Then a question comes to my mind: how does the browser know which token(such as ABAP keyword) should be highlighted and which token not(such as normal variable). Again I managed to debug myself to find the answer.

How to debug by yourself to find the answer

1. type a keyword for example data, and it is highlighed with purple color.

The color is implemented by css class ace_keyword.

Search ".ace_keyword" via Chrome development tool and find it is hard coded in theme-sap-cumulus.js, instead of declared in any dedicated css file.

When the application is launched, the hard coded string contains lots of syntax color related css class is dynamically appended to document node by creating a new style node as demonstrated below.

2. Type ".xml" as filter in Chrome network tab, and the implementation for ABAP editor in the browser could be found: it is declared in Editor.view.xml, which acts as a container.

Scroll to the top of Editor.view.xml in order to figure out the value of reuse namespace: sap.nw.core.ext.lib.reuse.controls

then you can find the UI5 application which implements the ABAP editor: nw_aps_ext_lib.

You can find the complete implementation of this application in SAPGUI: it's really worth study if you are a frontend fan:

Open the file ABAPWrapper-dbg.js under the controls folder and set a breakpoint in line 68. This function call is responsible to fetch an important PAD file which is relevant for syntax highlight from backend server.

Refresh the application, breakpoint is triggered, you can save the response from backend server locally and open it via a text editor:

This is the header of PAD file which contains a list of ALL ABAP keywords and other language elements which are related to syntax highlight. This PAD file works as a kind of dictionary which guides the UI5 application to highlight each token in the source code with corresponding css class.

3. the last step is when, where and how a given css class is assigned.

Suppose I want to type a "w" character here and according to previous analysis, a css class "ace_keyword" will be assigned.

as soon as I typed "w", breakpoint is triggered, the current line in the editor, line 8( index starts from 0) is determined.

$renderLine is responsible to populate corresponding HTML source code. The string "new" is passed into getLineTokens to calculate its language type: keyword or variable?

In AceRndTokenizer.js, the ABAP parser successfully judges "new" as a keyword, as it holds the content of PAD file loaded from backend server.

4. The corresponding css class name ace_keyword is combined here and appended to a StringBuilder:

finally the innerHTML attribute of DOM element for "new" token in ABAP editor is filled by the value containing css class ace_keyword:

Mystery unveiled! The answer itself is not so important but the approach how to find the answer via debugging by yourself, and the more important idea, never stop to ask yourself "why and how", when you observe an interesting or a cool behavior in SAP application 🙂

Further reading

I have added this blog to my UI5 debugging experience sharing collection.

• Chrome development tool


• UI5 inspector


• Deal with “blank screen issue”


• UI5 field formatter


• Negative cache


• Control registration and deregistration


• Fiori flower animation


• Fiori Icon logic


• Find out the origin of suspicious HTTP roundtrips


• Date Picker


• Contact support button behavior


• Two types of popup Dialog in Fiori


• Fiori globalization – amount display truncation logic


• An example of Fiori Globalization implementation – the number format mystery


• HTTP 200 OK and HTTP 304 Not Modified


• An example of how to find back button implementation on Smart Template generated application


• FullScreenPageRoutes in Component.js


• An easy way to find location where Unique id of UI5 control is created


• More detail about Bootstrap script tag


• A small tip I learn from UI5 Diagnostics tool – a practice of AOP programming


• Another reason of empty screen issue and how I analyze the issue


• Why Adapt UI button is visible in some system but missing in some other system


• Open your SAP GUI transaction in Fiori launchpad


• Why sometimes my OData request is cancelled automatically


• How ABAP syntax highlight is implemented in “WebIDE” launched via browser


• LAST BUT NOT THE LEAST – Tutorial how I do self-study on a given Fiori control and UI5 framework cod...