SAPUI5 “FullStack” Tutorial: Fiori Client Barcode to Employee Data/Photo

In this tutorial i’m gonna show how to display the employee’s data/photo on a FIORI App, by reading a QR Code that contains his PERNR (Personnel number), showing all the way through.

To be able to complete this tutorial, your HR environment needs to have at least 1 employee with image configured.

So let’s go, i’m using myself (PERNR 1) with my photo uploaded.

Now that the Employee is ready, let’s go to the Gateway side.

Create a project named ZHR_PHOTO_DEMO, in the end will look like this:

Create 2 entities, Employee and EmployeeData (don’t forget to mark the first one as Media, like below):

For both of them, like this:

Let’s, map the EmployeeDataSet READ Method, to the BAPI_EMPLOYEE_GETDATA, like this:

Generate your project. The Data side is all set, now let’s work on getting the Employee’s photo.

Go to the DPC EXT method, like this:

Redefine method GET_STREAM (why? GET_STREAM is the Gateways “way” to recover entities marked as media, for attachments, etc.)

Place the code below and Active:

  method /iwbep/if_mgw_appl_srv_runtime~get_stream.

    data: t_photo        type table of tbl1024,

          t_msg          type table of bapiret2,

          s_photo        type tbl1024,

          s_msg          type bapiret2,

          lv_pernr(8)    type n,

          l_photo        type xstring,

          l_line         type string,

          l_photo1       type string,

          ls_key         type /iwbep/s_mgw_name_value_pair,

          ls_stream      type ty_s_media_resource,

          lv_entity_name type /iwbep/mgw_tech_name,

          lo_dp_facade   type ref to /iwbep/if_mgw_dp_facade,

          lv_destination type rfcdest.

    lv_entity_name = io_tech_request_context->get_entity_type_name( ).

* Get RFC destination

    lo_dp_facade = /iwbep/if_mgw_conv_srv_runtime~get_dp_facade( ).

    lv_destination = /iwbep/cl_sb_gen_dpc_rt_util=>get_rfc_destination( io_dp_facade = lo_dp_facade ).

    case lv_entity_name.

      when 'Employee'.

        read table it_key_tab into ls_key

        with key name = 'Perno'.

        if sy-subrc eq 0.

          lv_pernr = ls_key-value.

          call function 'PAD_PHOTO_UPDATE_GET_DETAIL' destination lv_destination

            exporting

              iv_employee_number  = lv_pernr

            tables

              t_photo_archive_out = t_photo

              t_messages_out      = t_msg.

          loop at t_photo into s_photo.

            l_line = s_photo-line.

            concatenate l_photo1 l_line into l_photo1.

          endloop.

          ls_stream-value     = l_photo = l_photo1.

          ls_stream-mime_type = 'image/jpeg'.

          copy_data_to_ref( exporting is_data = ls_stream

                            changing  cr_data = er_stream ).

        endif.

      when others.

    endcase.

  endmethod.

Now register your service at /IWFND/MAINT_SERVICE, and point it to your desired System Alias (Local for Embeeded and your backend’s for Hub).

So now the Gateway side is all set too, let’s test the services:

Below testing the Media EmployeeSet Entity (with the /$value in the end for media):

You could test the “Data” service as well, with (for this example): /sap/opu/odata/sap/ZHR_PHOTO_DEMO_SRV/EmployeeDataSet(‘0000001’)

Great, you’re now ready to go to the SAPUI5 part. 

In there, i’m using the sap.ndc.BarcodeScanner, that will open the Barcode (in your device camera) if you’re using the FIORI Client, or a popup if not.

I’ve created a simple QR Code (with the employee number 1) just to demonstrate.

Testing my scenario (running my app with FIORI Client):

Voila! Great.

Now you could explore all the other possibilities, as this was a real basic scenario (like get more employee data, files, etc. Sky is the limit! ).