Skip to Content

The Neptune Application designer 2.1 is scheduled for release in August and one of the new features is support for SAPUI5.

I read this blog by John Moy discussing the challenges faced by current ABAP developer’s lack of javascript/css/Eclipse knowledge and the fear of the Web Dynpro for Java story repeating itself.

Our next release will certainly give those developers a tool that will enable them to participate in the development of SAP’s new UI framework.

EDIT: The Beta version including SAPUI5 is out you can read about it here:

Getting started with Neptune and SAPUI5 Mobile

If you want to package as an app and use the SMP Cloud you can read about SMP Cloud and Neptune here:

Using Neptune as a third-party development tool for the SMP Cloud Edition

Why the SAP Mobile Platform Cloud Edition will help mobilizing enterprises

How to set up Push Notifications with SMP Cloud and Neptune Software

(Push notifications are great for WF apps).

SAP Mobile Platform on HANA Cloud released!

I’ll guide you through the essential steps needed for creating a simple workflow app for leave requests. This should not take you long to complete and if you already have Neptune JQM apps in your system, porting to SAPUI5 is a breeze. Here is a screenshot of the menu page of the completed app in our new app preview – also included in the 2.1 release.

/wp-content/uploads/2013/06/blog1_235582.png

And here is a link to the app running on our ides system (I disabled approve and reject functionality as the inbox tends to be emptied pretty fast when exposed publically 🙂 )



First we will need to create the application in Neptune Application Designer (NAD):

/wp-content/uploads/2013/06/blog2_235596.png

Then add the SAPUI5 mobile library (Either use the onDemand version or install it locally on your system)

/wp-content/uploads/2013/06/blog3_235597.png

Go to the Designer tab and add an App element from the Layout folder of the SAPUI5 Mobile repository

/wp-content/uploads/2013/06/blog4_235598.png

Add the three pages we will need for this small app. A menu, a list of leave request workflows and a detail page for performing approval

/wp-content/uploads/2013/06/blog5_235599.png

Now it is time for some ABAP coding. I’ll not go through all the coding, but it should be pretty basic for most developers and you can get the code on request. Go to the class builder and create a class with the Neptune server interface.

/wp-content/uploads/2013/06/blog6_235600.png

Add some attributes that will be used for binding with the SAPUI5 models.

/wp-content/uploads/2013/06/blog7_235604.png

Lastly we will need methods for the ajax json requests in addition to the methods provided by the interface.

/wp-content/uploads/2013/06/blog8_235605.png

The important thing to understand from this blog is that the ABAP developer does not have to think about json format or how the SAPUI5 model works as the server takes care of that. He/she only need to fill structures and internal tables – so business as usual.

Here is an example of the code we used for getting inbox workflow items. You can easily increase this with other workflow items and add more tiles in the menu page for other approvals.

method GET_WORKFLOW_INBOX.

data: it_task_filter   type swrttask,
lv_tabix        
type sytabix,
it_objlist      
type standard table of sibflporb,
wa_objlist      
like line of it_objlist,
wa_task_filter  
like line of it_task_filter,
it_status_filter
type swrtstatus,
wa_status_filter
like line of it_status_filter.

*——————————————————————–*
* INIT
*——————————————————————–*
clear it_wf_leave.

*——————————————————————–*
* FILTER
*——————————————————————–*

* Absence
wa_task_filter
wi_rh_task = ‘TS21500003’.
append wa_task_filter to it_task_filter.

*——————————————————————–*
* GET DATA
*——————————————————————–*

* Get Workflow items to user
call function ‘SAP_WAPI_CREATE_WORKLIST’
exporting
read_task_text  
= ‘X’
im_task_filter  
= it_task_filter
im_status_filter
= it_status_filter
tables
worklist        
= it_wf_list.

* Build top list – Tasks
loop at it_wf_list into wa_wf_list.

lv_tabix = sytabix.

*   Filter by Task
case wa_wf_listwi_rh_task.

*     Absence
when ‘TS21500003’.
append wa_wf_list to it_wf_leave.

endcase.

modify it_wf_list from wa_wf_list index lv_tabix.

endloop.

* Sorting
sort it_wf_list by wi_cd descending.

* Counter
describe table it_wf_leave lines gv_menucount_leave.

endmethod.

When the application class is completed it is time for some SAPUI5 fun in the designer.

First we need to bind some data to the menu page by clicking the binding button of the Datasource field in the general tab of the page element.

/wp-content/uploads/2013/06/blog9_235606.png

Next we will fill the Menu page with content and cool features from SAPUI5 (Like pullToRefresh)

We will need a Tile as a menu option for entering the Leave request list. We added a new SAPUI5 binding feature – you will use {} “brackets” for direct binding from the data model (We have here bound the COUNT_LEAVE of our structure to show the number of items in the Leave Request inbox).

/wp-content/uploads/2013/06/blog10_235607.png

For icons SAP has done a great job of providing you with a bunch of them which you can have a look at here:

Icon – sap.ui.core

For navigation we will add a tiny javascript function updateLeave  (You can see it on the press event of the tile) for navigating to the pageListLeave, update the content there and hide the loading animation

function updateLeave() {

App.to(“pageListLeave”);

reloadListLeave();

updateLeaveList.hide();

}

Now we will drag/drop SAPUI5 elements to the other pages and bind them to the backend coding.

In the screenshot below you can see how we bound the data (the internal table IT_WF_LEAVE) from the ABAP coding to the list. The server takes care of the model for you, so if you are not a MVC expert it does not matter.

/wp-content/uploads/2013/06/blog11_235608.png

And then you can use the model of the list in the ListItem below using the data from the internal table and bind to the attributes you want

/wp-content/uploads/2013/06/blog12_235609.png

After you have completed the design part of the app it should look something like this:

/wp-content/uploads/2013/06/blog13_235610.png

And here is how it should look in your preview :

/wp-content/uploads/2013/06/blog14_235611.png/wp-content/uploads/2013/06/blog15_235612.png/wp-content/uploads/2013/06/blog16_235613.png

Hopefully, this will provide our gray haired ABAP’ers a means to create great UI’s for SAP solutions.

EDIT: here is a link with no phonewrapper so you can test in the browser of a mobile device to see the pull to refresh feature from SAPUI5


To report this post you need to login first.

20 Comments

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

  1. Uwe Fetzer

    We’ve seen Neptune Software at SAP Inside Track in Hamburg this year. Our question was: “Will SAPUI5 be implemented in the next realese?”. This question is now answered 🙂

    I’ll “Test-Drive” this software soon.

    (0) 
      1. Ralf-Juergen Triebel

        @ Njal: Excellent blog! It’s really great to have the ability to use SAPUI5 with drag&drop without any oData with the NAD.  I’m excited to show it on the SIT Manchester in September.  I saw the future in my SAP system! It’s powered by Neptune 😆

        (0) 
        1. Njål Stabell Post author

          We are working on fine tuning the first BETA release with SAPUI5 support… hopefully we will be able to deliver it tonight 🙂

          I’ll post a getting started blog once it is available.

          (0) 
  2. chandrasen guduru

    HI Stabell,

    I am an ABAPer, learning neptune now. Do you have any videos to learn creating sample applications to retrieve data from SAP tables and display using NAD?

    Thanks,
    Chandrasen

    (0) 
    1. Njål Stabell Post author

      Hi,

      Sorry for the late reply. Have been away for a week.

      We are producing training videos for the 2.1 version now. I will notify you when they are available.

      BR

      Njål

      (0) 
  3. Yogesh Patil

    Will this work in NAD 2.2? I don’t see some of the structures seen in this Blog   for example ZNAD_WF_MENU doesn’t exist.?  do I need import any transports. Please advise.

    (0) 

Leave a Reply