“Appearance is as important as functionality”

Campfire

As explored in the previous chapter, we have a powerful function module that we can use for different scenarios. Now that we have discovered it, let’s build a campfire and tell some stories.

In this chapter:

Story 1: Changing the Popup Icon

I know this is a bedtime story for 0-3 age but let’s refresh our memories. We can change the popup icon displayed on the left. To do this, we simply specify an icon name starting with ICON_MESSAGE_ in the POPUP_TYPE parameter.

Code:

DATA answer.

DO 5 TIMES.
  DATA(popup_type) = SWITCH icon-name( sy-index
                       WHEN 1 THEN 'ICON_MESSAGE_INFORMATION'
                       WHEN 2 THEN 'ICON_MESSAGE_WARNING'
                       WHEN 3 THEN 'ICON_MESSAGE_ERROR'
                       WHEN 4 THEN 'ICON_MESSAGE_QUESTION'
                       WHEN 5 THEN 'ICON_MESSAGE_CRITICAL' ).

  CALL FUNCTION 'POPUP_TO_CONFIRM'
    EXPORTING
      text_question = popup_type
      popup_type    = popup_type
    IMPORTING
      answer        = answer
    EXCEPTIONS
      OTHERS        = 2.
ENDDO.

When we run the above code, the popup will be displayed a total of 5 times, each time with a different icon.

Output:

The appearance of different icons in the popup window

Most used icons:

• ICON_MESSAGE_INFORMATION
• ICON_MESSAGE_WARNING
• ICON_MESSAGE_ERROR
• ICON_MESSAGE_QUESTION
• ICON_MESSAGE_CRITICAL

You can find all icons starting with ICON_MESSAGE_ by displaying the ICON table or by running the SHOWICON program.

↑ Top

Story 2: Customize the Icons and Quick Info of Buttons

It is also possible to customize the icons of the first two buttons. I just wanted to include this here because sometimes it may be necessary to highlight a button with a striking icon.

Code:

DATA answer.

CALL FUNCTION 'POPUP_TO_CONFIRM'
  EXPORTING
    text_question         = 'What is Lorem ipsum?'
    text_button_1         = 'I know'
    icon_button_1         = 'ICON_OKAY'
    text_button_2         = 'No idea'
    icon_button_2         = 'ICON_DUMMY'
    popup_type            = 'ICON_MESSAGE_QUESTION'
    iv_quickinfo_button_1 = 'But I won''t say'
    iv_quickinfo_button_2 = 'Please tell me'
  IMPORTING
    answer                = answer
  EXCEPTIONS
    OTHERS                = 2.

Output:

Quick info appears when you hover the mouse over the first two buttons

Since the texts are set from text elements, we are unable to change the icon and texts of the last two buttons ‘Info’ and ‘Cancel’ (‘Info’ appears when a document object is used).

button_3 = 'Info'(201).
button_4 = 'Abbrechen'(200).

However, these texts will be displayed in the login language.

Conclusion

In this blog post, you have learned how to customize the appearance of the POPUP_TO_CONFIRM function by changing the left icon and the icons of the first two buttons. You’ve also learned to display a hint when users hover the mouse over these buttons.

These may be very simple details, but they are actually important for user-friendly development.

Next Step?

I know these stories are not for senior developers but may be helpful for beginners. But don’t miss the next part. We’ll dive quite deeper. I call it “Operation 48/57”.

Upcoming stories:

• Story 3: Splitting Long Text into 48-Character-Wide Sentences and Starting Them on New Lines
• Story 4: Splitting Long Text into 57-Character-Wide Sentences and Starting Them on New Lines

See you in the next chapter.

↑ Top

For more resource about ABAP Development, you can visit ABAP Development Topic Page, ask questions or follow blog post about ABAP Development here.

Please follow Serkan Saglam for future posts and feel free to share your feedback or thoughts in a comment.

Trademarks

• SAP®, ABAP® are the trademarks or registered trademarks of SAP SE or its affiliates in Germany and in other countries.

Disclaimer

All source code available in this blog post is provided “as is” without warranty of any kind, and any use of such source code is at your own risk.