GETTING STARTED GUIDE

Getting started guide

Neptune Application Designer (NAD) is an HTML5 IDE residing as an

ABAP Add-on on any Netweaver ABAP SAP systems (ERP, CRM, BW,
SOLMAN, etc.) This guide aims make developers capable of
independently develop complete mobile solutions.

Table of Contents
Getting started guide .......................................................................................................................................1
Table of Contents .............................................................................................................................................3
Components .....................................................................................................................................................5
Introduction......................................................................................................................................................6
NAD SERVER .....................................................................................................................................................7
Overview of the NAD work area.......................................................................................................................8
Exercise 1: Building a home page .....................................................................................................................9
jQuery Mobile.................................................................................................................................................14
Exercise 2: Basic functionality of NAD ...........................................................................................................16
HTML5 ............................................................................................................................................................20
Exercise 3 using HTML5 library in NAD ..........................................................................................................21
Exercise 4: Create an application class ...........................................................................................................26
Exercise 5: Creating a form in the designer ...................................................................................................29
NAD Application Flow.....................................................................................................................................33

Exercise 6: Create a results page ....................................................................................................................34

Neptune Plugins .............................................................................................................................................40
Exercise 7: Dataloop .......................................................................................................................................41
Exercise 8: Show a details page ......................................................................................................................54
Neptune server API ........................................................................................................................................59
jQuery Mobile - Form Gallery .........................................................................................................................60
Exercise 9: Form Fields Show Bookings .......................................................................................................61

Components

Introduction
Overall architecture:

The solution consists of an application server and an application designer.

<server>:<port>/neptune/stateless/<application>
<server>:<port>/neptune/stateful/<application>
6

NAD SERVER

Neptune Application Server (NAS) handles

RESTful services) through the ICF framework
in SAP. The Neptune interface gets these
services(request and response) through the
OnSubmit, OnResponse and OnRequest
methods. From here you can customize the
individual application through a customer
class and have access to all SAP data and
functions of the system NAD is installed on.
Solutions that are created can be run online in the browser, offline in the browser or exported to
Phonegap for hybrid solutions.

Overview of the NAD work area

The work area is accessed through SAP GUI
and contains known functionality such as
activation, editing, version control, etc.
Navigating between the various functional
areas through tabs (application, components,
css, etc.) generic functions can be reached
through the drop-down menus (application,
resources, and preview) as well as in the
taskbar with icons for the change mode, open
the application, version check, new
application, etc.

Exercise 1: Building a home page

1.1

1.2

Add transaction/neptune/designer in the SAP menu

as a favorite
As NAD is an ABAP add-on and is not a common zprogram, the SAP GUI will not understand the
transaction (Because it starts with /n). optionally
create a Z transaction that is running the program if
you do not want to use favorite.

Start the designer and press the create application

button.
Neptune Software has attempted to keep the
functionality of the designer as identical to standard
SAP dialog functionality as possible so that the
solution will easily be adapted by SAP developers.

1.3

Give your application a name, description and title

before saving
Note that one can also select to save as a Code
Snippet (we'll review this later).

1.4

As the NAD is an ABAP tool you will now add the

application to a transport request
We believe there is a huge advantage using standard
SAP transport framework. It is both familiar to
developers and administrators.

10

1.5

Go to the components tab -> right-click HTML5

document > click code-snippets-> click jqm
boilerplate *1
Code-snippes can be created in the same way as
applications and is an excellent way to ensure quick
coding or identical theme/branding for the application.

Activate the application and select preview (Desktop

1.6 stateless)

There are both stateless and stateful previews for

different devices: Phone, tablet and desktop. Stateful
cashes sessions in the server side memory

Jqm boilerplate er standard jquery mobile sideoppsett

11

1.7

This is pure HTML5 not very impressive

Right click and select "view page source" to see the
html5 markup.

1.8

Go to the application tab and select the jQuery and

jQuery mobile plugins
Important: Use jQuery 1.6.4 an jquery mobile 1.0

12

1.9

Activate and preview as in step 1.6

This looks a bit better.

We will soon make more advanced applications. But first a
bit about jQuery mobile

13

jQuery Mobile

14

jQuery has long been one of the most popular javascript libraries for developing RIA Web pages.
Since jQuery primarily was designed for desktop browsers it doesn't have good support for
mobile web apps.
jQuery Mobile is a new project. It is a framework built on top of jQuery that handles the user
interface on all popular mobile devices.

For more information go to http://www.jquerymobile.com or use the resources dropdown menu

from within the NAD.

15

Exercise 2: Basic functionality of NAD

2.1

Open the application from exercise 1 and go to the

components. Expand the object tree and click on
txtHeading.
Look at the component area and the tabs to the right
of the tree. Here is information related to this specific
item.

2.2

Note that there is language support for html5

elements either through custom texts or via the
"data binding" to dictionary objects.
Since we have not yet built or connected to any ABAP
class, data binding will not work yet.

16

2.3

Click on the header element in the tree and select

the attributes tab the HTML5 attributes as well as
jquery mobile data attributes.
Notice that the header is selected for data-role in the
drop-down menu (highlighted in yellow).
Review the other elements and see that it is data-role
= "page", "content", "footer".
This is essential in jQuery mobile and provides a lot of
free functionality and styling.
Note that there are online help on many of these.

17

2.4

Return to txtHeading the item and select the style

tab.
Add a new font-family and font-size (e.g. 200px so
that we notice the difference) enable application
and select preview.
Note that this is only for styling of individual items
many times it pays to style on the class or id so that
you don't have to do the same thing every time

18

2.5

Click the header again, select the style tab and press
the custom button.
Add background: orange; Save and activate, then
preview.
The same custom functionality is also provided for
attributes.

2.6

This was not beautiful

Delete the last changes so that we can work on the
application later.

19

HTML5
HTML5 (HyperText Markup Language 5) is the fifth revision of the HTML standard, the standard
used to structure and present content on the WWW (World Wide Web). The HTML standard was
conceived in 1990 and the previous revision (HTML4) came in 1997. HTML5 is a standard that is
still under development. W3C (World Wide Web Consortium) are hoping for that specification to
be completed in 2014.
Nevertheless, the HTML5 started to become very widespread. This is possible because most of
the major browsers today support a lot of HTML5 and especially on mobile devices. In addition,
Adobe is moving towards HTML5 (they have now a jQuery mobile plugin for Dreamweaver) and
Microsoft supports no plugins (including its own Silverlight) in the new IE10 for windows 8, which
also has extensive HTML5 support. There was great debate among developers about flash vs.
HTML5 and Silverlight only a few months ago this debate no longer exist (with a few
exceptions).
The last and perhaps the main reason is that one can get almost equivalent native functionality
on most mobile OS by using HTML5. Write once, run anywhere

20

Exercise 3 using HTML5 library in NAD

3.1

Go back to the application and navigate to the

Folder List in the library tree.
Select an Unsorted List (UL), drag this over to the
content item in the object window and accept to
add it under this. Give it a name e.g. Menu.
Building of HTML5 documents is done by using the
drag/drop method. Look at the various HTML5
elements contained in the library. In addition to the
standard you can use Add Custom Code for custom
javascript/HTML5 markup.
There are also Plugins with custom functionality (we
will talk about these later).

21

3.2

Let's use a little JQM power.

Select the UL you've added and go to the attributes.
Add data-divide-theme, data-inset, data-role
(listview) and data-theme.
We will build a menu for our application.

3.3

Add a List Item (LI) under the UL.

Set data-role to list-divider and insert a HEADER (H3)
under this. Give your menu a name.
Preview if you want to look at the result (use stateless and
be sure to activate the code first).

22

3.4

Add a new LI under the previous (select "no thank

you" so that it remains at the same level).
Add a hyperlink (href) under this Label and write
Connections in the label field.
We are going to use the Flight database because it exists
in all SAP systems that have an ABAP stack.

3.5

Now we need to create a new page.

Collapse the page div and right click on it. Click the
code snippets and add a new Boilerplate.
Since the name of the page in our solution is the same as
the ID attribute, it must be unique in order for us to be
able to navigate. Give the first page DIV the name Start
and the other connections.

23

3.6

Select menuItem1 from the home page and add

#connections in the href attribute.
Preview and test the connections link (Tip: Test
different transition effects)
JQM uses # and id on the pages to load these in and
out of the DOM (Document Object Model).

3.7

Add a "back" href in the header on the connections

page.

24

3.8

Add # Start in the href attribute and add datadirection data-icon and data transition.
Test the solution and try out different icons.
We have now created a navigable application. Next we'll
review the posting of Forms but first we need some server
logic.

25

Exercise 4: Create an application class

4.1

We will now create an application class to handle

data to and from the server.
Go to transaction SE24 and give the class a name
e.g. zcl_kurs01. Press create.

4.2

Leave all the properties default and select a

transport.
Go to the interface tab and
add/NEPTUNE/IF_NAD_SERVER.

26

4.3

Activate the class and select the methods tab.

Make sure you have the three methods shown in
the picture.

4.4

Add internal table IT_SPFLI and global variable

GV_CARRID.
Set both as public and type them to SPFLI_TAB and
S_CARR_ID.

27

4.5

Go to the Methods tab. Add method SEARCH_CONN, set

it to private and click activate. Double-click the method
and add the following code:
select *
from spfli
into table it_spfli
where carrid eq gv_carrid.

4.6

In the HANDLE_ON_SUBMIT method add the following:

case event_id.
when 'SEARCH_CONN'.
call method search_conn( ).
endcase.
Activate the class. This is all the server coding that is
needed to access backend data from the application.

28

Exercise 5: Creating a form in the designer

5.1

Return to the designer.

Select your application and add the class you have
created in Application Class field in the application
tab.

5.2

Add a FORM element to the header in the

connections page.
Drag the content div into this one. Give the form a
name.
Any element that is located inside a form can be
accessed by the server when we submit.

29

5.3

Drag a div container under content and select

fieldcontain as data-role
Fieldcontain provides positioning of the items within.

5.4

Drag a data select from Plugins and add this under

Airline. Give it a name.

30

5.5

Press the button for datasource binding and select

GV_CARRID.
The application class is now available to the designer.
Now the server will also understand that the selected
id in this select is gv_carrid and can be used in the
search_conn method we created.

5.6

Add value table and field as well as the label field

SCARR CARRID CARRNAME
Value field is used by the server as id and the Label
field is displayed to the user.

31

5.7

Go to the attributes tab and set the data-native

menu to false.
Activate and run the preview.
Feel free to test the difference between navtivemenu false and true. Test it on a tablet or
smartphone as well.

32

NAD Application Flow

Flow with form submit
Using form submit, all data is available in the
Application class. The OnSubmit method is used to
retrieve data from the form, and perform the desired
tasks in SAP backend.

Flow with Anchor/href

No data is transferred to the next application.
Use the KEY fields for transfer of data.

33

Exercise 6: Create a results page

6.1

Press the "new application" button, and give it a

name: e.g. conResult
Add your application class in the application tab, as
well as jQuery and jQuery plugins mobile. (1.6.4 and
1.0)

6.2

Find the Data List plugin and move this over to the
content div.

34

6.3

6.4

Select IT_SPFLI as datasource binding.

Click select fields and then add some fields.

35

6.5

6.6

Add JQM attributes to the list: Data-divider-theme,

data-filter, data-inset, data-role (listview) and
data-theme

Preview and look at the results page

36

6.7

Go back to the first application.

Add a DIV and a Button.

6.8

Give the button a name and a label and add

SEARCH_CONN in the Event ID field.
This refers to the method that was created in the
application class.

37

6.9

6.10

In the attributes tab, chose submit as type, a data

icon and a theme.

For the form element select the general tab.

Select the result application you have created as
action.

38

6.11

Activate and test the application.

Try out different "airlines" and look at the results.

6.12

Add a back button in the conresult page so that

you can navigate back.
Type #connections in href field (this is the page id
of the previous page)
Congratulations you have now created your first
simple app.

39

Neptune Plugins
In the application you just created, already Data Select and Data
List plugins where used.
In the next task the Data Loop plugin, which is a very powerful
component, will be used. This makes it possible to loop on an
internal table and add all desired HTML5 elements for each row.

40

Exercise 7: Dataloop
7.1

Add a new menu item in the first application.

Right-click on the LI element of menuItem1 and paste
it in the same level

7.2

Give it a new name and change the href to #

connections2.
Add two headers in the href.

41

7.3

Give the first header an attribute: class = ui-liheading and the other ui-li-desc
Do the same with the first menu item. Add some
labels.

7.4

It should look something like this.

42

7.5

Copy the entire connections page and put it directly

below the previous one.
Give it a new name: connections2

7.6

Set the href to #connections2.

Preview and make sure the navigation works.
You can look at the url in the browser and see the
page-id that you are on.

43

7.7

Press the button class builder ". Edit the class and
go to the attributes tab. Add the following:
GV_CARRID2 - S_CARR_ID
IT_SPFLI2 - /NEPTUNE/SPFLI_TAB
WA_SPFLI2 - /NEPTUNE/SPFLI

7.8

Add method SEARCH_CONN2 and add the

parameter SERVER type ref to and associated type
/NEPTUNE/CL_NAD_SERVER

44

7.9

Add the following code to the method:

* Get CARRID from server cache
if gv_carrid2 is initial.
call method server->api_parameter_get
exporting
name
= 'Carrid2'
changing
value = gv_carrid2.
endif.
* Get data
select *
from spfli
into corresponding fields of table it_spfli2
where carrid eq gv_carrid2.
* Build key for every row - used by HREF to details
loop at it_spfli2 into wa_spfli2.
concatenate wa_spfli2-carrid
':'
wa_spfli2-connid
into wa_spfli2-key.
modify it_spfli2 from wa_spfli2 index sy-tabix.
endloop.

45

7.10

Open the application CONRESULT and select copy.

Copy this to CONRESULT2

7.11

Delete The List item that is located below the

content DI.

46

7.12

Drag a UL (Unsorted List) and put it in the

Content DIV.
Give this data-role listview, a list-divider-theme,
set inset to true and select a theme.

7.13

Add two List Item elements.

Give these role list-divider and add a header under
the first and give this a Label: eg. Connections2.

47

7.14

Right click on the second LI element and choose

code snippets-> JQM 4 Column Grid.
Add this item inside the LI.

7.15

Add a text element in each block.

Give these the following texts: ID, Depart. , Arriv.

48

7.16

7.17

Preview and see that it looks similar to the picture.

Finally, we'll add a data loop plugin.

Add this at the same level as the LI elements, and
choose IT_SPFLI2 as the data source.
Everything we add under this component will be
repeated for each row in the table.

49

7.18

Add a LI and a HREF (Hyperlink).

Bind the KEY field on the HREF element to the
IT_SPFLI2 KEY.
Now you understand why we built a new table
containing the KEY item in the customer class. As
there is no unique field in the original table.

7.19

Add a 4 grid code snippet UNDER href element.

Add one text item under each of these.
Bind the text to IT_SPFLI2 fields:
Carrid
Connid
Cityfrom
Cityto

50

7.20

Go to the application class and open the onSubmit

method. Add the following code:
when 'SEARCH_CONN2'.
call method search_conn2( server ).
if gv_carrid2 ne space.
* Set this when using href into the application
to save selected gv_carrid2
call method server->api_parameter_set
exporting
name
= 'Carrid2'
value = gv_carrid2.
endif.

7.21

Go back to the first application.

Change the Action in the form element to the
other menu item. (CONRESULT2 e.g.)

51

7.22

Change the Event ID of the menu item 2 to

SEARCH_CONN2

7.23

Set an external breakpoint and debug through the

search_conn2 method so that you can see how this
works.

52

7.24

The result should look like this.

We will now build a details page and use the key
field to retrieve details for a single connection.

53

Exercise 8: Show a details page

8.1

Go to the application class and Add the method

GET_DETAIL.

8.2

Add parameters SERVER and KEY Type Ref to

/NEPTUNE/CL_NAD_SERVER and Type STRING.

54

8.3

Add internal table IT_SFLIGHT in the attributes tab.

Type it FLIGHTTAB.

8.4

Create a new application (conDetail).

Add JQM and JQ plugins and add application class
ZCL_KURS01.

55

8.5

Add a JQM Boilerplate and a hyperlink in the

header for Back functionality.
Add Nav.to App Conresult2

8.6

Add a DATA LIST under content and bind this to

table IT_SFLIGHT.

56

8.7

Select some fields you want to view.

Add some data attributes: data-role = listview..
list-divider-theme etc.

8.9

Add the following code in the GET_DETAIL method, and

activate.
data: lv_carrid type string,
lv_connid type string.
split key at ':' into lv_carrid
lv_connid.
select *
from sflight
into table it_sflight
where carrid eq lv_carrid
and connid eq lv_connid.

57

8.10

Add the following to the onRequest method:

* Navigation to Detail page
if applid eq 'CONDETAIL'.
call method get_detail( key
= key
server = server ).
endif.
if applid eq 'CONRESULT2'.
call method search_conn2( server ).
endif.

8.11

Go to the start application and preview.

You will now be able to navigate to the details page.

58

Neptune server API

Neptune Application Server provides the developer with our own API for easy development
and access to data from the HTML5 Document.
This documentation will be updated for every new release for Neptune Application Designer.
http://neptune-software.com/products-3/docs-neptune-api/

59

jQuery Mobile - Form Gallery

http://jquerymobile.com/demos/1.0/docs/forms/forms-all.html

60

Exercise 9: Form Fields Show Bookings

9.1

Create a new application.

Name it NADBOOKING. And add JQN and JQ plugins.

9.2

Use a Boilerplate JQM and add back button in the

header with navigate to App: NADKURS.

61

9.3

9.4

Add a DIV with data-role fieldcontain

Add a DATA SELECT and choose SCARR, CARRID

and CARRNAME
Check the box Select Mulitple.
Set DATA_NATIVE_MENU to false in the attributes.
Preview and see that you can select multiple rows.
Note that you are not using Binding because here
you can choose multiple we need to use a
Neptune API on the server side to access the
selected data.

62

9.5

Add the following attributes in the application

class:
IT_SBOOK

Public
GV_BOOKID
Public
GV_SBOOK
Public
GV_BOOK_HEADER

9.6

Type
Type
Type
Public

TY_BOOKINGS
S_BOOK_ID
SBOOK
Type
STRING

Return to the Booking application and add the

RADIOBUTTON code-snippet below divAirline.

63

9.7

9.8

Bind all input fields to the CV_SBOOK-CLASS

Give the choices names: Firstclass, Businessclass

and Economyclass.
Set the default values to F, C and Y.
Note that the Input ID and Label ID must be the
same.

64

9.10

It should now look something like this.

Feel free to try different themes to change the
appearance of the page(s).

9.11

Add a new div and one Select element.

Give this the data-role slider.

65

9.12

Select two option elements.

Name these smoker_yes and smoker_no. Give
smoker_yes the option Value X.
Sure, this is an old data table

9.13

Add a new div and a button.

Set this to type = submit
We will now prepare the server.

66

9.14

Create a new method SEARCH_BOOK. Add the

server as a parameter and enter the following code
(make sure the KEY is matching the name you gave
in the Designer):
data: ir_smoker
ir_class
ir_carrid

type range of s_smoker,

type range of s_class,
type range of s_carrid.

data: wa_sbook
lv_count
lv_amount

type sbook,
type i,
type string.

* Get Smoker
call method server->api_selection_get_multiple
exporting
key
= 'Smoker'
changing
range = ir_smoker.
* Get Class
call method server->api_selection_get_multiple
exporting
key
= 'flightClass'
changing
range = ir_class.
* Get Carrid
call method server->api_selection_get_multiple
exporting
key
= 'selCarridBook'
changing
range = ir_carrid.
* Get Data - Max 1000 rows
select *
from sbook

67

into table it_sbook

up to 1000 rows
where carrid
in ir_carrid
and smoker
in ir_smoker
and class
in ir_class.
* Sorting
sort it_sbook by passname.
delete it_sbook where passname is initial.
* Make Description field
loop at it_sbook into wa_sbook.
lv_amount = wa_sbook-loccuram.
concatenate wa_sbook-carrid
'-'
lv_amount
into wa_sbook-passform separated by space.
modify it_sbook from wa_sbook index sy-tabix.
endloop.
* Header - to display number of passengers
describe table it_sbook lines lv_count.
gv_book_header = lv_count.
concatenate 'Passengers ('
gv_book_header
')'
into gv_book_header separated by space.

68

9.15

Add GET_SEL_SCREEN_DATA method and add

the SERVER as a parameter. Add the following
code:
data: ir_class
wa_class

type range of s_class,

like line of ir_class.

* Get Class
call method server->api_selection_get_multiple
exporting
key
= 'flightClass'
changing
range = ir_class.
read table ir_class into wa_class index 1.
gv_sbook-class = wa_class-low.

9.16

Add code to the Handle_on_submit and

Handle_on_request (Customize your applid,
method, etc.).
Handle_on_submit:
when 'SEARCH_BOOK'.
call method search_book( server ).
Handle_on_request:

* Get data to selection screen

if applid eq 'NADBOOKING'.
call method get_sel_screen_data( server ).
endif.

69

9.17

Create a results page (e.g. NADBOOKRESULT)

Build a UL with a Header LI and IT_SBOOK table in
a Dataloop.
Bind fields from this to the H3 elements under the
dataloop.

9.18

Bind the Header in the list to GV_BOOK_HEADER

Here we will show how you can use dynamic text
from the server side.

70

9.19

Add the content div in the booking application

under a form and select the result page as form
action.
Add SEARCH_BOOK as EVENT_ID on the submit
button.

9.20

Test the booking application.

The result should look something like after you set
up the attributes.
Now that we have more data check out the filter
feature of JQM lists. This is very fast, even on long
lists.

71

9.21

Go to the start page. Copy LI from menuItem2.

remove the HREF attribute. Instead use "nav to
application" and bind the booking application.
Change the Header and Desc.

9.22

Congratulations, you now have a working

application.

72

73