Application using Tab strip tool and assistance class in Web Dynpro

Introduction:THE DOCUMENT ELABORATES THE STEP BY STEP PROCESS TO USE TABSTRIP TOOLS AND ASSISTANCE CLASS.

1. Technical Design

1.1. Developing Application:

Create a Webdynpro Application from Transaction Code: Se80.

1.2. View Designing:

Go to the Main View and create a Group element in the Route Element Container.

Take two Tray elements in the Group and take two Captions and Input Fields in the trays simultaneously.

Create two Labels and input fields in the respective trays.

Create another group to display the outputs in the Tab Strip.

Create a Tab Strip inside the second Group.

Right Click on the Tab Strip and click on Insert tab. Create two tabs and change the captions of the tabs as: “Material Details” and “Plant Details”.

Now, go to the two tabs of the tab strip simultaneously, and add the table element to each of them for displaying the details tables and bind them with the respective nodes for display.

1.3. Component Controller Designing and Context Mapping:

Now, go to the Component Controller of the application and create the node and take the attributes from the structure for the input fields as well as the table for the output screen.

Now create the nodes for the result data for the material and plant details and fill up nodes with the attributes, those are to be displayed.

Finally the context node will look like:

Now go to the main view and navigate to the context tab and make the context mapping.

1.4. Value Mapping to the Input Fields and Tables from the View Controller:

Now go to the Layout tab and select the input fields and map them with the context attributes using the value property.

1.5. Creation of Push Button and Action of the button:

Once the user will provide the input to the respective input fields and press the Search Button, it will call the Assistance class and fetch the data from the Database table and display the output to the tables of the respective tab strips.

Take a button and for searching the material details:

Now, create an action for the “OnAction” event of the button and write the code inside the same.