Skip to Content

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

 
To report this post you need to login first.

47 Comments

You must be Logged on to comment or reply to a post.

  1. Steve Oldner

    Very good info!  I’ve been using BSP and hand-coding my webpages using JQ/mobile.  Neptune appears to have all of this as built-in library’s?

    This is basically a class that is called thru a SICF service?  I’ve got 2 projects I need to make web/mobile, so this might be a good answer.

    Thanks!

    (0) 
    1. Ralf-Juergen Triebel Post author

      Hi Steve, so far Neptune comes with jQuery Mobile, jQuery UI, Wijmo, MobiScroll and RGraph. All this frameworks are  covered by the neptune license. In August they will release a new build with SAPUI5 integrated. No oData, no JavaScript. You can also integrate every available framework yourself. I did that for myself with mansonry. isotope and other frameworks. You could store them in the MIME-Repository so they are included in the transports.

      And yes, it’s just a simple abapclass called via the neptune server which is a node in the ICF. No other layers or infrastructure. There should be a description on the neptune site. It’s very simple and rock-solid.

      (0) 
      1. Swetha Suryanarayanan

        Seems that neptune software is the only solution for developing sapui5 application in abap server? Is that so? Without BSP or neptune cant we develop and deploy internet application in ABAP server using SAPUI5 toolkit?

        Cant we add SAPUI5 plugin in ABAP server?

        (0) 
  2. Naga Prakash

    Hi Ralf,

    Great Work Ralf. I am looking this kind of solution for months. 🙂 🙂

    Is this software is officially released by SAP.Does we get support for this from SAP.

    Can we use this tool to design Mobile apps in SAP implementation projects.

    (0) 
    1. Ralf-Juergen Triebel Post author

      Hi Prakash! I forgot to mention, that it is a SAP certified Add-on. The support comes from neptune-software. They are SAP Partner. To use it in a productive environment you should get a neptune license. The trial is for free but shows ‘Trial Version’ on every page. Not sure if your customers would like that… 😆

      (0) 
      1. Naga Prakash

        Hi Ralf,

        I have installed and create a sample application explained above, but i am unalbe to see the html5 screen as yours in my system. I can see a basic html page with a white background

        Header

        my content

        Footer

        What could be the reason ?

        Thanks in advance

        (0) 
          1. Naga Prakash

            Yes Ralf, I selected jQuery Mobile Framework only.

            I am working in ECC 6.0 ;

                                 Release    Level

            SAP_BASIS     700        0009

            Can you please advise on this ?

            Thanks in advance

            (0) 
            1. Ralf-Juergen Triebel Post author

              Hi Prakash,

              so you can see the text but the background is white, right? Seems to me as if JavaScript isn’t working.

              Try the following:

              – Check if JavaScript is enabled in your browser.

              – Check it in a different browser, i’m always using Chrome (the console view is much better than Firebug)

              – Use the JavaScript console and check if there are any errors show up.

              Hope that helps

              (0) 
              1. Naga Prakash

                Hi Ralf,

                No luck, i have enabled Java Script in internet explorer but it is not working. I only get a text with white background only.

                Do we have any dependency on ECC version side or Internet Explorer version side ?

                Thanks,

                Naga

                (0) 
                1. Ralf-Juergen Triebel Post author

                  Hi,

                  is the ECC 6.0 a dual stack? Then check Njal’s comment from Jul 18th. On the other hand if you see the text from our elements the webserver is running. There seems to be a problem with the jQuery Mobile framework.

                  The dependencies regarding the browser you can check here: http://jquerymobile.com/gbs/. You should check with any other browser. If you are developing mobile applications you need to check your results in all common browsers anyway (at least Chrome, FF, Safari, IE).

                  And please check for JavaScript errors in the IE console: http://www.phpied.com/javascript-console-in-ie/. If there’s a problem with the jQuery framework you should get an error there.

                  (0) 
                  1. Ralf-Juergen Triebel Post author

                    Hi Jozef,

                    this tutorial is about jQuery Mobile. You can’t use the SAPUI5 themes for that. For jQuery Mobile you can select one of the ‘swatches’ as layout for almost every element indside the application.

                    Kind regards

                    Ralf-J.

                    (0) 
                    1. Jozef Vaclavek

                      Hi, Ralf, thanks for the reply.

                      I understand, that UI5 theme should not be used, unfortunately, I don’t know much about jQuery Mobile. I’m using NAD 2.1 (didn’t update yet). When I didn’t specify a theme at startup, my output looked like in Prakash’s case – basic HTML with white background. So I tried picking a theme from JQM – nativeDroid, which didn’t help. I looked through the elements in the designer and found out, that the boilerplate has no styling information (in other words, there was no change in Style tab for any object / element in the designer). So I tried picking a theme from SAPUI5 and it worked (now I have the same look as in your case). Now, when I disable the theme (don’t pick any), the output looks still the same (as in your case). So maybe something went wrong (bug?), or I and Prakash made the same mistake, which is more likely to happen 🙂 .

                      I suppose the boilerplate has some styling information with it, that is not accessible in the Style tab for the elements it brings. Otherwise I’m confused, why the background color is black and how to change it (I can for html element, but I can’t for header element).

                      (0) 
                      1. Ralf-Juergen Triebel Post author

                        jQuery Mobile always uses a swatch from the default theme. that’s why the boilerplate needs no specific layout. If you are using the Neptune Application Designer the field data-theme on the attribute tab is used to select another swatch for a specific item. If you set that on the page container it will be passed to all child objects. Please check http://jquerymobile.com/themeroller/index.php and http://jquerymobile.com/demos/1.2.0/docs/api/themes.html

                        Kind regards

                        Ralf-J.

                        (0) 
  3. Njål Stabell

    Great blog Ralf!

    I really appreciate you taking the time to explain (in detail) how to get started with the Neptune Designer. Your blog is better than our installation documentation!

    Oh.. And step 14 is great 🙂

    (0) 
  4. Sivaraman Thiru

    Hi Ralf ,

    Thanks for this blog…

    I have installed as per your steps.. atlast when I am trying to preview ..

    I am getting an error ‘404 – Not Found … Requested Resource does not exists. Is there anything I missed … Step 9 ..

    Any guidlines ..greatly appreciated ..

    Thanks for such a wonderful Article !!!

    Kind Regards

    Rama

    (0) 
    1. Ralf-Juergen Triebel Post author

      Hi Rama,

      check if the application is activated.

      Check the URL of the application in your browser. It should look like:

      <yourservername>:<port>/neptune/z_first_application_start.html?sap-sessioncmd=open&sap-client=001

      Try to substitute the servername with 127.0.0.1 and check also if the port is blocked by the firewall.

      Kind regards

      Ralf-J.

      (0) 
    2. Njål Stabell

      I had a webmeet with Siva and we figured out the issue…

      For others that face the same problem here are the steps to fix it:

               Transaction SMICM

                Goto -> Parameter -> Change

                Change is/HTTP/default_root_hdl to abap

                Save

                Restart ICM (Administration->ICM->Exit Soft->Local)

      (0) 
    1. Ralf-Juergen Triebel Post author

      Hi Jose,

      i’m using VMware Player on a PC with Intel Quad Core 2,40Ghz and 4GB RAM. Nothing special. The minisap is also running on VMware Player on a couple of common Laptops. I would not recommend to install the minisap directly, always use a VM. Otherwise you will never be able to remove it without leaving traces.

      Kind regards

      Ralf-J.

      (0) 
  5. reynald GIL

    HI Ralph,

    starting working today on this beautiful tool.

    Just a question : i followed your tuto but was unable to get debugger coming when i set an external session breakpoint in ~HANDLE_ON_SUBMIT method of my controller.

    Do you have an idea ?

    Thanks

    (0) 
    1. Ralf-Juergen Triebel Post author

      Hi reynald,

      call the SE80

      Select Utilies -> Settings from the menu

      Select the ABAP Editor TAB

      Select Debugging

      Check if the user (for the minisap it’s BCUSER) is filled in

      And use the normal external breakpoints, not the session breakpoints.

      Hope that helps

      (0) 
      1. Jozef Vaclavek

        Hi, for me, the breakpoint doesn’t work too. I tried session / external ones. I’ve got my user set in Editor ABAP / Debugging, checked “Break point active immediately”. Tried with classic debugger / new one. Working on SAP ECC 6.0 EH6.

        (0) 
        1. Ralf-Juergen Triebel Post author

          Hi Josef,

          i can’t help much. Could be an issue in your SAP System or the application doesn’t run through the code where the breakpoint is set. Try to set one inside the IF method HANDLE_ON_REQUEST and check if it works.

          Kind regards

          Ralf-J.

          (0) 
  6. Nooruddin Bohra

    Hi Ralf. Thanks for this great blog.

    As you suggested i tried to download the NAD trail version from website. I tried several times but i wasn’t able to download it completely. when i try to open the archive it says

    “Unexpected end of archive”.Please help me.

    (0) 
      1. Nooruddin Bohra

        Hi Ralf,

        after completion of step 12 i moved to step 13 and start the installation, but system prompts an error

        error in phase: CHECK_REQUIREMENTS

        reason for error:TP_CANNOT_CONNECT_SYSTEM

        error message:TP_INTERFACE_FAILURE

        please help me to solve this error.

        I am not using DDIC user, But I am using client 000. Is it required to use DDIC or I can work with any other user in the client 000.

        Thanks & Regards,

        Nooruddin Bohra

        (0) 
        1. Ralf-Juergen Triebel Post author

          Hi Nooruddin,

          what kind of SAP system are you using? For this blog I’ve used a minisap EHP 2. There you need to use DDIC in client 000 (as far as i recall).

          The problem with TP seems to be located in the settings of your SAP system. I’m no basis guy but maybe you should check the tp paramters in transaction STMS. There are also a lot of solutions  if you google ‘TP_CANNOT_CONNECT_SYSTEM‘.

          Sorry that I can’t help more.

          Kind regards

          Ralf-J.

          (0) 
        2. reynald GIL

          Hi,

          if you have installed 7.02 minisap recently you must configure TMS tool in order to be able to integrate NAD add-on with SAINT transaction.

          Without going into details i recommend to simply go to STMS transaction. Normally if it is a minisap and as you should not have several system in transport route, the configuration of TP tool should occured automatically.

          Just after you can go to SAINT again and relaunch NAD add-on integration.

          Kind Regards.

          Reynald

          (0) 
          1. Nooruddin Bohra

            Hi Reynald,

            The system I am using is not minisap. In transaction STMS, in System Overview the Green icon is indicating that the system is up to date.

            But still unable to resolve the problem. What should I do now?

            Kind Regards,

            Nooruddin

            (0) 
            1. reynald GIL

              Hi Noorudin,

              First, i think you probably have to test anyway if TP system is working even with green light.

              So maybe you can checkthis steps :

              First create a transport order (not empty) and try to release it and transport it.

              Second if step one is good perform again SAINT import because maybe you TP tool was down at the moment you try to perform import.

              Third you have to check if transport route are active : in the menu go to Overview->transport routes.

              Then you have to check RFC destination : in the menu go to Overview->RFC destination.

              The system will check if RFC destination are ok (even for the system you try to import NAD package)

              And last thing just perform an /nSU53 after you get the error message (if it still the case).

              Kind Regards.

              Reynald.

              PS : i don’t know why but i m not able to attach copy screen to this message.

              (0) 
  7. Johannes Behrndt

    Hi Ralf,

    thank for the great post. This makes it even easier for an old school ABAP developer to start building HTML5-apps.

    One thing that really interests me: how was your HTML5-knowledge when you started you first Neptune App? Though I already had some deeper HTML5-experince I’ve seen people with none at all starting with Neptune and getting quick results. So I usually say: when you can use the WebDynpro Designer you can also use Neptune to create an app!

    We also really like the Neptune Designer, as it is the easiest way to get quick and functional results with existing ABAP skills. Afterwards a webdsigner can do some “makeup” with a little CSS 🙂

    http://mission-mobile.de/2013/06/20/neptune-application-designer/

    Best Regards,

    Johannes

    (0) 
  8. msap sdn

    Hello,

      I’ve tried to install this Nepture designer on my minisap and there seems to be something missing.

      In the part “Let’s change the application” you mention the HTML5 library on the left side but that’s empty ?

    Any idea’s how this could be ?

    Regards

    (0) 
  9. Ali Hazari

    Hello Ralf,

    We are currently under SAP ECC 6 / EhP5. Does this software require any prerequisite  component such as for UI etc, or are there any other prerequisites we need to worry about from Basis perspective.

    Regards,

    Ali

    (0) 
  10. Parushram Katti

    Hi Ralf,

    I am new to SAP MOBILITY platform. I am interesting to liearn the SAP UI5 with NEPTUNE APPLICATION DEVELOPMENT TOOL. Could you please explain how to start and enter this areas.

    Regards,

    P ramu

    (0) 
  11. Parushram Katti

    Hi Midhun,

    I have one doubt is it (NAD) implemented any clients or there any requirements on this areas in MNC’s .

    Please tell me the job status in open market on this platform.

    Kindly Regards,

    Ramu K

    (0) 

Leave a Reply