stage

6min

A stage is a primary container for displaying various UI components on the left and right, typically showing a start-and-end concept. 
﻿
Stage in a list
﻿
﻿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.
Actions
﻿
onPress
The action is triggered while pressing on an item in the stage. Use IntelliSense (ctrl+space) to see the list of available actions. 
Consideration
component.stage can only be used in the component.list or an expander﻿.
﻿Examples and code snippets ﻿
List with stage
Stage for flights
﻿
This example shows list items with left and right elements and typically shows a start-and-end concept. Flight schedules are used in this example. However, you can choose a different icon for many different use cases.
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
Datasource:
See the full datasource for static data in GitHub. 
See the full datasource for dynamic data in GitHub. 
default-w-stage-list (static)
default-w-stage-list (dynamic)
datasources (static)
datasources (dynamic)
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: [email protected]
  - type: component.list
    options:
      data: [email protected]-schedule-static
      item: 
        type: component.stage
        options:
          icon: plane-1
          right:
            title: [email protected]
            subtitle: [email protected]
          left:
            title: [email protected]
            subtitle: [email protected]
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: =@ctx.user.displayName
  - type: component.list
    options:
      data: =@ctx.datasources.flight-schedule-static
      item: 
        type: component.stage
        options:
          icon: plane-1
          right:
            title: =@ctx.current.item.toabrv
            subtitle: =@ctx.current.item.board
          left:
            title: =@ctx.current.item.fromabrv
            subtitle: =@ctx.current.item.disembark
﻿
List with expander and stage as a Header
Stage in list with expanders
﻿
This example shows a list of expanders that have used the stage components as their header elements. 
Expanders are ideal for displaying additional information without having to navigate to another page.
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
Datasource:
See the full datasource for static data in GitHub. 
See the full datasource for dynamic data in GitHub. 
list-expander (static)
list-expander (dynamic)
datasources (static)
datasources (dynamic)
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: [email protected]
  - type: component.list
    options:
      data: [email protected]-schedule-dynamic
      item: 
        type: component.expander
        options:
          header:
            centerElement: 
              type: component.stage
              options:
                right:
                  title: [email protected]
                  subtitle: [email protected]
                left:
                  title: [email protected]
                  subtitle: [email protected]
          children:
            - type: component.entity
              options:
                children:
                  - type: component.field-row
                    options:
                      children:
                        - type: component.entity-field
                          options:
                            label: Boarding
                            value: [email protected]
                        - type: component.entity-field
                          options:
                            label: Destination
                            value: [email protected]
                  - type: component.field-row
                    options:
                      children:
                        - type: component.entity-field
                          options:
                            label: Board Time
                            value: [email protected]
                        - type: component.entity-field
                          options:
                            label: Disembark Time
                            value: [email protected]
                  - type: component.entity-field
                    options:
                      label: Passenger
                      value: [email protected]
                  - type: component.field-row
                    options:
                      children:
                        - type: component.entity-field
                          options:
                            label: Flight
                            value: [email protected]
                        - type: component.entity-field
                          options:
                            label: Gate
                            value: [email protected]
                        - type: component.entity-field
                          options:
                            label: Seat
                            value: [email protected]
            - type: component.location
              options:
                address: [email protected]
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Current User
            value: =@ctx.user.displayName
  - type: component.list
    options:
      data: =@ctx.datasources.flight-schedule-dynamic
      item: 
        type: component.expander
        options:
          header:
            centerElement: 
              type: component.stage
              options:
                right:
                  title: =@ctx.current.item.toabrv
                  subtitle: =@ctx.current.item.board
                left:
                  title: =@ctx.current.item.fromabrv
                  subtitle: =@ctx.current.item.disembark
          children:
            - type: component.entity
              options:
                children:
                  - type: component.field-row
                    options:
                      children:
                        - type: component.entity-field
                          options:
                            label: Boarding
                            value: =@ctx.current.item.from
                        - type: component.entity-field
                          options:
                            label: Destination
                            value: =@ctx.current.item.disembark
                  - type: component.field-row
                    options:
                      children:
                        - type: component.entity-field
                          options:
                            label: Board Time
                            value: =@ctx.current.item.board
                        - type: component.entity-field
                          options:
                            label: Disembark Time
                            value: =@ctx.current.item.disembark
                  - type: component.entity-field
                    options:
                      label: Passenger
                      value: =@ctx.current.item.name
                  - type: component.field-row
                    options:
                      children:
                        - type: component.entity-field
                          options:
                            label: Flight
                            value: =@ctx.current.item.flight
                        - type: component.entity-field
                          options:
                            label: Gate
                            value: =@ctx.current.item.gate
                        - type: component.entity-field
                          options:
                            label: Seat
                            value: =@ctx.current.item.seat
            - type: component.location
              options:
                address: =@ctx.current.item.to
﻿
﻿

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.