Web App Designer & GUI App Designer


Use of App Designer and understanding of the SAP UI5 user interface framework.


The SAPUI5 user interface framework from SAP is a JavaScript library of user interface (UI) controls based on HTML 5. SAPUI5 is integrated into App Designer in such a way that almost all complexities of JavaScript and HTML development are taken care of by the App Designer framework while providing a typical SAP GUI like development environment for ABAP developers.

SAPUI5 is based on the Model View Controller design pattern and the Neptune server handles all communication between the application server and the client (desktop or mobile). All requests use performance optimized, native JSON for the exchange of data with the generated SAPUI5 user interface. The ‘AppCache’ enables ABAP developers to easily create offline-capable mobile applications without much effort.

Rapid implementation solution for HTML5 based UI’s

Neptune DXP - SAP Edition Cockpit → App Designer runs in the SAP GUI.

Similarity with Web Dynpro ABAP editor makes App Designer intuitive to use

Application syntax checks provide ‘ABAP like’ activation behavior.

Choose SAPUI5 (recommended) or jQuery Mobile as UI frameworks

User interface theming and styling with Cascading Style Sheets (CSS3).

Generates HTML5 and JavaScript application code behind the scenes

Insert shipped JavaScript code snippets for faster implementation progress (Code Snippets)

Ajax calls from the application client are handled in ABAP Objects methods

Build offline mobile applications with local storage using out-the-box ‘AppCache’

Connect to Adobe PhoneGap from NAM to get hybrid application builds.

Leverage existing competence

Uses ABAP Objects for implementation of backend application logic

Neptune DXP - SAP Edition is a SAP Certified add-on that is installed with transaction SAINT

Neptune is based on SAPs Internet Communication Framework (ICF) and thus benefits from its security, performance and scalability.

All prior investment in SAP role design is leveraged. Neptune application logic can perform authorization checks against existing user profiles. This is a substantial advantage over a decoupled mobile application development platform.

No extra servers required and no new operations competence needed

App Designer applications are deployed using the standard SAP ABAP Transport Management System. All existing Software Development Life cycle processes and procedures governing ABAP transport requests will apply to the transport of Neptune applications.

Stay in control of artefacts

Use the Neptune Cockpit →Development →Resources→Media Library to browse artefacts (icon, image, audio, video files etc.) that are related to your mobile or desktop applications. Read Media Library

Reduce complexity

Drag and drop user interface controls from the chosen SAPUI5 or jQuery Mobile JavaScript library onto the canvas. Easily bind public attributes of the SAP ABAP Objects class you assigned to your Neptune application to UI controls.

Getting Started

After installing the add-on, a developer needs to be assigned the ‘/NEPTUNE/DEVELOPER’ role by the SAP authorizations administrator. With this role, the developer will have relevant Neptune transactions in their user toolbar and also be allowed to execute them. From the user toolbar or using the corresponding transaction directly you can navigate the Cockpit and then to App Designer where you will compose the front-end of your applications.

How to do it

Execute the ‘/NEPTUNE/COCKPIT’ transaction or double click on ‘Neptune Cockpit’ from the Neptune user toolbar. From the initial toolbar of the Cockpit you can run App Designer and other components of the Cockpit.

From App Designer you can display or change an existing application or create a new one.

If you decide to create a new Neptune application provide its technical name in the ‘Application’ entry field then press the ‘Create’ button. You will be prompted for a SAP Package (and eventually for a transport request). Once you have entered an existing transport or created and specified a new one, you will proceed to the main designer workplace where the UI design for your application will take place.