Flex Tree 

Definition

A Web Dynpro-developed user interface component used to define how a list of data is displayed in a table based on predefined hierarchical levels.

Use

The Flex Tree UI component uses data from different application services to populate the table. You can configure the data to appear as text, hyperlinks, graphics, or icons.

Flex Tree is a configurable user interface component pattern that can be embedded in any composite application. It allows you the flexibility in structuring your data tree and joining information from different sources.

Structure

Flex Tree consists of two parts:

·        Flex Tree Configurator

·        Flex Tree user interface (UI)

Flex Tree Configurator

With the configurator, you specify the component’s physical and logical data sources and presentation properties seen in the UI. You use the toolbar along the top of the layout to manage the dashboard configuration.

You can open a new Flex Tree configuration (New), a previously created one (Open), save (Save, Save as) or delete (Delete) it, create an external report (Reporting), or preview (Preview) and test your configuration in a separate window.

With Reporting, you run the reporting component in administration mode, where the data for reporting is given from an upper level. You can define which fields are to be displayed in the report and select the output format (for example, HTML, XML, or CSV)

The Flex Tree Configurator uses the following tab pages to define how a table is populated and displayed:

Tab Page Name		Use
Physical Data Source	This tab page can be divided into the sections for: ●     General Information ●     Configuration ●     Hierarchy Levels	You use this tab page to define the source of the data used in the application.
Logical Data Source	This tab page is divided into the sections for identifying: ●     Logical fields ●     Physical fields mapping	You use this tab page to bind component fields to the physical data source.
User Interface Setup	This tab page is divided into the sections for configuring: ●     Table Columns ●     Toolbar Buttons ●     Editor, Header, Column Properties	You specify how the layout of the Flex Tree pattern will look like with this tab page.

Physical Data Source Tab Page

Hierarchy Levels

You create or delete data source hierarchies in Hierarchy Levels by specifying queries or relations to predefined queries. If you create a second or an additional hierarchical level, you are creating a sublevel within the top-level hierarchy. You enable the checkbox to ensure that the level can be sorted.

You can also define hierarchies based on additional parameters and top-level arguments by toggling Parameters. You define parameters either as externally available node attributes with specified default values, or as scoped variables. These values are then automatically applied by the Flex Tree pattern.

Configuration: Query

You can configure tree implementations by defining the development component and ESF parameters in the repository browser. The repository browser appears as a dialog box and is divided into the following parts:

·        Service Modules

Lists the service modules available for implementation in the application. Each module contains aspects and queries associated with the service module.

·        Queries

The list is populated depending on the service module chosen. The query name consists of the operations command and attribute used in the query.

·        Aspects

Lists the set of logically grouped fields targeted in a query. The system populates the table only after selecting a query to use in the application. The list contains the aspect table name and aspect used as the unique identifier.

The Parameter Binding table lists the parameter name and data type of the parameter used in the query. You can generate a Binding path if you want to bind input parameters of the query to component arguments.

Logical Data Source Tab Page

Logical Fields

You define which logical field you use to map to physical fields. Each logical field must use one of the three variants listed below to populate each field with physical data.

●     Mapped

Is the mapped relation between logical fields from query results or to different fields on each level.

●     Calculated

Logical fields calculated with this variant are intended to provide attribute values calculated at runtime. The real values will be supplied at runtime by programming actions in the callback function using the field ID of the component. This is what embeds the Flex Tree pattern.

●     Macros

In using logical fields with macros, the user may enter expressions calculating the field value based on values of the physical fields. The macro language allows functions that reference to fields from query results, literal data types, typecast simple types, and predefined constants. These functions can be, for example,  @switch, @format, or @mimeURL.

For more information on the macro language used in the Flex Tree pattern, see Macros.

Physical Fields Mapping

The attributive information of the levels, which you defined in the Physical Data Source tab page, are listed here. From the drop-down field Override Type by, you can select a type of physical attribute to use to map logical fields. At runtime, this will result in an automatic filling of drop-down editors with enumeration values. For example, priority “high”, “medium”, or “low”.

User Interface Setup Tab Page

You can define table and editor properties and configure toolbar buttons. You can also specify general UI properties such as design modus or the maximum visible rows seen in the final result.

Table Columns

When you create a new table column, you must specify the editor, header, and column properties. Some properties have predefined values, which are listed in pull-down menus. In other fields, you must fill in a value.

You also have the possibility to bind property values to logical fields or to set the property to contain a literal value. You can also indicate if the property value can be translated. See Creating Column Headings for more information.

Toolbar Buttons

Flex Tree provides a method to define a set of toolbar pushbuttons at time of configuration. Every pushbutton is defined as a pair and the action fired event is added to an external interface that corresponds to choosing Any on the toolbar.

Flex Tree UI

You can see the results of the pattern configuration in the screen layout. The UI contains a multi-column table containing control columns that display tree handlers, which are used to expand or collapse tree levels. Each entity is listed as one row in the table containing the headers you defined in the UI setup tab page.

Flex Tree supports single (standard) and multiple (if configured) selection. Single selection is implemented as the native Web Dynpro lead select. Multiple selections define a continuous range of affected levels.

Integration

In order to integrate the Flex Tree UI component, you should do the following:

       1.      Add caf/UI/ptn/flextree as a used DC.

       2.      Open a necessary view and insert ViewContainerUIElement container.

       3.      Open a Windows node in the Web Dynpro explorer and go to this container.

       4.      Embed FlexTreeInterfaceView into ViewContainerUIElement via  the context menu.

       5.      Write code to instantiate Flex Tree.