Using Simple Graphics in a Web Dynpro application

By Tulasi Palnati

Description:

Add a Simple Business Graphic to your Web Dynpro application 

Go to NWDSàCreate Web Dynpro Project (SimpleGraphics)

Right click on componentsàCreate a Component (SimpleGraphicsV)

Open the SimpleGraphicsV. Right click on the “RootUIElementContainer” in the Outline pane and select “Insert Child”. Select the element “Type” of BusinessGraphics. Give your Element the name “Simple Graphic” 

You can see it both in the Outline pane, and the Layout pane, both shown here. 

Highlight “SimpleGraphic” element in your view. Then go to the “Property” view in the bottom right hand pane. Ensure that the property chartType is set to “columns”.

Change the height property to 300

Change the width property to 500 

You will see that Business graphic in your View’s layout has been resized. 

Right Click on the “SimpleGraphic” element in the Outline pane. In the menu select “Insert

Category”. Right Click on the“SimpleGraphic” element in the Outline pane. In the menu select “Insert Series” .Add 2 other simple series to the BusinessGraphics. 

Set the Label properties of your Simple Series as follows

Go to the “Context” view of your View. Right Click on the “Context” node and in the menu select “New àValue Node” .In the popup give it the name “SimpleGraphic” .Click “Finish”.

Add 4 “Value Attributes” to the node “SimpleGraphic” in your context – with the names:

Category, ValueOne,ValueTwo and ValueThree. Category should be of type “string”ValueOne, ValueTwo, and ValueThree should be of type “double”

Select the “Layout” of the SimpleGraphicsView.

- In the Outline pane of the SimpleGraphicsView, highlight the “SimpleGraphic” node.

- In the Property view in the bottom right hand pane, set the “seriesSource” property. 

- Click the button shown in the seriesSource This will show a popup window of your

Views context.

- In the context popup select the node “SimpleGraphic”, then click “OK”.

- The seriesSource property will then be set as shown. 

Set the “Category” view element’s “description” property to the context SimpleGraphic.Category

Set the “SimpleSeries1” view element’s “value” property to the contextSimpleGraphic.ValueOne.

Set the “SimpleSeries2” view element’s “value” property to the contextSimpleGraphic.ValueTwo.

Set the “SimpleSeries3” view element’s “value” property to contextSimpleGraphic.ValueThree. 

 Add the code to fill the data to view context

Go to implementation tab of SimplegraphicVàAdd the code in wdDoinit() method

Right click on Application àSelect create application (simpleGraphicAppl)à NextàNextàFinish. 

Rightclick on SimpleGraphicsApplàDeploy Archive and Run

The output as follows  

To continue...click here