Defining tables in the layout

Designing table views

When using a grid-based layout, the table rows and columns are defined within an area delimited by curly brackets. Columns are defined with item tags and form fields. Every column tag must be properly aligned. You typically use a pipe character to separate the column tags.

A table definition using the TABLE layout item:

TABLE
{
[c1     |c2              |c3               ]
[c1     |c2              |c3               ]
[c1     |c2              |c3               ]
}
END

Alternatively, you can define <TABLE > layout tags inside a GRID container, beside other layout tags:

GRID
{
<GROUP g1                                  >
[f1            ]
[f2                                        ]
[                                          ]
<                                          >
<TABLE t1                                  >
[c1     |c2              |c3               ]
[c1     |c2              |c3               ]
[c1     |c2              |c3               ]
<                                          >
}
END

Important: Avoid Tab characters (ASCII 9) inside the curly-brace delimited area. If used, Tab characters are replaced with 8 blanks at compilation with fglform.

The position of the item tags is detected by the form compiler to build the table. Column item types (widget to be used) and behavior are defined with form items in the ATTRIBUTES section:

ATTRIBUTES
EDIT c1 = customer.cust_id;
EDIT c2 = customer.cust_name;
EDIT c3 = customer.cust_address;
END

When using a stack-based layout, table views are defined with the TABLE stack item inside a STACK container. In this case, position/size and behavior are defined at a single place:

LAYOUT
  STACK
    TABLE t1(UNMOVABLECOLUMNS)
      EDIT customer.cust_id;
      EDIT customer.cust_name;
      EDIT customer.cust_address;
    END
  END
END

Controlling the size of the table

In a grid-based container, the default width and height of a table are defined by the columns and the number of lines used in the table layout respectively. In a stack-based container,

You can overwrite the default table by specifying the WIDTH and HEIGHT attributes.

TABLE t1 ( WIDTH = 5 COLUMNS, HEIGHT = 10 LINES )

Defining column titles

The TABLE layout item definition can contain column titles as well as the tag identifiers for each column's form fields. The fglform form compiler can associate column titles in the table layout with the form field columns if they are aligned properly.

Note: At least two spaces are required between column titles.

TABLE
{
 Title1  Title2           Title3
[c1     |c2              |c3               ]
[c1     |c2              |c3               ]
[c1     |c2              |c3               ]
}
END

Alternatively, you can set the column titles of a table container by using the TITLE attribute in the definition of the form fields. This allows you to use localized strings for the column titles.

TABLE
{
[c1  |c2          |c3         ]
[c1  |c2          |c3         ]
[c1  |c2          |c3         ]
}
END
...
ATTRIBUTES
EDIT c1 = customer.cust_id, TITLE=%"label.cust_id";
EDIT c2 = customer.cust_name, TITLE=%"label.cust_name";
EDIT c3 = customer.cust_address, TITLE=%"label.cust_address";
END

Similarly, in a stack item TABLE container, columns can get a TITLE attribute:

LAYOUT
  STACK
    TABLE t1(UNMOVABLECOLUMNS)
      EDIT customer.cust_id, TITLE=%"label.cust_id";
      EDIT customer.cust_name, TITLE=%"label.cust_name";
      EDIT customer.cust_address, TITLE=%"label.cust_address";
    END
  END
END

Height of table rows

The height of table rows can be defined with a grid-based layout by adding empty tags underneath column tags (this makes sense only when using widgets that can get a height such as TEXTEDIT or IMAGE).

LAYOUT
TABLE
{
[c1  |c2                       ]
[    |                         ]
[    |                         ]
}
END
END
ATTRIBUTES
EDIT c1=FORMONLY.key;
TEXTEDIT c2=FORMONLY.thetext;
END
...

In the above example, the second column is defined as a TEXTEDIT item type, that can get a height as a number of grid cells. The height is defined by the number of item tags of the table row in the layout section (height=3 in our example)