Web App Designer & GUI App Designer
Introduction
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’ feature enables ABAP developers to easily create offline-capable mobile applications without much effort.
Rapid implementation solution for HTML5 based UI’s
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 apps with local storage using out-the-box ‘AppCache’
Connect to Adobe PhoneGap from NAM to get hybrid app 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 menu and also be allowed to execute them. From the user menu 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 menu. From the initial menu 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.