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

Hello,

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. If you haven’t done it, please follow the tutorial on the link.

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. Please clone the project on Github (link) into your Web IDE, and make the adjustments (for destination).

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

Hope you’ve enjoyed it.

Edit: Watch it in action: link.

Regards.