SAP UI5 Presentation for SUP Hybrid Application – Part 1

This is the first of a series of posts for using the new SAP UI5 JavaScript controls and framework for SUP applications. This series will start with “see what you can have” to the details of coding and deploying to the SUP server.
This will be using an MBO tied to the ‘Employee’ table in the sample database (sampledb) in SUP to help retain familiarity with the other SUP samples.

Sample Application Overview:

The application has the ability to:

  • List all employees, then get the details for any employee record.
  • Find and display a single employee record (using the MBO object query ‘findByPrimaryKey’).
  • Create a new employee record.
  • Delete any employee record.
  • Update an employee record.

List & Update Employees

This uses the MBO object query “employee_findAll” to retrieve the data from the server. This then displays select details in an overview list. The user can then tap a specific employee to open a more detailed view with the option to either delete or update the record.  These screen images are snapped from my Android emulator – running the SUP 2.2 Hybrid Web Container talking to my SUP server.

The list of all employee records.
The list shows only a few details of the full record.
Initial Employee List for a typical application.
Tapping an employee record brings up
the details in read-only mode.
Enter the employee update mode by tapping the Update button at the top of the screen.
The screen is then updated to be in read/write mode.
The image here has the “popover” field specific editor for the employee’s street address.
Similarly, specifying the employee’s sex is more clear. UI5_AndAppEmpUpdateSex

Create an Employee

Creating an employee uses a slightly different UI approach to further show the non-traditional formats which are available in UI5. The approach here is to use the UI5 “input list”, which allows direct editing in the list control itself.

This picture shows the record with some fields filled in.