This is an internal documentation. There is a good chance you’re looking for something else. See Disclaimer.

Tile Layout Integration

The tile layout system provides a card-based view alternative to traditional table layouts, improving mobile responsiveness and visual presentation in widgets. To ensure that the tile layout is displayed correctly, the following attributes must be set in the table configuration of the list XML file of the according widget.

Configuration Attributes

Table Level:

  • layouts="table,tile" Required to enable layout switching. Defines which view modes are available to users. Without this attribute, the table only shows in the default layout. Values: layout names (e.g., “table”, “tile”, “table,tile”)

  • mobile-layout="tile" Required for mobile default. Sets the automatic default layout for mobile devices. Values: “table” or “tile”

  • desktop-layout="tile" Required for desktop default. Sets the automatic default layout for desktop devices. Values: “table” or “tile”

Column Level:

  • layout-scope="table|tile|table,tile" Optional to restrict visibility. Makes the column visible only in specified layout(s). Default behavior if omitted is visible in both layouts. Values: “table”, “tile”, “table,tile”

  • tile-icon="icon-name" Optional for tile aesthetics. Adds a FontAwesome icon above the column value in tile mode. Values: FontAwesome icon names (e.g., “star”, “calendar”, “user”, “check-circle”)

  • use-as-title="true|false" Optional for tile structure. Designates this column as the main title of each tile. Values: “true” or “false” (default: “false”)

Why These Attributes Are Required

  • layouts: Without this, users cannot switch between views

  • mobile-layout: Ensures mobile devices show the most appropriate layout by default

  • desktop-layout: Sets the preferred desktop experience while maintaining user choice

Example

<table data="Event"
       mobile-layout="tile"
       desktop-layout="tile"
       layouts="table,tile">

    <column name="event_name"
            use-as-title="true"
            tile-icon="star">
        <field data="name"/>
    </column>

    <column name="description"
            layout-scope="table">
        <field data="description"/>
    </column>

    <column name="status"
            tile-icon="check-circle"
            layout-scope="tile">
        <field data="status"/>
    </column>

    <column name="date"
            tile-icon="calendar"
            layout-scope="table,tile">
        <field data="start_date"/>
    </column>
</table>