All View Components → columns

Select a view component to see details on how it works:

columns

A column is a component that can contain other components, that splits the screen into two columns, to make more efficient use of the available space on large screens, for example, tablets.

On smaller screens (i.e. smartphones as opposed to tablets), columns have no effect — the various components inside of them are rendered below each other as if they were not defined in columns.

Tutorial

The Tablet Apps section of the How to Build Apps tutorial provides more detail on the components that JourneyApps provides specifically for tablet apps, including columns.

Read It Now

For more information on how columns are handled with different screen orientations (portrait and landscape) and different device sizes, refer to the Form Factors and Orientations section of the How to Build Apps tutorial.

Example

Note that you can place any view components inside the columns. The first <column> will always be the left column and the second <column> will be the right column.

Code in View XML:

<columns>
    <column>
        <html src="main-screen.html"/>
    </column>
    <column>
        <heading>Welcome to the Snag List App</heading>
        <info>Open items that have not yet been attended to are shown below:</info>

        <list bind="selected_item" collection="all_items" type="static" required="true" />

        <heading>Please Select an Option</heading>
        <menu>
            <button label="Add New Item" icon="icons/add_new.png" subtext="Add a new snag item" />
            <button label="View Selected Item" icon="icons/view.png" subtext="View item description and photo" />
            <button label="Delete Selected Item" icon="icons/delete.png" subtext="Permanently delete item" />
        </menu>
    </column>
</columns>

Appearance on mobile device:

Configuration

Columns do not have any configurable options.