Image in Selection Screen
____________________________________________________________________________________
Author: Jogeswara Rao Kavala
Purpose:
To decorate the selection screen of a development with meaningful pictures.
Idea Background:
Often there is a lot of blank space left out in the selection screens of report programs. And these reports are more often Function specific or End-user category specific.
Hence, a thought to identify the program at the first glance itself with the respective function, gave rise to this idea. If we provide pleasant images related these respective functions in Selection screens, they will look good and reduce the boredom from the monotonous screens.
Also we can have relevant captions / slogans on these pictures.
Here are few such screens.
Sounds useful? and want to have screens like this?
Here is how
This is done using the Docking Container either at the right or bottom of the screen.
1. Upload the image
Let's suppose the requirement is to have a picture in the Docking Container located at the bottom of the screen.
The approximate pixel size of the image required will be 1280 (W) X 370 (H) (in case of PC with 1366 X 768 resolution)
(The size is about 650 X 580 in case the Docking Container is on the right)
Have the image on the desktop, (.jpg extn will do).
T-code: SMW0
Execute
Click on Create: Give name of the object (say XYZ) and description
Click on icon Import
Select the image on Desktop and click Open.
Now the image is available in the system for use.
2. Coding in your Report Program
Data Declaration:
*&---------------------------------------------------------------------*
*Data declaration for Docking Container
*&---------------------------------------------------------------------*
DATA:
ok_code TYPE sy-ucomm,
r_dock_container TYPE REF TO cl_gui_docking_container,
r_dock_container1 TYPE REF TO cl_gui_docking_container,
htmlviewer TYPE REF TO cl_gui_html_viewer,
r_grid TYPE REF TO cl_gui_alv_grid,
picture_control_1 TYPE REF TO cl_gui_picture,
picture TYPE REF TO cl_gui_picture,
url(256) TYPE c.
DATA: repid LIKE sy-repid.
DATA: file_name LIKE sapb-sapfiles,
file_type LIKE bdn_con-mimetype.
At selection-screen output or Initialization
AT SELECTION-SCREEN OUTPUT.
* Create a Docking container and dock the control at right side of screen
CHECK r_dock_container IS INITIAL.
CREATE OBJECT r_dock_container
EXPORTING
repid = repid
dynnr = sy-dynnr
side = cl_gui_docking_container=>dock_at_bottom
extension = 215
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
lifetime_dynpro_dynpro_link = 5
OTHERS = 6.
IF sy-subrc <> 0.
MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
ENDIF.
*&---------------------------------------------------------------
*& Load the picture
*&---------------------------------------------------------------
repid = sy-repid.
IF htmlviewer IS INITIAL .
CREATE OBJECT picture_control_1
EXPORTING
parent = r_dock_container.
ENDIF.
CHECK sy-subrc = 0.
CALL METHOD picture_control_1->set_3d_border
EXPORTING
border = 0.
CALL FUNCTION 'DP_PUBLISH_WWW_URL'
EXPORTING
objid = 'XYZ'
lifetime = 'T'
IMPORTING
url = url
EXCEPTIONS
OTHERS = 1.
* Load the picture by using the url generated by the data provider.
IF sy-subrc = 0.
CALL METHOD picture_control_1->load_picture_from_url_async
EXPORTING
url = url.
ENDIF.
See the highlighted parts, in the code above,
The first one namely 'bottom' refers to the position of the Docking Container. (For position on right, this would be dock_at_right)
The second one '215' refers to the Docking Container window extension, with reference to 0 at the bottom.
The third one 'XYZ' shows the picture Id we have just uploaded.
Now your selection screen is decorated with a picture.
Note:
The picture resolution varies as per the Desktop / PDA resolution.
So, it is advisable to try this on a machine which matches with the resolution of maximum number of machines in your area.
And also have a look at PCs with other resolutions, so that the selection fields are not covered by the Docking container.
The Docking Container is an adjustable window, so this can be dragged down or right as the case may be, to uncover selection fields, if at all this happens.
Jogeswara Rao K