Neptune Getting Started Guide

GETTING STARTED GUIDE

2

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.

3

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

4

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

5

Components

6

Introduction

Overall architecture:

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

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

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

7

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.

8

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.

9

Exercise 1: Building a home page

1.1 Add transaction/neptune/designer in the SAP menu as a favorite As NAD is an ABAP add-on and is not a common z-program, 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.

1.2 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.

10

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.

11

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.

1.6 Activate the application and select preview (Desktop stateless) There are both stateless and stateful previews for different devices: Phone, tablet and desktop. Stateful cashes sessions in the server side memory

1 Jqm boilerplate er standard jquery mobile sideoppsett

12

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

13

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

14

jQuery Mobile

15

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.

16

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.

17

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.

18

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

19

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.

20

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”’

21

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).

22

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).

23

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”.

24

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.

25

3.8 Add # Start in the href attribute and add data-direction 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.

26

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.

27

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.

28

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.

29

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.

30

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.

31

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.

32

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 navtive-menu false and true. Test it on a tablet or smartphone as well.

33

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.

34

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.

35

6.3 Select IT_SPFLI as datasource binding.

6.4 Click select fields and then add some fields.

36

6.5 Add JQM attributes to the list: Data-divider-theme, data-filter, data-inset, data-role (listview) and data-theme

6.6

Preview and look at the results page

37

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.

38

6.9 In the attributes tab, chose submit as type, a data icon and a theme.

6.10 For the form element select the general tab. Select the result application you have created as action.

39

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.

40

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.

41

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.

42

7.3 Give the first header an attribute: class = ui-li-heading 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.

43

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.

44

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

45

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.

46

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.

47

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.

48

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.

49

7.16 Preview and see that it looks similar to the picture.

7.17 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.

50

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

51

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.)

52

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.

53

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.

54

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.

55

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.

56

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.

57

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.

58

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.

59

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/

60

jQuery Mobile - Form Gallery http://jquerymobile.com/demos/1.0/docs/forms/forms-all.html

61

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.

62

9.3 Add a DIV with data-role fieldcontain

9.4 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.

63

9.5 Add the following attributes in the application class:

IT_SBOOK Public Type TY_BOOKINGS GV_BOOKID Public Type S_BOOK_ID GV_SBOOK Public Type SBOOK GV_BOOK_HEADER Public Type STRING

9.6 Return to the Booking application and add the RADIOBUTTON code-snippet below divAirline.

64

9.7 Bind all input fields to the CV_SBOOK-CLASS

9.8 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.

65

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.

66

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.

67

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 type range of s_smoker,

ir_class type range of s_class,

ir_carrid type range of s_carrid.

data: wa_sbook type sbook,

lv_count type i,

lv_amount 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

68

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.

69

9.15 Add GET_SEL_SCREEN_DATA method and add the SERVER as a parameter. Add the following code: data: ir_class type range of s_class,

wa_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.

70

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.

71

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.

72

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.

73