Online Scenario - Travel Request Form

This document discusses how to create online interactive travel request form. The lay out of the travel request would be in the given format.

1. The values in the drop down list for department are

• SAP

• Java

• Oracle Apps

2. The values in the drop down list for destination country are

• US

• UK

• India

Step1: Go to the t-code SE80 to create Web Dynpro application. Provide the web dynpro component name as ‘ZTEST_TRAVEL_REQUEST’.

Press enter. The following screen appears.

Click on Yes to create component and provide the description for the component.

Step2: Now go to view--àContext where define the node as shown below.

Provide the name of node is ‘ADOBE’.

Create sub node ‘TRAVEL’ as shown below.

Select ‘Add Attribute from Structure’.

Note: Create the table ‘ZWD_TRAVEL’ with the following structure before creating webdynpro component.

Now travel node contains the following fields,

Step3: Create ‘pdf_source’ attribute of type XSTRING that holds the PDF document.

Step4: Now go to Layout tab.

Insert Element by right click on ‘ROOTUIELEMENTCONTAINER’.

Select ‘INTERACTIVE FORM’ as shown below.

Click on ‘Ok’ button.

Now the layout looks like this.

Step5: Click on pdfSource property as shown in the Interactive form properties tab as shown below.

A popup will appear where you select ‘PDF_SOURCE’.

Step6: Provide template source name ‘ZTRAVEL_REQUEST_FORM’.

Now double click on it then the following popup will appears.

Provide the interface name and click on CONTEXT button to bind the node ADOBE to form.

The following popup will appears. Select ADOBE node and click on ‘OK’ button.

Then press ‘Yes’.

Now adobe form screen would appear.

The fields defined in the node ‘TRAVEL’ is mapped to Data View of the layout.

Drag and drop the every field onto the BODY PAGE.

Now we need to make the field DEPARTMENT as drop down list box.

For that we need to change the field type from TEXT FIELD to DROP DOWN LIST BOX as shown below.

Now click the ‘+’ button as shown above and add texts.

Now go to BINDING tab,

Select the check box ‘Specify Item Values’. Initially it is unchecked. After checking the check box then it shows values and corresponding texts as shown above.

Change the values from 0, 1, and 2 to corresponding text as shown below.

Step7: Drag the static text and write ‘Travel by’ text in it.

Now drag and drop the radio button from LIBRARY as shown below.

Rename the Radio Button to Private Car and press enter. Then

Again drag and drop the radio button from LIBRARY.

Again rename the Radio Button to Company Car and press enter. Then

Repeat the same process for remaining 3 radio buttons.

Now go to binding tab,

Now, change the values from 1, 2, 3, 4 and 5 to corresponding text as shown.

Step7: Now go to properties tab,

Change the layout type ‘UNKNOW LAYOUT TYPE’ to ‘ZCI LAYOUT’ as shown below.

Step8: Now activate both the form and interface.

Step9: Now come back to Web dynpro application.

Now click on create button. Provide the action name and description.

Now double click on SAVE.

The following screen appears.

Step10: Now go to ‘Web dynpro code wizard ( )’. Select the node ADOBE.

And press enter.

The following code will be generated.

Save and active the component.

Step11: Create the Web dynpro application as shown below.

Give the description and save the application.

Step12: Now execute the application.

Enter the details.

Press Save button.

You get the successful message after the record is inserted in the data base.

Check the data in the table.