Screen and Menu Painter PDF

SAP R/3 Document : ABAP/4 (Screen Painter & Menu Painter)
Created By : P. M. V. Subba Rao 1

In this document we will go through the process of creating and understanding
the feature of Screen Painter and Menu Painter.
Screens and Menus make up the graphical interface of an ABAP/ 4 application.
Screen Painter:
The ABAP/ 4 Development workbench provides special tool known as the
Screen Painter to design and maintain the screen and its elements.
Screen Painter is a tool that allows the user to creates GUI screens for the
transactions
A Screen is also known as a DynPro (Dynamic Program).
A Dynpro is a combination of a screen and the associated flow logic
The Screen Painter is available in two modes. Graphical and Alphanumeric
modes
To use the screen painter enter SE51
A Screen is made up of different elements like the pushbuttons, radio
buttons, checkboxes, labels etc.
Each of these elements are associated with :
attributes
Describe a screen. Screen attributes include things like a description, a
type, and position.
layout
Refers to the arrangement of elements on a screen.
field attributes
Describe an element. For example, a particular field accepts only character
input.
flow logic
Describes the relationship between a screen element and its underlying
application. Flow logic is a series of instructions.
Menu Painter :
Using the Menu Painter, you can design the interface components.
The Menu Painter components are as follows :
Status
Defines the combination of menu bars, menu lists, F-key settings, and
functions available to an interface. For example, an Editor application might
have two statuses: edit and view. In edit status, the cut function is available
and with the view status the cut function is unavailable.
Menu bars
Define functions available to the user. Where the functions appear depend on
the dialog. If the dialog is modal, the functions appear at the bottom of the
interface as a row of buttons. In the primary window, the functions can appear
both as a row of menus and as buttons in a tool bar.
Menu list
Lists the items in a specific menu. For example, an edit menu might contain
items like copy, cut, and replace.
F-key settings
Define keyboard keys associated with a particular interface function.
Functions
Define individual functions such as cut, copy, and replace.
Titles
Define window titles for an interface.
Follow the following procedure to go through the process of learning and
creating the concept of Screen Painter and Menu painter successfully. But it
does not mean that you cannot achieve the same results using another method.
You are free to use whichever method you feel comfortable with.
Go to your development class.
In our case, we have created a development class called ZSHR. We are going to
create our objects under this development class.
Place the cursor on the development class and click in on Create icon on the
application toolbar.
From the Pop up dialog box, select Program Objects
Click on the Enter icon.
From the popup box enter your program name. Follow the naming convention
SAPMZ<your i ni ti al s>. In our case, our program name is SAPMZSC1.
Click on the Create icon at the bottom of the screen.
You will get the following box, asking you if you want to create your program
with an TOP INCL. Program.
Keep the defaults as it is and click on the Continue icon.
The system will prompt you with the TOP INCL. Program name. The naming
convention that is followed is MZ<your i ni ti al >TOP.
Click on the Continue icon.
You are taken to the ABAP/ 4 program attributes screen
Since it is a module pool program
M will appear by default here.
Dont change it.
Enter a description for the program and Click on the Save icon to save the
attributes.
Click on Back icon to come back to your development class initial screen.
From the Program list, double click on the program you created.
Next let us associate a transaction code for our report.
To create Transaction Code, place the cursor on the program name and click in
the Create icon the toolbar.
From the pop dialog box that you get, click the radionbutton Transacti on and
enter a Four character transaction code in the adjacent field. And click on the
Create icon at the bottom of the screen.
For our example, we have create a Transaction Code by the name ZSHA.
Select the Transaction Type as Di al og Transacti on and click on the Continue
icon.
You will taken to the Create Dialog Transaction screen
Enter a meaningful description for the Transaction code (eg. Test Transaction
Code ), the program name (eg. SAPMZSC1) and the Starting Screen number (eg.
1000) of your dialog transaction
After entering the above inputs, click on the Save icon.
Click the Back icon.
Now should see the Transaction code created.
Now let us create the screens.
Select the program and click on the Create icon on the toolbar.
Click the Screen radionbutton and enter the screen number (eg. 1000).
Click on the Create icon at the bottom of the screen
You will taken to Screen Painter : Change Screen Attributes screen
Enter the following information :
1. Give an meaningful description
2. Specify the Screen Type (in our case Normal)
3. Next Screen number (if you have some more screens in your dialog
transaction)
After entering the above, click on Save and the then Generate icon on the
toolbar
Click on the Back icon.
The Screen that you created will be included in the objects list your program.
Now the next step is to create the GUI statuses for the screen(s).
Select your program and place the cursor on it.
Click the Create icon on the toolbar
From the Program Objects screen, click the GUI Status radiobutton, and enter a
GUI Status name in the adjacent field.
Click on the Create icon on the bottom of the screen.
In the pop up screen that you get, enter the meaningful GUI Status Short Text
and also select the Status Type
After the entering the short text, click on the Continue icon
Now you will get into Maintain Status (i.e. the Menu Painter) screen.
Scroll down to Freely Assigned Function Keys section.
Here you can assign functionality to some of the function / combination of
keys.
In our example we have assigned DISP Display, to Fucnction key F5.
After you assign a function to a function key, press the Enter key.
You can also assign an icon to your function keys, goto Extras Propose icons
For example, as you you can see from the above screen that the propose icon
for our function key is glasses.
Click on the Create Link button. The icon gets associated with our function key
DISP. The icon will be displayed next to the function key.
Similarly, you can add your functionality to the function keys. We will add more
later.
Once you define your function keys you can add them to the application toolbar
and Standard tool bar as per your requirement.
In our example we will add the functionality DISP to both the toolbars as also
to the Menu option.
You can
see the
icon here..
Now Scroll up the Standard Tool Bar and Application Tool bar to specify which
all options / functionality, you would like to form as part of your GUI status (in
our case GUI1000).
For our example, we have included DISP on the appliction toolbar.
Also we have included the function CANC to the application toolbar and
SAVE, BACK, EXIT, CANC and PRIN on the standard toolbar.
After each function code, press the Enter key.
Let us add the DISP functionality to the menu also.
Scroll up to the top of the screen.
Enter the title of the Menu ( eg. GUI1000 Menu Bar).
Enter the title for the Menu bar options. We have three Menu Bar options Flight
Data, Edit and Goto
To add the options to the Menus, double click on each one of them and enter
the function key codes that you want to be part of the menus.
In our example, we have included the function code DISP, that we created as
part on the Menu Flight Data.
After you have finished with the task of creating and assigning the function
codes, Save and Generate your entries.
Press the Back icon to come back to the Development class intial screen.
Now you should see the GUI Status that you created as part of the objects list
under your program.
Now let us create a GUI Title.
Select your program and click on the Create icon
Click on the radiobutton GUI Title and enter GUI Title code in the field adjacent
to it.
Click on the Create icon.
Enter a meaningful title and click on the Save icon on the screen.
You will be taken back to the development class initial screen.
The GUI Title object should be available as part of your objects list under your
program.
Now let us design the screen.
Select the screen number that you created and double click on it.
In our case double click on the screen number 1000.
Click on the Change icon on the application toolbar.
The screen will change to Change mode.
Now double click on MODULE STATUS_<SCREEN NUMBER> (eg. MODULE
STATUS_1000).
Note : Do not remove the comments at this point.
The system will prompt to create PBO modules STATUS_1000.
Click on Yes
The system will ask you for creating the PBO module
Do change the defaults.
You will get a warning box
Change the lines SET PF-STATUS 'xxxxxxxx' and SET TITLEBAR 'xxx', by
replacing the xxxxxxxxx and xxx with your corresponding GUI STATUS and
GUI TITLE. (In our example, GUI1000 and ZSH) respectively under MODULE
STATUS_1000 OUTPUT.
Also remove the comment mark * from these lines.
Check the syntax and then Save the code. You should not have any errors.
Click on the Back icon.
Now remove the comment from the line MODULE STATUS_<SCREEN
NUMBER> (eg. MODULE STATUS_1000)
Click on Save icon
Now click on Fullscreen button on the application toolbar to enter into the
Screen Painter Screen.
After you click the button, the screen painter will be launched.
If the screen is in the display mode, click on the Change icon to switch to
change mode.
You can now add the elements to your screen.
You can add elements such as Text Boxes, Push buttons, Radio buttons, fields
from the dictionary etc.
To add text boxes, push buttons, radio buttons etc., click on the corresponding
button on the icons panel on the left side of the screen and drag it on the
screen and in the Text Name are, you can enter the name for the object.
For example right now, we have included a Text Box and entered the text SAP
IDES INTERNATIONAL AIRLINES.
You can also add fields from the ABAP/ 4 Dictionary tables.
Click on the Dict/ Prog fields button on the toolbar
Enter a table name and select the fields from that table to be placed on your
screen.
These fields will be used to display the data from the table.
Press the Enter icon and then drag and place the fields on the screen.
We have taken the fields from the table SFLIGHT.
You can change the display attributes of each field.
For our purpose, only Airline Carrier and Flight Number are going to Input fields
and the other fields are going to used for Display purpose.
Right now all of them are in Input/ Output mode.
To change the display attribute of the field, select the field and click on the
Attribute button on the toolbar.
Click on the Program tab under attributes section and the uncheck the Input
field check box.
Now the field Flgt date becomes a display field.
After the setting is done, simply close the attributes window.
Repeat the process for remaining fields.
Now the screen would look like as below
Now Save and Generate your work so far.
Click on the Back icon to come out of the screen painter screen for the time
being.
Now you have add a special field called OK-CODE as part of your field list.
If you get back to the development class initial screen then double click on the
Screen number and then Change the screen to Change mode.
To add the special fields OK-CODE, click on the Field List button on the
application toolbar.
Enter the field OK-CODE at the end of the fields list.
Save and Generate the entry.
Click on the Back icon to come out of the Fields list screen.
You will come back to the development class screen.
Double-click on the Screen number.
If the screen is in Display mode then, change it to Change mode by clicking on
the Change icon on the toolbar.
Now double-click on MODULE USER_COMMAND_<SCREEN NUMBER> (eg.
MODULE USER_COMMAND_1000).
You will be prompted to create PAI modules USER_COMMAND_<SCREEN
NUMBER> (eg. USER_COMMAND_1000) for the screen.
Click on YES.
On the above screen, keep the defaults and click on the Continue icon.
You will get a Warning box.
You should get the a screen similar to the one below
You have to write your processing logic / code here now under MODULE
USER_COMMAND_<SCREEN NUMBER> INPUT (eg. MODULE
USER_COMMAND_1000 INPUT)
We will write the following code, we will retrieve one record at a time for a given
input of Flight Connection Id and Flight Number.
Case OK-CODE.
WHEN DISP.
CLEAR OK-CODE.
SELECT SINGLE * FROM SPFLI WHERE CARRID =SPFLI-CARRID
AND CONNID =SPFLI-CONNID.
WHEN SPACE.
WHEN OTHERS.
CLEAR OK-CODE.
SET SCREEN 0.
LEAVE SCREEN.
EndCase.
After you finish writing the code, do a syntax check on it.
You will get some error message since you have not completed the data
declaration part.
You have to do the Data Declaration in the TOP INCLUDE part.
You will get such error message because you
have completed the task of Data Declarations.
Double click on the OK-CODE in your code.
Click on YES.
Click on the Global Data Field since OK-CODE is a global field.
Similarly if you want to declare tables, internal tables etc., then click on the
respective radiobuttons.
Select the appropriate radiobutton and click on the Continue icon.
And to do the Data Declarations.
Save your changes.
Click the Back icon to come back to the Edit Program screen.
Now once again Save and do a Check on your program. Do this process till you
remove all the errors.
After you have removed all the errors,, Save the code.
Click on the Back icon to come out.
Now remove the comment on the line MODULE USER_COMMAND_<Screen
Number 1000 (eg. MODULE USER_COMMAND_1000).
Save and Generate your program now.
Click Back icon to come back to the development class initial screen..
Now let us test the program.
Select your program and click on the Test/ Execute icon.
Select the Direct (the defalut) radiobutton and click on the Continue icon
Now you get the screen that you designed with the fields which you had
included in the screen.
You also check the Application Toolbar where you will find only the icon which
you had associated with your function code DISP. You have only one icon there
because you had entered only one entry in the Application Toolbar area of your
GUI STATUS.
Also check the Menu Bars and the Window Title (i.e. the GUI Title).
Now let us enter some data and check.
Let us enter for example, Airline Carrier =SQ and Flight Number =026 and
see if the code that we wrote works.
After entering the inputs, click on the Display icon on the application toolbar or
select Display from the Flight Data menu
If everything is okay then the data for the other fields will be retrieved from the
table and displayed.
THIS IS WAS A SIMPLE USE OF THE SCREEN PAINTER AND MENU PAINTER.
In the following sections we will make some enhancements to the screen and
menu that we created by adding some other objects on the screen.
Click on the

Screen and Menu Painter PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Screen and Menu Painter PDF

Uploaded by

Copyright:

Available Formats

SAP R/3 Document : ABAP/4 (Screen Painter & Menu Painter)

Created By : P. M. V. Subba Rao 1

You might also like