LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page
  • Overview
  • Basic Structure
  • Standard Attributes
  • label
  • Advanced Attributes
  • align-label
  • controls
  • content-direction
  • label-case
  • label-color
  • limit
  • empty-message
  • icon-position
  • id
  • show-if and hide-if
  • show-pagination
  • show-search
  • Component Methods
  • clearSearch
  • nextPage
  • previousPage
  • scrollIntoView
  • selectItem
  • selectItemByIndex
  • selectPage
  • setSearch
  1. Build your App
  2. UI Components
  3. All UI Components

list

Previousgrid ExamplesNextlist-item

Last updated 2 months ago

Overview

Version compatibility

list was introduced in version 4.29.0 of the JourneyApps Container.

It received several functional updates in version 4.84.0 of the JourneyApps Runtime.

The list UI component lists clickable items in a more visually prominent and customizable manner than pure text-based lists. list is a very versatile UI component and can be applied in many use cases, some common ones include:

  • A list of jobs, where each job is color-coded per its status

  • A set of photos taken, where the photo is displayed in thumbnail format on the item

  • A set of navigational links

  • A list of actions or workflow steps where each action could show a completed state

Basic Structure

main.view.xml
<var name="tickets" type="query:ticket" />

<list empty-message="No recent field tickets" controls="top" limit="5">
    <list-item query="tickets">
        <pills>
            <pill label="{date}" color="{rig.color}" />
        </pills>
        <header>{customer}</header> 
        <content>Pad: {pad_name} | Well: {well_name} | Rig: {rig}</content> 
        <footer>Total: ${ticket_total}</footer> 
        <accent label="Ticket Status: {status}" color="$:getStatusColor($object)" />
        <action on-press="selectTicket($selection)" />
    </list-item> 
</list>

list contains one or many list-item elements, which are either static (for basic usage) or dynamic (will repeat itself for each item in a query).

See the list-item documentation for further details:

Standard Attributes

label

Advanced Attributes

align-label

controls

Optional

Type: none | bottom | top | both

Default: none

Version compatibility

controls was introduced in version 4.84.0 of the JourneyApps Runtime.

Controls allow a user to search a list and, if the list is paginated, to navigate to the next, previous or a specific page. Controls are hidden by default, but can be positioned at the bottom and/or top of a list.

<list controls="top">
    <list-item>
        ...
    </list-item>
</list>

Positioning

Parameter
Description
Example

top

Positions controls at the top of the list

controls="top"

both

Positions controls at top AND bottom of the list

controls="both"

bottom

Positions controls at the bottom of the list

controls="bottom"

none

No controls

controls="none"

content-direction

Version compatibility

content-direction 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 direction of the component’s content. Typically this mirrors all elements within the component.

<columns>
    <column>
        <info>content-direction="left-to-right"</info>
        <list content-direction="left-to-right">
            <list-item icon="fa-plus-circle">
                <pills>
                    <pill label="Newly created users: 4" color="positive" />
                </pills>
                <header>Add User</header>
                <content>Add a new user to the selected district</content>
            </list-item>
        </list>  
    </column>
    <column>
        <info>content-direction="right-to-left"</info>
        <list content-direction="right-to-left">
            <list-item icon="fa-plus-circle">
                <pills>
                    <pill label="Newly created users: 4" color="positive" />
                </pills>
                <header>Add User</header>
                <content>Add a new user to the selected district</content>
            </list-item>
        </list> 
    </column>
</columns>

label-case

Version compatibility

label-case was introduced in version 4.86.1 of the JourneyApps Runtime.

label-color

Version compatibility

label-color was introduced in version 4.86.1 of the JourneyApps Runtime.

limit

Version compatibility

limit was introduced in version 4.84.0 of the JourneyApps Runtime.

Optional

Type: integer (minimum 2)

Default: none

The limit specifies the maximum number of list-items shown on a single page in a list. Once a limit is defined, the list becomes paginated and automatically computes how many pages there will be based on the total amount of items available from the query attribute.

Tip: When setting a limit ensure you also set the controls attribute. This will allow users to paginate and search as necessary.

<list controls="top" limit="8">
    <list-item>
        ...
    </list-item>
</list>

empty-message

Version compatibility

empty-message was introduced in version 4.84.0 of the JourneyApps Runtime.

Optional

Type: string

Default: unset

Text that is displayed inside the list when it is empty.

<list label="Technicians assigned to the job" empty-message="No technicians are currently assigned">
    <list-item query="assigned_technicians">
        ...
    </list-item>
</list>

icon-position

Version compatibility

icon-position was introduced in version 4.86.1 of the JourneyApps Runtime.

Note

id

show-if and hide-if

show-pagination

Version compatibility

show-pagination was introduced in version 4.89.0 of the JourneyApps Runtime.

Optional

Type: boolean

Default: true

show-search

Version compatibility

show-search was introduced in version 4.89.0 of the JourneyApps Runtime.

Optional

Type: boolean

Default: true

Component Methods

clearSearch

Programmatically clears the search value from the search box.

nextPage

Programmatically select the next page in a paginated list.

previousPage

Programmatically select the previous page in a paginated list.

scrollIntoView

Programmatically scroll until the list is visible in the view.

selectItem

Select a list-item from the list by its header text. This will trigger the list-item's on-press event.

main.view.xml
<list id="my-list">
    <list-item>
        <header>Manage Assets</header>
        <action on-press="$:manageAssets()" />
    </list-item>
    <list-item>
        <header>Manage Categories</header>
        <action on-press="$:manageCategories()" />
    </list-item>        
</list>
main.js
function select() {
    component.list({id: 'my-list'}).selectItem('Manage Assets');
}

selectItemByIndex

Select a list-item from the list by its index. This will trigger the list-item's on-press event. Note: Indexes begin at 1.

main.view.xml
<list id="my-list">
    <list-item>
        <header>Manage Assets</header>
        <action on-press="$:manageAssets()" />
    </list-item>
    <list-item>
        <header>Manage Categories</header>
        <action on-press="$:manageCategories()" />
    </list-item>        
</list>
main.js
function select() {
    component.list({id: 'my-list'}).selectItemByIndex(1);
    // Selects the "Manage Assets" list-item
}

selectPage

Programmatically select the a page in a paginated list by its page number.

setSearch

Programmatically enter a search value and triggers a search of the list.

icon-position specifies the icon position for all list-items in the list, whether the icon was defined per its or .

In a paginated list, and when are shown, the show-pagination attribute can be used to show or hide the pagination controls. This may be useful for lists that only have a single page.

When are shown, the show-search attribute can be used to show or hide the search box independent of the pagination controls.

The following component methods are available when an is assigned to the component and component.list({id:'my-id'}) is called from JS/TS:

💻
list-item
label
align-label
label-case
label-color
icon-position
id
show-if
hide-if
id
controls
controls
shorthand version
longhand version