Creating a SAPUI5 WF app using only ABAP skills and Neptune Application Designer 2.1

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.

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

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

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

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

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.

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

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

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 sy–tabix,
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 = sy–tabix.

*   Filter by Task
case wa_wf_list–wi_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_menu–count_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.

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

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.

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

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

And here is how it should look in your preview :

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