grid

Overview

The grid UI component gives developers more control over the layout of UI components in a view. This is useful when there is a need to customize the width of UI components respective to other components on the view (where previously columns kept each component’s width equal). grid could also be used to layout components in a way that is similar to layout to icons on a phone’s homescreen. Another use case is to keep more content visible on the screen, where previously column content overflowed and became scrollable.

Version compatibility

grid was introduced in version 4.85.0 of the JourneyApps Runtime.

A grid contains cells to specify the size and position of UI components:

pagecell

Basic Example

main.view.xml

<grid>
    <cell>
        <heading>Cell 1</heading>
        <display-image src="images/example-corp-main-view-image-001.png" />
    </cell>
    <cell>
        <heading>Cell 2</heading>
        <text-input label="First name" bind="first_name" required="false" />
    </cell>
    <cell>
        <heading>Cell 3</heading>
        <capture-photo label="Photo of Person" bind="photo" source="any" resolution="small" downloadable="true" />
    </cell>
    <cell column-span="2">
        <heading>Cell 4</heading>
        <text-input label="First name" placeholder="Enter first name" bind="first_name" required="false" />
        <button label="Submit" icon="fa-arrow-right" icon-position="right" />
    </cell>
    <cell>
        <heading>Cell 5</heading>
        <object-dropdown label="Country of residence" placeholder="Select a country" query="countries" bind="selected_country" required="false" />
    </cell>
    <cell column-span="2">
        <heading>Cell 6</heading>
        <display-coordinates id="current-location" label="Current location" bind="current_location" allow-zoom="true" allow-dragging="true">
            <marker label="You are here" bind="marker" icon="fa-home" />
        </display-coordinates>
    </cell>
</grid>

Have a look at some additional examples here:

📖pagegrid Examples

Limitations

Nesting a grid inside an object-repeat is not currently supported.

Standard Attributes

None

Advanced Attributes

`column-count`

Optional

Type: integer

Default: Is automatically determined based on the minimum allowed column width.

Specify the number of columns that the grid will generate.

Note:

If column-count has been specified and the columns do not fit inside the screen (such as on small devices) then the grid will become horizontally scrollable.
If column-count has not been specified, i.e. the column count is automatically determined, the grid component will try and reduce the number of columns to adhere to the minimum allowed column width as the screen size is reduced.

main.view.xml

<grid column-count="3" >
    <cell>
        <text-input label="First name" bind="first_name" required="false" />
        <button label="Button" />
    </cell>
</grid>

`column-min-width`

Optional

Type: integer

Default: 250 px

Specify the minimum allowed width (in pixels) for the grid’s columns.

main.view.xml

<grid column-min-width="1000" >
    <cell>
        <text-input label="First name" bind="first_name" required="false" />
        <button label="Button" />
    </cell>
</grid>

`column-order`

Version compatibility

column-order was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: left-to-right| right-to-left

Default: left-to-right

Specify the order of the grid's columns.

main.view.xml

<info>column-order="left-to-right"</info>
<grid column-order="left-to-right" column-count="4">
    <cell>
        <heading>Cell 1</heading>
    </cell>
    <cell>
        <heading>Cell 2</heading>
    </cell>
    <cell>
        <heading>Cell 3</heading>
    </cell>
    <cell>
        <heading>Cell 4</heading>
    </cell>
</grid>

<info>column-order="right-to-left"</info>
<grid column-order="right-to-left" column-count="4">
    <cell>
        <heading>Cell 1</heading>
    </cell>
    <cell>
        <heading>Cell 2</heading>
    </cell>
    <cell>
        <heading>Cell 3</heading>
    </cell>
    <cell>
        <heading>Cell 4</heading>
    </cell>
</grid>