CHAPTER 8

ABAP CourseChapter 10: Subscreens, tabs and HTML viewer

ContentThe tenth chapter is about the implementation of tabstrips and subscreens. Moreover it shows how to implement a HTML viewer control to show HTML web sites in the SAPGui.

PrerequisitesYou must have finished all tasks from chapter 5 and 7.

MotivationThis chapter shows some further programming elements in the SAP system, like tabstrips and HTML viewer. As the integration of internet technologies become more and more popular, this chapter gives a first introduction how to integrate internet technology into SAPGui.

Lecture notesOnly students who finished chapter 5 are able to go through this chapter. This chapter builds upon the work from chapter 5.Students can go on with their account from chapter 1.

© 2009 SAP UCC TUM Page 1

CHAPTER 8

Product: All

Level: Beginner

Focus: Programming

Version: 1.0

Author: UCC Technische Universität München

© 2009 SAP UCC TUM Page 2

CHAPTER 8

Task 1: Login into the SAP systemShort description: Use SAPGui to login into the SAP system with your username and password

Start the SAPGui and login into the development system using the provided account and password. Please refer to chapter 1 for your username and your password.

Task 2: Create a screen with subscreensShort description: Use your already created screen from chapter 5 to create a new screen with subscreens and tabstrips

At first you have to adjust your existing screen 200 to enable it for acting as a subscreen. Therefore please start the ABAP Dictionary from the SAP Easy Access Menu by using the following path:

Tools • ABAP Workbench • Overview • Object Navigator

You may also use the transaction code SE80 for direct access.

Open your screen ‘200’ in your program ‘ZY_##_DYNPRO’ and navigate to the layout

by using the button . Now open the element list using the button and navigate to the OK code field. Here you have to delete the entry ‘OK_CODE’ as subscreens are not allowed to process ok codes. After you have deleted the ok_code please leave the Graphical Screen Painter and go back to the attributes of your screen. Change the screen type to ‘Subscreen’.

In order to migrate the screen to a subscreen you have to delete some entries in the module ‘status_0200’. Please switch to the tab ‘Flow logic’ and double click on the

© 2009 SAP UCC TUM Page 3

LoginMenu pathDelete ok_codeScreen type = SubscreenChange status_0200

CHAPTER 8

module ‘status_0200’. Delete both SET instructions so that your module looks similar to this:

Please save everything and go to the module ‘USER_COMMAND_0200’. Please delete the following lines from your case instruction. Later on these ok_codes are processed by flow logic of the main screen.

WHEN 'LEAVE'.      LEAVE PROGRAM.WHEN 'BACK'.

Do not delete the ENQUEUE and DEQUEUE function calls. Please save and activate everything.

Now as you have prepared screen 200 as a subscreen you can go on and create the tabstrip and a new screen. So please create a new screen ‘300’ in the Object Navigator. This screen will be used as your main window and will contain the tabstrip and the subscreens later on.

Maintain the short text (you may choose one by your own) and go to the Graphical

Screen Painter. Start the creation of the tabstrip by using the wizard . The wizard collects all necessary information. Please use the following data:

TabStrip name: MyTabStrip

Maintain three Tab texts: “Details in screen”, “Details in web”, “Real time tracking”

Maintain the Subscreen numbers: “Details in screen” 200, “Details in web” 302, “Real time tracking” 303

Do not make any changes to the function codes

Do not make any changes to the includes

After you have finished the wizard the new tabstrip will be shown in the Graphical Screen Painter and you may change the size of it. Switch to the element list and enter the ‘OK_CODE’ at the ok code field.

Please leave the Graphical Screen Painter and go back to the ‘Flow logic’ of your new screen. You will notice that by creating a tabstrip the SAP system automatically

© 2009 SAP UCC TUM Page 4

Change USER_COMMAND_0200

Create screen 300Informations for the wizard

Enter OK_CODE

CHAPTER 8

added already a lot of source code to your flow logic. This source code is about calling the subscreens and defining the includes for the subscreens.

Now you have to define two modules: ‘STATUS_0300’ and ‘USER_COMMAND_0300’. Please start creating the first one by uncommenting it and double clicking on it.

Change the name of the include by adding a ‘ZY_’ at the beginning and go on with the creation. As you already created a status bar and a title bar for your screen 200, you are going to use them here again.

Now save your new module and go back to the flow logic. Uncomment the module ‘USER_COMMAND_0300’ and create the module by double clicking on it. Make sure you change the name of the include by adding a ‘ZY_’ at the beginning.

© 2009 SAP UCC TUM Page 5

Create two modules

Use existing status and title bar

CHAPTER 8

Now you have to add a case instruction for handling the ok_code from your status bar. The screen 300 does only have to care about the ok_code from the status bar, which is in fact one value: ‘LEAVE’. So please create a new case instruction in the module:

Save, check and activate everything you have created so far.

Now open screen ‘100’, which is the starting screen of your program. Here you have to change the next screen to the new screen ‘300’.

Save, check and activate your entire program now. When testing your new program you will see the tabstrip. But unfortunately only one tab is filled with content. This is because we have not cared about the content of the tabs so far. This is your next step.

© 2009 SAP UCC TUM Page 6

Insert case instructionChange next screenTest it

CHAPTER 8

Now you want to implement your flight BSP from chapter 7 into your screen application. Therefore you are going to use a customer control to implement a container. The container will then be used during runtime to create the HTML viewer control. Open your screen ‘302’ and switch to the layout of the screen. Delete the

automatically created TextField and place a custom control on your screen . Double click on the custom control to open the attributes window.

Hint:As you already mentioned it is not possible to edit the layout of one tab in the main program or in the tabstrip. If you want to make changes to your tabs please use the assigned screens and edit the layout of the assigned screens.In the attributes windows maintain the custom control name. Name the control ‘HTML_BSP’. Save everything and go back to the flow logic. As you have placed the custom control on your screen 302 you have to adjust the TOP INCLUDE now, so that the main program is aware of the custom control and you are able to instantiate the HTML viewer control later on.

Save, check and activate the new top include.

© 2009 SAP UCC TUM Page 7

Screen 302: custom controlHintAdjust TOP INCLUDE

CHAPTER 8

Now open your screen ‘302‘ again and switch to the tab ‘Flow logic’. Uncomment the module ‘STATUS_0110’ and double click on it to create the new module. Pay attention to the name of the new include.

Make sure the includes name start with ‘ZY_’. In the new created module you do not want to define a status bar or a title bar. Instead you are going to define the custom control.

Please use the illustrated source code in your module to create the custom control objects during runtime. So far you have defined the custom control and the HTML view control. If you are going to test it, you will notice that the second tab is now filled with a blank screen. To assign your BSP to this tab now, you have to define some variables at first:

urlbsp – this variable stores the URL to the website as a string

url – this is the URL to the website as data type URL

l_appl – this is the name of the BSP application

l_page – this is the name of the BSP page

t_pars – this is an obligatory table containing start parameters for the HTML viewer control

© 2009 SAP UCC TUM Page 8

STATUS_0110Create objectsUsed variables

CHAPTER 8

s_pars – this is a workarea used to assign the start parameter SAP-CLIENT to table t_pars

After you have defined the variables please insert the code as shown in the following figure:

The code does the following: at first it creates the objects and defines the variables right after the object creation. Then the start page of the BSP application, which is to be displayed in the tab, is specified. After that we create the URL for the BSP application and call this application in the HTML viewer control.Save, check and activate the entire program. Test it.

© 2009 SAP UCC TUM Page 9

Module source code

CHAPTER 8

Task 3: Usage of external URL’sShort description: Extend your existing application by including the usage of an external URL to track a flight in real time

The last task in this chapter is the content of the third tab in your application. You will use an external URL and display it in the third tab of your application. Therefore start the Object Navigator using the following menu path:

Tools • ABAP Workbench • Overview • Object Navigator

You may also use the transaction code SE80 for direct access.

Open your program ‘ZY_##_DYNPRO’ and navigate to your screen ‘303’. Open the

screen and switch to the layout of the screen with the button . Delete the textfield, which was automatically created by the SAP system and place a new custom control on the screen. Resize it so that it fits to the main screen and give the name ‘HTML_TRACKING’.

Save your new screen and go back to the TOP INCLUDE of the main program. Equivalent to the previous task you have to add the custom control and the HTML viewer control to the TOP INCLUDE. Please add the following line to the TOP INCLUDE:

Now save the TOP INCLUDE and activate it. Switch back to your screen ‘303’ and go to the ‘Flow logic’. Uncomment the module STATUS_0110 and rename it to STATUS_0303. Then double click on it and create the new object.

© 2009 SAP UCC TUM Page 10

Menu path

Add custom control

Modify TOP INCLUDERename module

CHAPTER 8

When specifying the name of the new include, pay attention that you add the obligatory ‘ZY_’ to the name of the include. Again delete the SET instructions, which were generated automatically. To access the external URL we use the following URL:

http://www.flightstats.com/go/FlightStatus/flightStatusByFlight.do

This URL gives us the ability to track the status of a flight in real time. But to do so we have to transfer the flight number and the airline to the URL. This is done by HTTP-GET methods. Moreover you will have to convert the flight number. Please modify your source code so that it matches the source code in the following figure:

MODULE status_0303 OUTPUT.

  IF tracking_container IS INITIAL.    CREATE OBJECT tracking_container      EXPORTING          container_name = 'HTML_TRACKING'.    CREATE OBJECT html_tracking      EXPORTING          parent = tracking_container.  ENDIF.

  DATA: flightnr TYPE i,        flightnrc TYPE c LENGTH 4,        urltrack TYPE c LENGTH 100.

  flightnr = wa_flight-connid.  flightnrc = flightnr.  CONCATENATE 'http://www.flightstats.com/go/FlightStatus/flightStatusByFlight.do?airline=' wa_flight-carrid '&flightNumber=' flightnrc INTO urltrack.

  CALL METHOD html_tracking->show_url    EXPORTING      url = urltrack.

ENDMODULE.

After you saved and activated everything you can test your new application. The result should look similar to this:

© 2009 SAP UCC TUM Page 11

Tracking URLModule source code