Scribd
Upload
77 views

Using Simple Graphics in A Web Dynpro Application

This document provides instructions for adding a simple business graphic to a Web Dynpro application. It describes how to create a Web Dynpro project and component, insert a business graphic element, configure its properties, add data series and binding it to a view context. The steps also cover using the chart designer to further customize the graphic by setting titles, legends, axes and colors.

Uploaded by

Toey Chaladee
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
77 views

Using Simple Graphics in A Web Dynpro Application

This document provides instructions for adding a simple business graphic to a Web Dynpro application. It describes how to create a Web Dynpro project and component, insert a business graphic element, configure its properties, add data series and binding it to a view context. The steps also cover using the chart designer to further customize the graphic by setting titles, legends, axes and colors.

Uploaded by

Toey Chaladee
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 16

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  

Introduction to chart Designer to Business Graphics(Extension to first application)

Open the view SimpleGraphicsV.Go to the “Layout” of the view.In the Outline pane, right click on your Business Graphic “SimpleGraphic” and in the menu
select “ Start Chart Designer” . 

 
The Chart Designer will show up in the upper right hand pane for your Business Grahphic. It is shown in the image below.

Edit the properties of your business graphics in chart designer. 

Set the Title of your businessgraphic. Just highlight the“Title” element in the “Overview” pain. Then enter your title in the “Caption” property. Set the Legend
caption. Same process you did for the “Title”, but for “Legend”.

 
 

Set the Border properties of the legend to have a solid black border. Set the Title and Unit “caption” property under the “Categoryaxis” element. (Open up the
node, you will see a Title element). 

 
 

Set the Unit caption as Months. Do the same as above but for the first Value Axis node.

- Set the Value Axis Title Caption

- Set the Value Axis Unit Caption 

 
 

Change the Background Color. Highlight the “Background” element in the Overview pane.

Under “Area Properties” you can set the color. Do not forget to save your Metadata. 

 
 

 Right click on SimplegrahicsApplàDeploy Archive and Run. 

The output as follows:

You might also like