Sunday, December 19, 2010

Creating Business Graphs in Web Dynpro

To create Business Graphs using Web Dynpro for ABAP, as shown below:

Creating a Web Dynpro Component

Start ABAP Workbench (SE80) and select Web-Dynpro-Comp./Intf. from the available object list.

To create a new Web Dynpro component, enter the name ZWD_GRAPH for the new component in the selection dialog of the object list, and select Display.

In the dialog box that appears, you can enter a description of the new object and select as type Web Dynpro Component. In this dialog you also have the chance to maintain the name of the default window.

Assign the component ZWD_GRAPH to package $TMP.

As a result, you can now see the newly created Web Dynpro component ZWD_GRAPH object tree, which contains the objects component controller, component interface (which contains the entries interface controller and interface views) and windows. You can access the objects using double-click.

Creating a new View and Assigning the View to the Window

Create a view MAIN.

After saving the view MAIN, it appears in the object tree of the Web Dynpro component under entry Views.

Now go to the context and click on it.



Check if the application is in change mode or not. If not in the change mode than make it as a change mode. Now right click on the context and create a node.

Create one node with the name series and make the cardinality o to n and 0 to 1.

Now create the attributes of this node. So right click on the series node and create the attribute as shown below.

First create the attribute description and give the type string for this attribute as shown below.

Now create the three more attributes (company1, company2 and company3) like the same way as shown previously with the type i (integer).And save the application. Now go to the layout. At the left side of the Layout window in the favorites click on the element Business Graphics and drag and drop to the Layout.

The layout would like as follows:

Now right click on the Business Graphics and insert category for the x-axis of the graph.

After defining the x-axis for defining y-axis right click on the Business Graphics and insert series as shown below.

So define y-axis for company1sales.

In the same way, define y-axis for company2 and company3.

And save the application. Now bind the context to the layout.

Now click on the BUSINESS_GRAPHICS and in the properties bind the SERIES node with the layout.

Now click on the description and bind description with the category.

Now click on the company1sales and bind the Company1sales to the attribute company1 as shown below.

In the same way, bind the company2sales with the attribute company2 and company3sales with the attribute company3. And save the application.

Click on the BUSINESS_GRAPHICS and right click on it and go to the Edit Customizing as shown below.

Define the properties as shown below:

Now go to the methods as shown below.



Now double click on the method DOINIT and provide the below code in the method.

Now open window ZWD_GRAPH by clicking on Windows and double-clicking on ZWD_GRAPH. Switch to change mode.

Now open the view structure and move the view MAIN inside the window structure on the right hand side by Drag and Drop.

Open the window structure on the right hand side and you will see the embedded MAIN.

Click on the Web Dynpro component ZWD_GRAPH in the object tree and open the context menu to create a new application.

Enter a name (or accept the proposed name) and press Continue (Enter).

Save as local object

Activating and running your Application

Activate all objects. Select all relevant objects and press Continue (Enter).

To start the application, right click on your WebDynpro application entry and select context menu entry Test.

The result page should look like this.




1 comment:

Bose said...

Thanks for the screen shoots, helped me at right time
Graphs

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites