Skip to Content
Technical Articles

SAPUI5 – sap.m.Wizard “FullStack” Tutorial

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.

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.