3. Screen and Menu Painter.pdf

7/29/2019 3. Screen and Menu Painter.pdf

1/40

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 theScreen Painter to design and maintain the screen and its elements.

Screen Painter is a tool that allows the user to creates GUI screens for thetransactions

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 :attributesDescribe a screen. Screen attributes include things like a description, atype, and position.

layoutRefers to the arrangement of elements on a screen.field attributesDescribe an element. For example, a particular field accepts only characterinput.

flow logicDescribes the relationship between a screen element and its underlyingapplication. 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 :

StatusDefines the combination of menu bars, menu lists, F-key settings, andfunctions available to an interface. For example, an Editor application mighthave two statuses: edit and view. In edit status, the cut function is available

and with the view status the cut function is unavailable.


2/40



Menu bars

Define functions available to the user. Where the functions appear depend onthe dialog. If the dialog is modal, the functions appear at the bottom of theinterface as a row of buttons. In the primary window, the functions can appearboth as a row of menus and as buttons in a tool bar.

Menu listLists the items in a specific menu. For example, an edit menu might containitems like copy, cut, and replace.F-key settingsDefine keyboard keys associated with a particular interface function.

FunctionsDefine individual functions such as cut, copy, and replace.TitlesDefine window titles for an interface.


3/40



Follow the following procedure to go through the process of learning and

creating the concept of Screen Painter and Menu painter successfully. But itdoes 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 tocreate 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


4/40



Click on the Enter icon.

From the popup box enter your program name. Follow the naming conventionSAPMZ. In our case, our program name is SAPMZSC1.

Click on the Create iconat the bottom of the screen.

You will get the following box, asking you if you want to create your programwith an TOP INCL. Program.


5/40



Keep the defaults as it is and click on the Continue icon.

The system will prompt you with the TOP INCL. Program name. The namingconvention that is followed is MZTOP.

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.


6/40



Enter a description for the program and Click on the Save icon to save theattributes.

Click on Back iconto come back to your development class initial screen.

From the Programlist, 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 inthe Create iconthe toolbar.


7/40



From the pop dialog box that you get, click the radionbutton T r an sa c t i o n and

enter a Four character transaction code in the adjacent field. And click on theCreate iconat the bottom of the screen.

For our example, we have create a Transaction Code by the name ZSHA .

Select the Transaction Typeas D i a l o g T r a n s a ct i o n and click on the Continueicon.


8/40



You will taken to the Create Dialog Transactionscreen

Enter a meaningful description for the Transaction code (eg. Test TransactionCode ), 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.


9/40



Now let us create the screens.

Select the program and click on the Create iconon the toolbar.

Click the Screenradionbutton and enter the screen number (eg. 1000).

Click on the Create iconat the bottom of the screen

You will taken to Screen Painter : Change Screen Attributesscreen


10/40



Enter the following information :

1. Give an meaningful description2. 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 thetoolbar

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).


11/40



Select your program and place the cursor on it.

Click the Create icon on the toolbar

From the Program Objectsscreen, click the GUI Statusradiobutton, and enter a

GUI Status name in the adjacent field.

Click on the Create iconon 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


12/40



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 ofkeys.

In our example we have assigned DISP Display, to Fucnction key F5.

After you assign a function to a function key, press the En t e r k ey .

You can also assign an icon to your function keys, goto Extras Propose icons


13/40



For example, as you you can see from the above screen that the propose iconfor our function key is glasses.

Click on the Create Link button.The icon gets associated with our function keyDISP. The icon will be displayed next to the function key.

Similarly, you can add your functionality to the function keys. We will add morelater.

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 alsoto the Menu option.

You can

see the

icon here..


14/40



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 (inour case GUI1000).

For our example, we have included DISP on the appliction toolbar.

Also we have included the function CANC to the application toolbar andSAVE, BACK, EXIT, CANC and PRIN on the standard toolbar.

After each function code, press the Enter key.


15/40



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 FlightData, Edit and Goto


16/40



To add the options to the Menus, double click on each one of them and enterthe 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 aspart on the Menu Flight Data.

After you have finished with the task of creating and assigning the functioncodes, Save and Generateyour entries.

Press the Back iconto 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.


17/40



Now let us create a GUI Title.

Select your program and click on the Create icon

Click on the radiobutton GUI Titleand enter GUI Title code in the field adjacentto it.

Click on the Create icon.

Enter a meaningful title and click on the Save iconon the screen.


18/40



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 yourprogram.


19/40



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 iconon the application toolbar.

The screen will change to Change mode.


20/40



Now double click on MODULE STATUS_ (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


21/40



Do change the defaults.


You will get a warning box



22/40



Change the lines SET PF-STATUS 'xxxxxxxx' and SET TITLEBAR 'xxx', by

replacing the xxxxxxxxx and xxx with your corresponding GUI STATUS andGUI TITLE. (In our example, GUI1000 and ZSH) respectively under MODULESTATUS_1000 OUTPUT.

Also remove the comment mark * from these lines.

Check the syntax and then Savethe code. You should not have any errors.

Click on the Back icon.

Now remove the comment from the line MODULE STATUS_ (eg. MODULE STAT US_1 0 0 0 )

Click on Save icon


23/40



Now click on Fullscreen button on the application toolbar to enter into theScreen 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 tochange mode.

You can now add the elements to your screen.


24/40



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 correspondingbutton on the icons panel on the left side of the screen and drag it on the

screen and in the Text Nameare, you can enter the name for the object.

For example right now, we have included a Text Box and entered the text SAPIDES INTERNATIONAL AIRLINES.


25/40



You can also add fields from the ABAP/4 Dictionary tables.

Click on the Dict/Prog fieldsbutton 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.


26/40



Press the Enter iconand 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, onlyAirline Carrierand Flight Numberare 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.


27/40



To change the display attribute of the field, select the field and click on the

Attributebutton on the toolbar.

Click on the Program tab under attributes section and the uncheck the Inputfieldcheck box.

Now the field Flgt datebecomes a display field.

After the setting is done, simply close the attributes window.

Repeat the process for remaining fields.


28/40



Now the screen would look like as below

Now Saveand Generateyour work so far.

Click on the Back icon to come out of the screen painter screen for the timebeing.

Now you have add a special field called OK-CODE as part of your field list.


29/40



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 theapplication toolbar.

Enter the field OK-CODE at the end of the fields list.

Saveand Generatethe entry.

Click on the Back iconto come out of the Fields list screen.

You will come back to the development class screen.


30/40



Double-click on the Screen number.

If the screen is in Display mode then, change it to Change modeby clicking onthe Changeicon on the toolbar.

Now double-click on MODULE USER_COMMAND_ (eg.MODULE USER_COMMAND_1 0 0 0 ).

You will be prompted to create PAI modules USER_COMMAND_ (eg. USER_COMMAND_10 0 0 )for the screen.

Click on YES.


31/40



On the above screen, keep the defaults and click on the Continue icon.

You will get a Warningbox.


You should get the a screen similar to the one below


32/40



You have to write your processing logic / code here now under MODULE

USER_COMMAND_ INPUT (eg. MODULE

USER_COMMAND_1 0 0 0 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-CARRIDAND 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.


33/40



You will get some error message since you have not completed the datadeclaration 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.


34/40



Double click on the OK-CODE in your code.

Click on YES.

Click on the Global Data Fieldsince OK-CODE is a global field.

Similarly if you want to declare tables, internal tables etc., then click on therespective radiobuttons.


35/40



Select the appropriate radiobutton and click on the Continue icon.

And to do the Data Declarations.

Saveyour changes.

Click the Back iconto come back to the Edit Programscreen.

Now once again Saveand do a Checkon your program. Do this process till youremove all the errors.

After you have removed all the errors,, Savethe code.

Click on the Back iconto come out.


36/40



Now remove the comment on the line MODULE USER_COMMAND_


37/40



Now let us test the program.

Select your program and click on the Test/Executeicon.

Select the Direct(the defalut) radiobutton and click on the Continue icon


38/40



Now you get the screen that you designed with the fields which you hadincluded in the screen.

You also check the Application Toolbar where you will find only the icon whichyou had associated with your function code DISP. You have only one icon therebecause you had entered only one entry in the Application Toolbar area of yourGUI STATUS.

Also check the Menu Bars and the Window Title (i.e. the GUI Title).


39/40



Now let us enter some data and check.

Let us enter for example, Airline Carrier = SQ and Flight Number = 026 andsee if the code that we wrote works.

After entering the inputs, click on the Display iconon the application toolbar orselect Display from the Flight Data menu

If everything is okay then the data for the other fields will be retrieved from thetable 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 andmenu that we created by adding some other objects on the screen.


40/40


Click on the

Date post:	14-Apr-2018
Category:	Documents
Upload:	fernando-bernardi
View:	223 times
Download:	0 times

3. Screen and Menu Painter.pdf

Documents