NaturalONE Version 8.3.7
 —  Natural for Ajax  —

FLEXLINE - Flexible Columns in Control Grids

The FLEXLINE control offers the option to define the columns of a grid dynamically at runtime. That is: the application decides at runtime which column controls to use with which properties.

This document covers the following topics:


Example

The following example shows a ROWTABLEAREA2 control containing a FLEXLINE control:

Flexline

The XML layout definition is:

<rowarea name="Move Columns">
  <rowtablearea2 griddataprop="lines" rowcount="5"
  width="100%" firstrowcolwidths="true">
    <tr>
      <label width="30" asplaintext="true"></label>
      <flexline infoprop="headerFL"></flexline>
      <hdist width="100%"></hdist>
    </tr>
    <repeat>
      <str valueprop="lineSelected">
        <selector valueprop="lineSelected" width="30"></selector>
        <flexline infoprop="/contentFL"></flexline>
        <hdist width="100%"></hdist>
        <xcidatadef dataprop="nr" clientdata="true"></xcidatadef>
        <xcidatadef dataprop="description" clientdata="true"></xcidatadef>
        <xcidatadef dataprop="price" clientdata="true"></xcidatadef>
        <xcidatadef dataprop="quantity" clientdata="true"></xcidatadef>
      </str>
    </repeat>
  </rowtablearea2>
</rowarea>

The grid uses two FLEXLINE controls: One for the grid headers and one for the grid lines. The controls to be used for the columns in a line are completely defined dynamically at runtime. The FLEXLINE control for the grid headers is dynamically filled with GRIDCOLHEADER controls at runtime. Therefore, all features of the GRIDCOLHEADER control (such as moving and resizing columns) are available in the grid.

The FLEXLINE control "headerFL", which is used for the headline of the table, binds to the following Natural data structure:

1 HEADERFL (1:*)
2 ATTRIBUTES (A) DYNAMIC
2 CONTROL (A) DYNAMIC
2 VALUEPROP (A) DYNAMIC
2 WIDTH (A) DYNAMIC

The FLEXLINE control "/contentFL" (note the initial slash which must be used for controls inside a grid), which is used for the lines of the table, binds to the following Natural data structure:

1 CONTENTFL (1:*)
2 ATTRIBUTES (A) DYNAMIC
2 CONTROL (A) DYNAMIC
2 VALUEPROP (A) DYNAMIC
2 WIDTH (A) DYNAMIC

As CONTROL value, the name of the control is passed. Valid values are:

BUTTON
CHECKBOX
COMBODYN2
DATEINPUT
FIELD
GRIDCOLHEADER
ICON
IMAGEOUT
METHODLINK
TEXT
TEXTOUT
TOGGLE

The WIDTH value must be set for all controls. The allowed values depend on the specific control.

If the control has a valueprop property, the field VALUEPROP must contain the name of the valueprop for this control. For GRIDCOLHEADER, the VALUEPROP must contain the value of the propref property.

ATTRIBUTES contains additional control properties that you want to use for the control as a semicolon-separated list of name-value pairs. Instead of defining the properties for a control at design time in the Layout Painter, you now pass them dynamically at runtime. Example for the FIELD control: "noborder;true".

The VALUEPROP value defined in the CONTENTFL data structure refers to elements of the LINES data structure. In the following example, the property "nr" is defined as element of the LINES data structure using the XCIDATADEF control.

EDITLINE.CONTROL(1):="field"
EDITLINE.VALUEPROP(1):="nr"
EDITLINE.WIDTH(1):="100%"
COMPRESS "noborder;true;transparentbackground;true" INTO CONTENTFL.ATTRIBUTES(1)" LEAVING NO SPACE

Top of page

Adapter Interface

In the parameter data area of the adapter, the grid data is represented by the following data structure:

1 CONTENTFL (1:*)
2 ATTRIBUTES (A) DYNAMIC
2 CONTROL (A) DYNAMIC
2 VALUEPROP (A) DYNAMIC
2 WIDTH (A) DYNAMIC

Top of page

ATTRIBUTES

As you can see in the above example, the properties of the controls are passed as a comma-separated string value of the ATTRIBUTES data field. If one of the property values contains a semicolon (;) itself, you must use a backslash followed by a semicolon (\;) in the property value. Example for edit mask properties in a FIELD control: "datatype;P5.2\;999.99".

You can use and combine any properties that are available for the controls with the exception of the njx:* properties (such as njx:natname or njx:natcomment). The njx:* properties are used to adapt the code generation of the corresponding Natural adapter code. Since no Natural adapter code is generated at runtime, these properties cannot be used in the ATTRIBUTES data field of the FLEXLINE control.

Top of page

FLEXLINE Properties

Basic
infoprop

Name of the adapter parameter that represents the control in the adapter.

Obligatory  
withborder

Flag that indicates if a border is drawn between the controls that are rendered inside the FLEXLINE control. Default is "false", i.e. no border is drawn.

Optional

true

false

comment

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Optional  
Natural
njx:natname

If a Natural variable with a name not valid for Application Designer (for instance #FIELD1) shall be bound to the control, a different name (for instance HFIELD1) can be bound instead. If the original name (in this case #FIELD1) is then specified in this attribute, the original name is generated into the parameter data area of the Natural adapter and a mapping between the two names is generated into the PROCESS PAGE statement of the Natural adapter. This mapping must not break a once defined group structure. If for instance a grid control that is bound to a name of GRID1 contains fields that are bound to FIELD1 and FIELD2 respectively, the corresponding njx:natname values may be #GRID1.#FIELD1 and #GRID1.#FIELD2, but not #GRID1.#FIELD1 and #MYGRID1.#FIELD2.

Optional  
njx:natcomment

The value of this attribute is generated as comment line into the parameter data area of the Natural adapter, before the field name. The Map Converter, for instance, uses this attributes to indicate for a generated statusprop variable to which field the statusprop belongs.

Optional  

Top of page