Currently Being Moderated

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.

 

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

 

blog2.png

 

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

 

blog3.png

 

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

 

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

 

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

 

blog6.png

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

 

blog7.png

 

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

 

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

 

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

 

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

 

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

 

blog12.png

 

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

 

blog13.png

 

And here is how it should look in your preview :

 

blog14.pngblog15.pngblog16.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


Comments

Actions

Filter Blog

By author:
By date:
By tag: