DEMO_BG_GANTT

Use

The example DEMO_BG_GANTT is a simple Web Dynpro application for displaying project process flows in a Gantt chart. You can use the BusinessGraphics UI element to create many different types of chart; a Gantt chart is just one possibility. Unlike the Gantt UI element, which uses a completely different display technique, a Gantt chart that uses the BusinessGraphic element can be designed using only the context of the relevant view.

Layout of the View

The initial layout of the view is relatively simple:

The BusinessGraphics UI element is embedded in RootUIElementeContainer and the entry gantt is selected as the chart type. Special subelements are then created in the element hierarchy to describe the Gantt chart: The subelement Category is needed to structure the Y-axis of the chart. A Gantt chart can display just one category on the Y-axis, but can display multiple categories just as easily. These could be multiple employees working on the same project, for example. In this case, the context node to which the Category subelement is bound must have the cardinality 0..n.

In many cases, the X-axis of a Gantt chart represents a time stream. For each category (for example, for each employee involved), the project-relevant time periods or points in time can be distributed along this time stream in graphic form. At least one Series must therefore be created for each category.

The DEMO_BG_GANTT example shows only one time series on the X-axis of the chart. It can easily, however, show multiple series. In this case, each series would correspond to a subproject of the overall chart. Each category would show a group of differently-colored time periods. Since this example can only display a single series, however, the context node to which the Series subelement is bound has the cardinality 1..1. If you want to copy and adapt this example, you can increase the cardinality of this node, create and implement a supply function, and thereby enable the chart to display multiple series.

Each series consists of at least one, but possibly several Points. Each point represents a range of a series, each with a starting point and an end point. The values for these starting points and end points are created as separate subelements, or Values, of the point, and are again created in the UI element hierarchy.

The context of the view generally depicts the structure of the chart in View Designer. The CATEGORIES and POINT nodes both have cardinality 0..n, the SERIES node only has category 1..1. A supply function is created and implemented for CATEGORIES and for POINT.

Binding the UI Elements

The following figure shows the binding of the various source or value properties to the appropriate context nodes:

Figure 1: Binding Paths in the Example DEMO_BG_GANTT, View BG_GANTT

UI Element	Property	Context Element
BUSINESS_GRAPHICS	categorySource	Node CATEGORIES
	seriesSource	Node SERIES
SERIES	pointSource	Node POINT
POINT	valueSource	Node POINT
POINT value START	value	Attribute START
POINT value END	value	Attribute END

Notes on Customizing Gantt Charts

Caution

To display a Gantt chart correctly, you need to make two additional settings in the BusinessGraphics control. To do this, open Chart Designer:

Select the UI element BusinessGraphics in the element hierarchy
Use the secondary mouse button to open its context menu.
Choose Edit Customizing

Chart Designer opens in a new dialog box, where you can edit the settings of the chart. The Global Settings are at the top of the top right window, the overview.

Select the line Global Settings. In the bottom right window of Chart Designer, you can now edit the global settings. Select the top property, Chart Type, and then select the entry Gantt.

Scroll down the overview and expand the Series entry.

Select its single subelement Standard Series. In the bottom window, which displays the properties of the default series, scroll down and expand the Area Properties entry. Again, scroll down and edit the Marker Shape entry. Set this property to None.

Exit Chart Designer. The settings you have just made are saved to a special XML file. These settings are then used each time the application starts.

Caution

After a Customizing file has been created or changed, the view must be saved and reactivated.