Skip to Content
Author's profile photo David Carballido

How to create a RoadMap in GUI environment

Moderator note: this blog uses classes in the /USE/ namespace. If this namespace does not exist on your implementation, you cannot follow the examples in this blog.

Hi guys,

This is my first blog and I found an interesting subject one week ago about RoadMap but in GUI environment, normally Roadmap is used with Web Dynpros.

This is the code of my program


*---------------------------------------------------------------------*
* Description                                                                    *
*--------------------------------------------------------------------*
* Program      : YTEST_ROADMAP                               *
* Author          : David Carballido Córdova                   *
* Date             : 22/08/2013                                              *
* Comentarios   : Build and show Roadmap             *
*--------------------------------------------------------------------*
REPORT ytest_roadmap.
PARAMETERS: p_steps TYPE i OBLIGATORY.
*----------------------------------------------------------------------*
*       CLASS DEFINITION DEFERRED
*----------------------------------------------------------------------*
CLASS: lcl_main  DEFINITION DEFERRED,
        lcl_event DEFINITION DEFERRED.
*----------------------------------------------------------------------*
*       Global Variables
*----------------------------------------------------------------------*
DATA: go_main TYPE REF TO lcl_main,
       g_state TYPE /use/ugu1_state,
       g_text  TYPE char40.
*----------------------------------------------------------------------*
*       CLASS lcl_main DEFINITION
*----------------------------------------------------------------------*
CLASS lcl_main DEFINITION FINAL.
   PUBLIC SECTION.
     METHODS: start_road,
              state_click IMPORTING i_state_id TYPE /use/ugu1_state,
              next_step.
   PRIVATE SECTION.
     METHODS: init_roadmap.
     DATA: go_roadmap TYPE REF TO /use/cl_ugu1_html_roadmap,
           go_custom  TYPE REF TO cl_gui_custom_container,
           go_event   TYPE REF TO lcl_event.
ENDCLASS.                    "lcl_main DEFINITION
*----------------------------------------------------------------------*
*       CLASS lcl_event DEFINITION
*----------------------------------------------------------------------*
CLASS lcl_event DEFINITION FINAL.
   PUBLIC SECTION.
     METHODS: state_click FOR EVENT evt_state_click
                 OF /use/cl_ugu1_html_roadmap
                     IMPORTING i_state_id.
ENDCLASS.                    "lcl_event DEFINITION
*----------------------------------------------------------------------*
*       CLASS lcl_main IMPLEMENTATION
*----------------------------------------------------------------------*
CLASS lcl_main IMPLEMENTATION.
   METHOD start_road.
     IF go_custom IS INITIAL.
* Instance Container
       CREATE OBJECT go_custom
         EXPORTING
           container_name              = 'ROADMAP'
         EXCEPTIONS
           cntl_error                  = 1
           cntl_system_error           = 2
           create_error                = 3
           lifetime_error              = 4
           lifetime_dynpro_dynpro_link = 5.
       IF sy-subrc = 0.
* Instance Roadmap
         CREATE OBJECT go_roadmap
           EXPORTING
             i_parent            = go_custom
             i_application_event = abap_true
           EXCEPTIONS
             cntl_error          = 1.
         IF sy-subrc <> 0.
           EXIT.
         ENDIF.
* Instance Event Class
         CREATE OBJECT go_event.
         SET HANDLER go_event->state_click FOR go_roadmap.
*  Initializing Roadmap
         me->init_roadmap( ).
* Set  Width of Roadmap
         go_roadmap->set_state_width( i_width = '40' ).
* Generate HTML of Roadmap
         go_roadmap->render( EXCEPTIONS render_error = 1 ).
       ELSE.
         EXIT.
       ENDIF.
     ENDIF.
   ENDMETHOD.                    "start_road
   METHOD init_roadmap.
* Local Variables
     DATA: l_step TYPE numc2,
           l_text TYPE char30.
* Initializing States
     go_roadmap->remove_all_states( EXCEPTIONS remove_failure = 1 ).
     DO p_steps TIMES.
       l_step = sy-index.
       CONCATENATE 'Step' l_step INTO l_text SEPARATED BY space.
       go_roadmap->add_state(
         EXPORTING
           i_state_text   = l_text
           i_state_type   = /use/cl_ugu1_html_roadmap=>c_state_normal
           i_is_clickable = abap_true
           i_is_optional  = abap_false
         EXCEPTIONS
           add_failure    = 1 ).
     ENDDO.
* Activate first state
     IF g_state IS INITIAL.
       go_roadmap->set_state_type(
         EXPORTING
           i_state_id     = '1'
           i_state_type   = /use/cl_ugu1_html_roadmap=>c_state_active
         EXCEPTIONS
           invalid_state  = 1
           update_failure = 2 ).
* Send initial text
       g_text = go_roadmap->get_state_text( '1' ).
     ELSE.
       go_roadmap->set_state_type(
         EXPORTING
           i_state_id     = g_state
           i_state_type   = /use/cl_ugu1_html_roadmap=>c_state_active
         EXCEPTIONS
           invalid_state  = 1
           update_failure = 2 ).
     ENDIF.
   ENDMETHOD.                    "init_roadmap
   METHOD state_click.
     g_state = i_state_id.
* Get text of state
     g_text = go_roadmap->get_state_text( i_state_id ).
* Free Objects
     go_roadmap->free( ).
     go_custom->free( ).
* Clean Objects
     CLEAR: go_roadmap, go_custom.
* Simulate ENTER to refresh screen
     cl_gui_cfw=>set_new_ok_code( '/00' ).
   ENDMETHOD.                    "state_click
   METHOD next_step.
* Local Variables
     DATA: lt_states TYPE /use/ugu1_t_roadmap_state,
           l_state   TYPE /use/ugu1_state.
     FIELD-SYMBOLS: <fs_states> TYPE /use/ugu1_s_roadmap_state.
* Get active state
     go_roadmap->get_states_by_type(
       EXPORTING
         i_state_type = /use/cl_ugu1_html_roadmap=>c_state_active
       IMPORTING
         et_states = lt_states ).
     READ TABLE lt_states ASSIGNING <fs_states> INDEX 1.
     IF sy-subrc = 0.
       l_state = <fs_states>-state_id + 1.
* Get residue on parameter selected
       l_state = l_state MOD ( p_steps + 1 ).
       IF l_state = 0.
         l_state = 1.
       ENDIF.
* Set state click
       me->state_click( l_state ).
     ELSE.
       MESSAGE s888(sabapdocu) WITH 'No existe paso activo'.
     ENDIF.
   ENDMETHOD.                    "next_step
ENDCLASS.                    "lcl_main IMPLEMENTATION
*----------------------------------------------------------------------*
*       CLASS lcl_event IMPLEMENTATION
*----------------------------------------------------------------------*
CLASS lcl_event IMPLEMENTATION.
   METHOD state_click.
     go_main->state_click( i_state_id ).
   ENDMETHOD.                    "state_click
ENDCLASS.                    "lcl_event IMPLEMENTATION
*----------------------------------------------------------------------*
*       S T A R T  -  O F  -  S E L E C T I O N
*----------------------------------------------------------------------*
START-OF-SELECTION.
* Instance Main Class
   CREATE OBJECT go_main.
* Show Roadmap
   CALL SCREEN 100.
*&---------------------------------------------------------------------*
*&      Module  STATUS  OUTPUT
*&---------------------------------------------------------------------*
MODULE status OUTPUT.
   SET PF-STATUS 'ST_100'.
   SET TITLEBAR 'TIT_100'.
* Show Roadmap
   go_main->start_road( ).
ENDMODULE.                 " status  OUTPUT
*&---------------------------------------------------------------------*
*&      Module  user_command  INPUT
*&---------------------------------------------------------------------*
MODULE user_command INPUT.
   CASE sy-ucomm.
     WHEN 'BACK'.
       LEAVE TO SCREEN 0.
     WHEN 'NEXT'.
       go_main->next_step( ).
   ENDCASE.
ENDMODULE.                 " user_command  INPUT

Here I attach screen 100 to upload and generate

Dynpro_1.jpg

Dynpro_2.jpg

Then when you execute the program you can select how many steps are going to build, for example I’ll select 10

Dynpro_3.jpg

And this is the result

Dynpro_4.jpg

You can click on any step or press “Next Step” button to select the next step, I hope this help you in any development and I welcome your comments

PD: Sry for my bad english

Regards

David Carballido

Assigned Tags

      19 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Nice one!

      Congrats!!!

      Author's profile photo Kay Streubel
      Kay Streubel

      This looks nice! Which SAP release contains this class?

      Author's profile photo David Carballido
      David Carballido
      Blog Post Author

      It's EHP6 FOR SAP ERP 6.0 release 🙂

      Author's profile photo Former Member
      Former Member

      Good blog, Can you let me know the SAP ABA version in your system as I dont find the

        /use/ugu1_state in our system.

      Thanks, Raghavendra

      Author's profile photo David Carballido
      David Carballido
      Blog Post Author

      It's EHP6 FOR SAP ERP 6.0 release

      Author's profile photo Mauricio Cruz
      Mauricio Cruz

      Hello David!

      Personally I didn't know how to create this using ABAP. I'll try that out tomorrow and get back to you if something is not working.

      Thanks for sharing!

      Author's profile photo Former Member
      Former Member

      Good one.. 🙂

      Author's profile photo Former Member
      Former Member

      Hi,

      Thanks for sharing this.

      Please explain /use/ugu1_state ?, /use/cl_ugu1_html_roadmap ?

      Regards,

      Ravi Pratap Singh

      Author's profile photo Mauricio Cruz
      Mauricio Cruz

      Same problem here, don't have them in my system. Not sure what the namespace /USE/ is about.

      Author's profile photo David Carballido
      David Carballido
      Blog Post Author

      This class is used in EHP6 FOR SAP ERP 6.0 release, maybe you have a lower release and the package related to the objects (/use/cl_ugu1_html_roadmap, etc) have many tables, structures, domains, programs and classes and I dont know how to pass the code of each one 😐

      Author's profile photo Mauricio Cruz
      Mauricio Cruz

      Hello David,

      The component version you're looking at doesn't tell much about why we don't have the /USE/ namespace. I'm also at a system with "EHP6 FOR SAP ERP 6.0"... What you really need to look at are specific components, like "SAP_ABA", "SAP_HR", etc.

      You can open /USE/ class in SE24 and take a look at the package. Maybe it will give us a hint 🙂

      Author's profile photo Former Member
      Former Member

      Hi,

      I am also not getting /use/ugu1_state , /use/cl_ugu1_html_roadmap in my system as version is same as mentioned above.

      Is there any replacement for these classes.

      Thanks & Regards,

      Shrinivas

      Author's profile photo Former Member
      Former Member

      Nice one! 😎

      Author's profile photo Alvaro Tejada Galindo
      Alvaro Tejada Galindo

      Hey David! Long time no see 🙂 Great to read your first blog on SCN...really cool stuff 🙂

      Greetings,

      Blag.

      Developer Experience.

      Author's profile photo David Carballido
      David Carballido
      Blog Post Author

      Is great to know about you, I send you a kind regards !!!

      Author's profile photo David Hesse
      David Hesse

      Is there any way to realize the roadmap without the missing class?

      @ David: Can you help us to rebuild the necessary methods and logic for your very interessing roadmap-example?

      Thanks in advance,

      David

      Author's profile photo Carlos Huhn de Paiva Siqueira
      Carlos Huhn de Paiva Siqueira

      David,


      Excuse my comment , but I think this is a scam because there are no such classes anywhere in the world. for me is only to generate scores in your profile with blog.


      Can you give to us the prints of the class?

      Cya!


      Carlos Paiva

      Author's profile photo Matthew Billingham
      Matthew Billingham

      Moderator Message

      /USE/ is a genuine namespace. Classes such as  /use/cl_ugu1_html_roadmap do exist. But it depends what components you have installed.

      The /USE/ namespace belongs to an organisation called EPI-USE_LABS. If you have their software installed, then you will have these classes.

      This is no way an endorsement or recommendation for the product as I have no clue what it is for!

      Author's profile photo Sergio Fraga
      Sergio Fraga

      Hello,

      I just copied David code and paste it in my system and it works like a charm!!!

      There's only and error at line 152 due to some copy error:

      l_statel_state = l_state MOD ( p_steps + 1).

      Now, the /USE/ class is in the package:

      /USE/UGU1 - EPI-USE: Dev Lib - General GUI Utilities and Wrapers

      This package in one of the many packages delivered in /USE/ main package shipped by EPI-USE_LABS like Mathew has explained.

      Before pointing fingers and claim it's fake, understand the context of the development, which in this case is very specific and depends on the components you have in your system.

      Thanks a lot for this utillity David, and the funny thing is that I had a dev last month where I would imagine a nice scenario for a roadmap but didn't found any clue how to implement it in the GUI enviorement. Now I know how to do it!!

      That's why SCN is so nice!

      Regards

      Sérgio Fraga