Creating HTML5 Applications from scratch for ABAPers – Part 1

In this blog i want to show how easy it is for ABAPers to create a HTML5 application with just a little bit knowledge of HTML5. I’ve  got in touch with the Neptune Application Designer (NAD) about 1 year ago when i had to evaluate several mobility solutions for the tools of my former company.

I’ve spend a lot of time in checking frameworks and ended with doing it using HTML, JavaScript, SOAP and consumed SAP WebServices. What a mess!

One weekend i searched the WWW for any other possible solutions and found (no joke, at that time there was only one) one link to Neptune-Software.

Downloaded it, installed it and got a jQuery-Mobile application running in a couple of hours. I was completely overwhelmed by the simplicity of the solution and by the approach the guys choosed. No further infrastructure, everything inside the familiar ABAP development environment, using SAP transports and so on. What a relief!

In this blog i want to share my knowledge about the Neptune Application Designer and try to encourage ABAP developers to check it out as well.

For the examples in this blog i’m using a (MiniSAP) EHP 2 for SAP NetWeaver 7.0 (7.02) on Win7 Ultimate running in a VM. But the NAD should work on every ABAP Stack >= 7.0.

Download the Trial Version of the Neptune Application Designer and the Developer-Role here:

Neptune Software

Installing the Neptune Application Designer 2.0 (NAD) on a MiniSAP system:

Step 1: Extract the downloaded zip to a local folder on your desktop.

Step 2: Call transaction SAINT (Add-On Installation-Tool)

Step 3: Select: ‘Installation Package’ -> ‘Load Packages’ -> ‘From Front End’

Step 4: Navigate to the local folder with the NAD files

Setp 5: Select ‘NAD_INSTALL_200.SAR’ (Name might change with newer releases)

Step 6: You get a popup. Select ‘Decompress’

Step 7: Select Start

Step 8: On the next screen you should see this:

If you don’t see the file try to deactivate the filter. If it shows up then, you might be logged

in to the wrong client!

Otherwise select the file and press ‘Continue’.

Step 9: On the next screen press ‘Continue’.

Step 10: On the next screen press ‘Continue’.

Step 11: On the popup ‘Do you want to add Modification Adjustment Transports to the queue?’ select ‘No’,

Step 12: Insert the Installation-Password. In case of NAD 2.0 it’s ‘9E81CC52AD’. Hint: You can get the password from the file ‘NAD – Installation and Upgrade Guide.pdf’ which comes with the download.

Press ‘Enter’.

Step 13: On the next popup ‘The Add-On NEPTUNE rel.200_700 is being installed.’ press ‘Enter’.

Step 14: Go and get some coffee

Step 15: If the Add-on is succesfully imported, press ‘Finish’.

Step 16: Logout with DDIC from client 000 and login with your user to client 001.

Step 17: Call transaction SICF to activate the node for the NAD. On the first screen

press ‘Execute’.   In the next screen expand the node ‘default_host’. Select the node ‘neptune’ and choose ‘Activate Service’ from the context menu. On the popup press ‘Yes’.

Hint: If you don’t want to insert user and password any time you are using the preview on your application, doubleclick on the node ‘neptune’ and enter your user and password on the tab ‘Logon Data’. You should do this only on development systems. Make sure that it’s your development user (e.g. BCUSER) otherwise you would get problems with the debugging.

Step 18: Now we need to add a mime type for the cache. Go to transaction SM30.

Enter table’SDOKMIME_C’ and press ‘Maintain’. In the next view press ‘New Entries’. Enter ‘appcache’ to File name extension and ‘text/cache-manifest’ to MIME type. Save the entry.

Step 19: In a last step we assign the Neptune Developer Role to your user. Call PFCG. Select ‘Role’ and ‘Upload’. On the popup select ‘Enter’. Select the folder where you have stored the file und upload it. Call transaction SU01 and insert your development user. Select’Change’. On the TAB ‘Roles’ insert ‘/NEPTUNE/DEVELOPER’ as role and press ‘Enter’. Save it. Log out. After logging in again you should find a user menu like this:

Now let’s start with our first moble application:

Step 1: Go to SE80 and create a abap class. You can do that as local object or inside one of your packages. Name it e.g. ‘Z_TEST_CONTROLLER’

Step 2: Select the class and change to the TAB ‘Interfaces’. Insert the interface ‘/NEPTUNE/IF_NAD_SERVER’. Save your class.

Your class should now look like this:

Note the new interface methods!

Step 3: Doubleclick on the methods ‘HANDLE_ON_REQUEST’ and ‘HANDLE_ON_SUBMIT’ to create the implementations. (For later: Have in mind that you need to activate at least one of the methods, otherwise the application would not work)

Step 4: Activate your class. Change to the TAB ‘Attributes’. This is the place where we create our attributes to bind the fields of the view of our application later. You can use fields, structures, tables here. For now let’s create 2 attributes:

Name       Level                           Visibility     Associated Type

Value1     Instance Attribute        Public        STRING

Value2     Instance Attribute        Public        STRING

Activate your class again.

Create your application:

Step 1: Execute transaction /NEPTUNE/Designer from your user menu.

Step 2: Name the Application e.g. ‘Z_FIRST_APPLICATION_START’ and press ‘Create’.

Step 3: Inside the designer choose the TAB ‘Application’. Fill in the name of your application class (e.g. Z_TEST_CONTROLLER) to the field ‘Application Class’.

Step 4: Select the TAB ‘Library’. Choose the option ‘jQuery Mobile’.

Step 5: Activate your application.

Step 6: Change to the TAB ‘Designer’. Select the node ‘HTML5 Document’ in the objects view.

Right click on your mouse and navigate to ‘Code Snippets’ ‘jQuery Mobile’ ‘Boilerplate’.

Step 7: Expand the node ‘HTML5 Dokument’ to see the new elements.

Step 8: Activate the application

Step 9: Click on ‘Preview’. Now you should see something like this:

Congratulations! You are now a professional SAP Mobile Developer 😉

Let’s change the application:

We want to add an input field and see the value on another page.

Expand the node ‘Content’ and delete the element ‘txtContent (context menu: Delete Object)’.

Now expand the node ‘HTML5’ -> ‘Element’ on the left side of the designer (Library).

Move the ‘Form’ element below the ‘Content’ element in the objects view. Select ‘Yes’ on the popup. This places the element as a subnode of the element ‘Content’.

Enter a name (e.g. formTest)  in the field ‘Name’ on the right side of the designer (Object view) and press ‘Enter’.

Your objects tree should look like this now:

Now expand the node ‘jQuery Mobile’ -> ‘Element’ in on the right side of the designer (Library view).

Move the element ‘Input’ below our form element. Name it (e.g. inputTest).

Now search for the field ‘Datasource’ on the right side of the designer. Click on the symbol ‘Bind data’ which is located right of the field.

In the popup you can see our attributes from the application class:

Add a submit button:

Select a button element from the jQuery Mobile Library and place it below the input field. Name it. Use the field ‘Label’ on the TAB ‘General’ on the right side of the designer to insert a label, e.g. ‘Submit’.

Fill the field Event ID on the right side with a value, e.g. SUBMIT_1. The Event ID is mandatory. We need it to identify inside our application class which element has triggered the event in the view. Select the ‘Attribute’ TAB and change the type of the button to ‘submit’.

Activate the application.

Go to SE80, select your application class and set a breakpoint at the end of the interface method ‘/NEPTUNE/IF_NAD_SERVER~HANDLE_ON_SUBMIT’.

Preview your application. After pressing the button ‘Submit’ the debugger should come up.

Click on the TAB ‘Locals’. Beside other parameters you should see your event ID:

Press ‘Continue’ or F8 inside the debugger and go to the application in your browser again.

Insert some text into the input field and press ‘Submit’. When you enter the debugger select the ‘Locals’ TAB again. Now doubleclick on the entry ‘ME’. This shows the attributes of the application class. Note that the field VALUE1 is filled with your text from the input field:

Important note: Have in mind that you always need a form to transfer data from the view to the application class. The values of fields outside the form are not transfered.

16. Let’s add a page to show our input in the browser now. For that we will simply copy our page and remove some elements. Search for ‘Copy Application’ in the toolbar of the designer:

Copy the application to application ‘Z_FIRST_APPLICATION_SHOW’.

Use ‘BACK’ (F3) on the designer and select the application Z_FIRST_APPLICATION_SHOW.

Press ‘Change’.

Inside the designer rename the element ‘Page’ in the object tree to ‘Page2’.

Select the input field ‘inputTest’ and move it right below the element ‘Content’.

Select the element ‘formTest’ and select ‘Delete object’ from the context menu.

Activate the application and go back to the other application ‘Z_FIRST_APPLICATION_START’.

Open the tree and select the form element ‘formTest’. On the right side you should see the field labeled ‘Nav. to App’. Here we can decide to which application should be navigated after the submit is committed. Use the F4 help on that field and select the application ‘Z_FIRST_APPLICATION_SHOW’.

Activate your application. Select preview. Due to the breakpoint the debugger will come up. Just continue. Now you should see your second application page showing the value from your first page because both input fields are bound to the same attribute of our application class.

Congratulations! You have build your first little mobile application. You are now a professional SAP Mobile Senior Developer 😉

Now you can play around with it. If you need help, just .use the object help button to get help from the neptune site.

http://neptune-software.com/resources/documentation/

I hope you had fun with this and everything went well. When I created the minisap for this blog i had a lot of troubles with the minisap system itself. There are still a lot of wrong informations delivered with the SAP documentation (regarding to the license and so on). That’s a real great experience if you are new to SAP and just want to try out some ABAP. Was there any MiniSAP ever running right out of the box?

The installation of the Neptune Add-on was then finished in 20 minutes.

However: This a great tool for everyone who wants to create HTML5 user-interfaces for mobility and desktop. Mainly if you are a ABAPer and have only very little knowledge of HTML, JavaScript and CSS. And have in mind: HTML5 isn’t only for Mobility. HTML5 is the technology for every kind of UI. Just put it into an iView and you have a Portal-Application. Call it with a transaction and you have a great GUI substitute. No limits!

There still are a lot of things to discover. In the next release of the NAD even SAPUI5 is implemented. Imagine: SAPUI5 without oData and JavaScript knowledge.

If i find the time i will continue this blog and show some tips and tricks using the different libraries.

Until then: Have fun! HTML5 rocks! Even on SAP 😆

Forgot to mention: The Neptune Application Designer is a SAP certified Add-on!

Check out also

Part II: Creating a User Lookup Application using the jQuery Mobile Framework

Part III: Creating a User Lookup Application using the SAPUI5 framework