Skip to content

Multi-Line Row Support in Lists and Grids

Working with Action Menus
Indexes and Ordering with Data Aware cWebLists

The cWebList class now supports interfaces that allow you to distribute columns over multiple lines. A column may now appear on a new line, may span multiple columns in a row, and may span multiple lines within a row. A number of new web properties have been added to the column classes (cWebColumn) to support this. Those properties are:

pbNewLine

When set to true, this instructs the list to place this column on a new line. All subsequent columns defined for the list will now appear in the new line.

piListColSpan

This determines the column’s width by defining that the column should span multiple columns. The column width of a single-line row is determined by the web property piWidth, where each column value is a ratio of the sum of all the column widths. When a row contains multiple lines, generally one of those lines should have their columns all defined via piWidth – let’s call this the main line. The other lines in the row must have their width determined by defining how many columns it spans of the main line. In these lines, piWidth is ignored and you use piListColSpan to set the width. The default value of piListColSpan is 1.

Example 1

  • Field 1 – piWidth = 20
  • Field 2 – piWidth = 20
  • Field 3 – piWidth = 20
  • Field 4 – pbNewLine = True, piListColSpan = 2
  • Field 5 – piListColSpan = 1
a              b              c
+--------------+--------------+----------------+
| 1            | 2            | 3              |
+--------------+--------------+----------------+
| 4                             | 5              |
+-----------------------------+----------------+

Code:

Object oField1 is a cWebColumn
    Set psCaption to "1"
    Set piWidth to 20
End_Object

Object oField2 is a cWebColumn
    Set psCaption to "2"
    Set piWidth to 20
End_Object

Object oField3 is a cWebColumn
    Set psCaption to "3"
    Set piWidth to 20
End_Object

Object oField4 is a cWebColumn
    Set psCaption to "4"
    Set pbNewLine to True
    Set piListColSpan to 2
End_Object

Object oField5 is a cWebColumn
    Set psCaption to "5"
    // Set piListColSpan to 1 is the default
End_Object

piListRowSpan

A column may span multiple lines. This is determined by setting the piListRowSpan property. The default value of piListRowSpan is 1.

Example 2

  • Field 1 – piWidth = 20, piListRowSpan = 2
  • Field 2 – piWidth = 20
  • Field 3 – piWidth = 20
  • Field 4 – pbNewLine = True, piListColSpan = 1
  • Field 5 – piListColSpan = 1
a              b              c
+--------------+--------------+----------------+
| 1            | 2            | 3              |
+              +--------------+----------------+
|              | 4            | 5              |
+-----------------------------+----------------+

Code:

Object oField1 is a cWebColumn
    Set psCaption to "1"
    Set piWidth to 20
    Set piListRowSpan to 2
End_Object

Object oField2 is a cWebColumn
    Set psCaption to "2"
    Set piWidth to 20
End_Object

Object oField3 is a cWebColumn
    Set psCaption to "3"
    Set piWidth to 20
End_Object

Object oField4 is a cWebColumn
    Set psCaption to "4"
    Set pbNewLine to True
    // Set piListColSpan to 1 is the default
End_Object

Object oField5 is a cWebColumn
    Set psCaption to "5"
    // Set piListColSpan to 1 is the default
End_Object

Example 3

  • Field 1 – piWidth = 20, piListRowSpan = 2
  • Field 2 – piWidth = 20
  • Field 3 – piWidth = 20, piListRowSpan = 2
  • Field 4 – pbNewLine = True, piListColSpan = 1
a              b              c
+--------------+--------------+----------------+
| 1            | 2            | 3              |
+              +--------------+                +
|              | 4            |                |
+-----------------------------+----------------+

Code:

Object oField1 is a cWebColumn
    Set psCaption to "1"
    Set piWidth to 20
    Set piListRowSpan to 2
End_Object

Object oField2 is a cWebColumn
    Set psCaption to "2"
    Set piWidth to 20
End_Object

Object oField3 is a cWebColumn
    Set psCaption to "3"
    Set piWidth to 20
    Set piListRowSpan to 2
End_Object

Object oField4 is a cWebColumn
    Set psCaption to "4"
    Set pbNewLine to True
    // Set piListColSpan to 1 is the default
End_Object

Example 4

The peAlign property can also be used to good effect with multi-line rows, particularly with mobile devices.

  • Field 1 – piWidth = 20, piListRowSpan = 2
  • Field 2 – piWidth = 20
  • Field 3 – piWidth = 20, piListRowSpan = 2, peAlign = alignRight
  • Field 4 – pbNewLine = True, piListColSpan = 1
a              b              c
+--------------+--------------+----------------+
| 1            | 2            |                3|
+              +--------------+                +
|              | 4            |                |
+-----------------------------+----------------+

Code:

Object oField1 is a cWebColumn
    Set psCaption to "1"
    Set piWidth to 20
    Set piListRowSpan to 2
End_Object

Object oField2 is a cWebColumn
    Set psCaption to "2"
    Set piWidth to 20
End_Object

Object oField3 is a cWebColumn
    Set psCaption to "3"
    Set piWidth to 20
    Set piListRowSpan to 2
    Set peAlign to alignRight
End_Object

Object oField4 is a cWebColumn
    Set psCaption to "4"
    Set pbNewLine to True
    // Set piListColSpan to 1 is the default
End_Object

pbFixedWidth

If this is set to true, the column’s width, as set by piWidth, will be determined with a fixed pixel size instead of a ratio. This is meant to be used when a column must be a fixed length. For example, if a column contains an image or an icon, dynamic sizing will not make sense.

The various combinations of piWidth, pbFixedWidth, pbNewLine, piListColSpan, piListRowSpan, and peAlign can create a variety of grid layouts. The best way to see how these all interact is to experiment with the Studio’s web previewer.

CSS Styles in cWebLists

Styles have been added to the web-mobile theme, Df_Flat_Touch, to support attractive multi-line lists on mobile devices.

cWebList Styles

  • MobileList - The MobileList class should be used with mobile devices.
Set psCSSClass to "MobileList"

Note that when using the “MobileList” style, you usually want pbShowHeader to be false.

cWebColumn Styles

Three CSS classes are supported for web-columns which can be used to present a cell in different styles. Those classes are:

  • Caption – The RowCaption class is used for the most important cells in a row. The text is large, bold, and dark.
Set psCSSClass to "RowCaption"

  • Normal – This is the default style for cWebColumn. This is used to present normal cell information. The text is smaller (than caption). Since this is the default, you do not need to set a psCssClass for this.

  • Detail – The RowDetail class is used to present detail in a cell. This is used to present cell information that is considered to be less important than Normal or Caption. The text is smaller (than caption) and lighter.

Set psCSSClass to "RowDetail"

Previous Topic: Working with Action Menus
Next Topic: Indexes and Ordering with Data Aware cWebLists

See Also

Developing Web Applications