Skip to Content

I was in the process of evaluating the best Mobile development platforms to build Mobile App that would expose SAP business functionalities. As an ABAP developer with over 8 plus years of experience, it would take little time for me to adapt any non-SAP technologies for this development.

So, I was evaluating the easy and effective ways, where any ABAP developer would be able to create Mobile Apps in no time. 

There are different approaches proposed by SAP to help the developers to build Mobile Apps. Among all, SAP Netweaver Gateway was my preference until I saw new NEPTUNE Software… 🙂

Though I’m a fan of SAP Gateway solutions, personally felt NEPTUNE Software was better because of following reasons,

  • The product can be installed on the existing SAP ABAP environment.
  • There is no third party integration required with SAP.
  • All the Security and Authorizations are handled as the applications are based on the ICF framework.
  • Existing SAP transport system can be used to move the developments across the landscape.
  • Gateway/OData Knowledge not required.

My blog/s will definitely help any ABAP developer to develop Mobile Applications with much ease. To start with, I have downloaded the following files from the site.

There is a BETA version available for the NEPTUNE software and it all come with just transport files that could be easily imported.

Neptune Application Designer 2.1 RC2 and Neptune Developer Role 2.1 RC2

Pre-requisite for Installation:

SAP Netweaver 7.0 and above.

Once you have successfully installed, you must be seeing the following transactions under the SAP Menu path.

/wp-content/uploads/2013/09/1_273109.png

Firstly, I don’t want to start building some complex developments and keep my friends in blank… 🙂

To Start with, I’m going to copy the existing sample Applications that were developed using Neptune Application Designer(NAD). These applications comes along with the transport files.

/wp-content/uploads/2013/09/2_273113.png

I was thinking of some SAP business scenarios that would match the developments similar to NAD application(NEPTUNE_FLIGHT). Also that would help explain the actual development.

At last, I decided to develop SAP HR Employee Self Service(ESS) Scenarios as an app. I have worked for some years in SAP HR area and could understand what the business user would expect out of Mobile Apps.

Moving forward, I have classified the following scenarios and each scenario will be covered in respective blogs.

  1. Building a home page.
  2. One level page navigation.
  3. Two level page navigation.

NAD Scenario

SAP HR Business  Scenario

Neptune’s in-built NAD Application used for Modelling

Custom NAD application created

Building a home page.

ESS home page 

NEPTUNE_FLIGHT

Z_HTML5_HOMEPAGE

One level page navigation.

Display Personal details of an employee

NEPTUNE_FLIGHT

NEPTUNE_FLIGHT02_LIST

Z_HTML5_HOMEPAGE

Z_HTML5_PERSONAL_DETAILS

Two level page navigation.

Display Address details of an employee

NEPTUNE_FLIGHT

NEPTUNE_FLIGHT02_LIST

NEPTUNE_FLIGHT02_DETAIL

Z_HTML5_HOMEPAGE

Z_HTML5_ADDRESS_LIST

Z_HTML5_ADDRESS_DETAILS

Let’s start the development now. This blog will explain you in building the ESS home page scenario only.

1. Start developing your NAD application Z_HTML5_HOMEPAGE using the transaction /Neptune/designer.

2. As mentioned in the above table, I will be copying the NAD application NEPTUNE_FLIGHT. Similarly Copy the Other Applications as I mentioned in the table(Ref: Neptune’s in-built NAD Application used for Modelling).

/wp-content/uploads/2013/09/3_273114.png

3. The NAD Application Z_HTML5_HOMEPAGE is created. I have disabled the Addons, Mobiscroll and Rgraph as it will not be used in the future sections.

/wp-content/uploads/2013/09/4_273115.png

4. Create the Class Z_ESS_HTML5_DEMO and include the interface /NEPTUNE/IF_NAD_SERVER and specify the class name in the settings section of the NAD.

/wp-content/uploads/2013/09/5_273116.png

/wp-content/uploads/2013/09/6_273117.png

5. Delete the graph section(part of third menu row), menu button and pop up section as I have highlighted.

/wp-content/uploads/2013/09/7_273118.png

6. In the Header Section, the home button navigation is marked to the home page application Z_HTML5_HOMEPAGE.

/wp-content/uploads/2013/09/8_273122.png

Also, in the Logo part of the Header Section, just added the Heading section to display the Employee Self Service text.

/wp-content/uploads/2013/09/9_273123.png

7. As we want to display the Personal detail and Address details, change the content section. Also change the title and description part as well.

/wp-content/uploads/2013/09/10_273124.png            

8. Similar to step 7, mention the Address link. Also change the title and description part as well.

/wp-content/uploads/2013/09/11_273125.png

9. Once the above changes are done, just activate the application and preview in Wrapper. Your Employee Self Service homepage is ready for use… 🙂

/wp-content/uploads/2013/09/12_273126.png               

To report this post you need to login first.

1 Comment

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

Leave a Reply