SAPUI5 - sap.m.Wizard "FullStack" Tutorial

[jose_sequeira]

Hello,

There are some great Wizard tutorials on the WEB, but my goal here is to show a simple "FullStack" scenario (SAPUI5 -> Gateway -> ABAP) to demonstrate his possibilities.

The scenario here is a Wizard page that will list the current logged in (just like in SM04 transaction) users, for you to send a message to him (Popup).

Let's do it!

Let's start with the ABAP side:

Start by creating the following structure, that will "serve" us to create our Entity.



Now let's create 2 function modules, that we'll use in the Query and Update methods.

function zwiki_active_users.

*"----------------------------------------------------------------------

*"*"Interface local:

*"  TABLES

*"      T_USERS STRUCTURE  ZWIKI_USERS

*"      T_RETURN STRUCTURE  BAPIRET2 OPTIONAL

*"----------------------------------------------------------------------

  types: begin of ty_names,

           bname     type xubname,

           name_text type ad_namtext,

         end of ty_names.



  data:   lt_list   type table of usrinfo,

          lt_ulist  type table of uinfo,

          lt_names  type table of ty_names,

          ls_names  type ty_names,

          ls_list   type usrinfo,

          ls_users  type zwiki_users,

          ls_return type bapiret2.



  call function 'TH_USER_LIST'

    tables

      list          = lt_ulist

      usrlist       = lt_list

    exceptions

      auth_misssing = 1

      others        = 2.

  if sy-subrc eq 0.

    "Get the User Names...

    select usr21~bname adrp~name_text

      into table lt_names

      from usr21 join adrp on usr21~persnumber = adrp~persnumber and

                              adrp~date_from   = '00010101'      and

                              adrp~nation      = ''

      for all entries in lt_list

      where usr21~bname = lt_list-bname.

    if sy-subrc eq 0.

      loop at lt_names into ls_names.

        ls_users-uname    = ls_names-bname.

        ls_users-fullname = ls_names-name_text.

        append ls_users to t_users.

      endloop.

    endif.

  else.

    ls_return-type     = 'E'.

    ls_return-message  = 'You do not rule!'.

    append ls_return to t_return.

  endif.

endfunction.

function zwiki_send_message.

*"----------------------------------------------------------------------

*"*"Interface local:

*"  IMPORTING

*"     VALUE(I_USER) TYPE  ZWIKI_USERS

*"  TABLES

*"      T_RETURN STRUCTURE  BAPIRET2 OPTIONAL

*"----------------------------------------------------------------------

  data: ls_return type bapiret2.



  call function 'TH_POPUP'

    exporting

      client         = sy-mandt

      user           = i_user-uname

      message        = i_user-message

    exceptions

      user_not_found = 1

      others         = 2.

  if sy-subrc ne 0.

    ls_return-type     = 'E'.

    ls_return-message  = 'You do not rule!'.

    append ls_return to t_return.

  endif.

endfunction.

Now let's go to the Gateway side, create a project named ZWIKI_WIZARD, that will look like this on the end:



The Entity TUsers (based on the structure):



Now, Map the functions to the Query:



And Update methods, for the Entity.



Don't forget to configure your service at IWFND/MAINT_SERVICE.

-----------------------------------------------------------------------------------------------------------------------------

Going to WebIDE (SAPUI5 "side"):

After that, clone the project from the following GitHub repository: link

The layout of the main page:



Now let's test it!

Following the wizard, after selecting the user and entering the text, success message:



User got the Popup.



Check out the running video at: link

Now feel free to explore the tutorial, and add more functionalities to it! Use the Wizard at his full potencial ??????

Regards.