stage

In this component, you add left and right elements, typically showing a start-and-end concept, such as flight schedules.

Configuration options

Some properties are common to all components, see Common component properties for the properties and their configuration options.

Core structure

left

Add content to the left element as text, or use an expression.

right

Add content to the right element as text, or use an expression.

title

Add titles for the text on the left and right elements.

Other options

icon

Add an icon to show in the centerElement. A list of icons is available. See Jigx icons for more information.

style

isWaitingSync - Will display a "Waiting sync" indicator (cloud with a line through it), a visual indicator showing that data has not been synced to the cloud yet.

subtitle

Add a subtitle to either the left or right element as text, or use an expression.

onPress

The action is triggered while pressing on the content in the stage. Use IntelliSense (ctrl+space) to see the list of available actions.

Consideration

component.stage can only be used in the component.expander or a list.

Examples and code snippets

Stage in expander

Examples:

See the full example using static data in GitHub. See the full example using dynamic data GitHub.

children:
  - type: component.expander
    options:
      header:
        centerElement:
          type: component.stage
          options:
            right:
              title: Boston
              subtitle: 11:30
            left:
              title: New York
              subtitle: 12:30

title: Stage
type: jig.default

children:
  - type: component.expander
    options:
      header:
        centerElement:
          type: component.stage
          options:
            right:
              title: =@ctx.datasources.trip-dynamic[3].from
              subtitle: =@ctx.datasources.trip-dynamic[3].board
            left:
              title: =@ctx.datasources.trip-dynamic[3].to
              subtitle: =@ctx.datasources.trip-dynamic[3].disembark
      children:
        - type: component.entity
          options:
            children:
              - type: component.entity-field
                options:
                  label: tbd
                  value: tbd

datasources:
  trip-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/flight-schedule
      query: |
        SELECT 
          id, 
          '$.airline', 
          '$.board', 
          '$.disembark', 
          '$.date', 
          '$.flight', 
          '$.from', 
          '$.fromabrv', 
          '$.gate', 
          '$.name', 
          '$.seat', 
          '$.to', 
          '$.toabrv' 
        FROM [default/flight-schedule]

Stage in list

Examples:

See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasources:

See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

title: Trip in list
type: jig.list

data: =@ctx.datasources.trip-static
item:
  type: component.stage
  options:
    right:
      title: =@ctx.current.item.to
      subtitle: =@ctx.current.item.time-to
    left:
      title: =@ctx.current.item.from
      subtitle: =@ctx.current.item.time-from

title: Stage in list
type: jig.list

data: =@ctx.datasources.trip-dynamic
item:
  type: component.stage
  options:
    right:
      title: =@ctx.current.item.from
      subtitle: =@ctx.current.item.board
    left:
      title: =@ctx.current.item.to
      subtitle: =@ctx.current.item.disembark

datasources:
  trip-static:
    type: datasource.static
    options:
      data:
        - id: 1
          from: Boston
          time-from: 11:30
          to: New York
          time-to: 12:30
        - id: 1
          from: Las Vegas
          time-from: 09:45
          to: London
          time-to: 19:00
        - id: 1
          from: Paris
          time-from: 13:15
          to: Prague
          time-to: 17:30

datasources:
  trip-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/flight-schedule
      query: |
        SELECT 
          id, 
          '$.airline', 
          '$.board', 
          '$.disembark', 
          '$.date', 
          '$.flight', 
          '$.from', 
          '$.fromabrv', 
          '$.gate', 
          '$.name', 
          '$.seat', 
          '$.to', 
          '$.toabrv' 
        FROM [default/flight-schedule]

Previousexpander Nexttitles

Last updated 6 months ago

Was this helpful?