Showing Hierarchies in HTML Composer

How to:

Reference:

By using a tree structure in an HTML report, you can show hierarchical data from a multi-dimensional data source (for example, SAP BW), that uses the parent/child model. You may also use a Tree control for non-hierarchical data sources. Level hierarchies are not supported.

The behavior of the Tree control is integrated with the parameter definition. If a parameter is defined as a single value and that parameter is bound to a tree control, the tree control uses option buttons for each node in the hierarchy. If the parameter is defined as Multiselect OR and Multiselect AND, and that parameter is bound to a tree control, then the tree control uses check boxes for each node in the hierarchy, enabling you to select multiple nodes.

The following image shows the Tree Control component in HTML Composer.

Note: Cube data should be used to populate single source trees.

For more information about using HTML Composer, see the Designing a User Interface for a Web Application With the HTML Composer manual.


Top of page

x
Procedure: How to Add a Tree Control to an HTML Page Using an Embedded Procedure

This procedure describes how to add a tree control for a multi-dimensional data source, using an embedded procedure.

  1. In HTML Composer, insert a tree control from the Components toolbar.

    Tip: You may select Single source Tree control or Multi source Tree control. If no type is selected, Single source Tree control is the default, as shown in the following image.

    The cursor changes to a crosshair.

  2. Drag the crosshair to create a tree control, and adjust it to the size you want.

    A tree control is created in the layout and assigned the name treecontrol(n), where n is a number. Additionally, the Properties and settings dialog box appears for the tree control.

  3. Optionally, you may select the Expanded property from the Properties tab of the Properties window to show the tree control expanded at run time.
  4. Optionally, you may select the Hyperlink property from the Properties tab of the Properties window to show the tree nodes as hyperlinks, instead of radio buttons at run time.
  5. From the Properties and settings dialog box, select Dynamic as the Data type.
  6. Keep Embedded procedure selected and click the browse (...) button adjacent to the first input field.

    The Get source file dialog box opens.

  7. Select a multi-dimensional data source and click Open.

    The multi-dimensional data source is added as the embedded procedure.

  8. Click the Value field browse button to select a field from the hierarchy.

    The Value field is the data source field from which the values will be retrieved.

  9. Click the Display field browse button to select a field from the hierarchy.

    The Display field is the text that represents the parameter value in the tree control.

  10. Save and run the page to view the multi-dimensional data source in the tree control.

Top of page

x
Procedure: How to Add a Tree Control to an HTML Page Using an Existing Procedure

You can select an existing procedure to add to the tree control in an HTML page. When you select a procedure, it should use fields from the parent/child hierarchy and be set up as follows:

TABLE FILE file 
SUM FST.dispfield 
BY ParentUniqueField 
BY UniqueField 
BY datafield 
ON TABLE PCHOLD FORMAT XML 
END

where:

file

Is the name of the data source.

dispfield

Is the field whose values display in the tree control.

ParentUniqueField

Is the field that represents the parent for the parent/child hierarchy (PROPERTY = PARENT_OF).

UniqueField

Is the field that represents the unique IDs for the hierarchy members (PROPERTY=UID).

datafield

Is the field whose values are passed as the parameter value.

After the procedure is set up, follow these steps:

  1. In HTML Composer, insert a tree control from the Components toolbar.

    Tip: You may select Single source Tree control or Multi source Tree control. If no type is selected, Single source Tree control is the default.

    The cursor changes to a crosshair.

  2. Drag the crosshair to create a tree control, and adjust it to the size you want.

    A tree control is created in the layout and assigned the name treecontrol(n), where n is a number. Additionally, the Properties and settings dialog box appears for the tree control.

  3. Optionally, you may select the Expanded property from the Properties tab of the Properties window to show the tree control expanded at run time.
  4. Optionally, you may select the Hyperlink property from the Properties tab of the Properties window to show the tree nodes as hyperlinks, instead of radio buttons at run time.
  5. From the Properties and settings dialog box, select Dynamic as the Data type.
  6. Select External Procedure and click the browse (...) button adjacent to the first input field.

    The Get source file dialog box opens.

  7. Select a procedure and click Open.

    The procedure name is added as the external procedure.

  8. Click the Value field browse button to select a field from the hierarchy.

    The Value field is the data source field from which the values will be retrieved.

  9. Click the Display field browse button to select a field from the hierarchy.

    The Display field is the text that represents the parameter value in the tree control.

  10. Save and run the page to view the multi-dimensional data source in the tree control.

Top of page

x
Reference: Tree Control Properties in the Properties Window

When a tree control is selected, the Properties tab in the Properties window contains options that control the properties of tree controls.

Click a property to display a description of the selected property at the bottom of the Properties window.

Select all children. The Select all children option, when set to Yes, makes it so that when a parent is selected, all children are selected and when a parent is unselected, all children are unselected. No is selected by default.

Note: The Number of layers property is not available in a single tree source property window.


WebFOCUS