stage

a stage is a primary container for displaying various ui components on the left and right, typically showing a start and end concept configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list 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 docid\ kcd yl jqeuthf7cpfe91 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 docid\ mnozmfj2412 jmq1o2vut examples and code snippets examples and code snippets list with stage 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) 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 default w stage list (dynamic) 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 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 datasources (static) datasources flight schedule static type datasource static options data \ id 1 airline get stuff done airlines board 11 30 disembark 12 30 date 30 jul flight a 0123 from hawaii fromabrv hnl gate 16 name july nelson seat 12f to new york toabrv jfk image https //images unsplash com/photo 1436491865332 7a61a109cc05?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxzzwfyy2h8mxx8cgxhbmv8zw58mhx8mhx8\&auto=format\&fit=crop\&w=500\&q=60 \ id 2 airline get stuff done airlines board 08 10 disembark 10 45 date 30 jul flight a 5738 from phoenix fromabrv phx gate 2 name nora gordon seat 27a to alabama toabrv mcz image https //images unsplash com/photo 1464037866556 6812c9d1c72e?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxzzwfyy2h8nnx8cgxhbmv8zw58mhx8mhx8\&auto=format\&fit=crop\&w=500\&q=60 \ id 3 airline get stuff done airlines board 14 00 disembark 19 59 date 30 jul flight a 1123 from iowa fromabrv dsm gate 15 name tracy matthews seat 13f to ohio toabrv day image https //images unsplash com/photo 1488085061387 422e29b40080?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxzzwfyy2h8mtn8fhbsyw5lfgvufdb8fdb8fa%3d%3d\&auto=format\&fit=crop\&w=500\&q=60 datasources (dynamic) datasources flight schedule 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] list with expander and stage as a header 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) 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 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 list expander (dynamic) 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 datasources (static) datasources flight schedule static type datasource static options data \ id 1 airline get stuff done airlines board 11 30 disembark 12 30 date 30 jul flight a 0123 from hawaii fromabrv hnl gate 16 name july nelson seat 12f to new york toabrv jfk image https //images unsplash com/photo 1436491865332 7a61a109cc05?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxzzwfyy2h8mxx8cgxhbmv8zw58mhx8mhx8\&auto=format\&fit=crop\&w=500\&q=60 \ id 2 airline get stuff done airlines board 08 10 disembark 10 45 date 30 jul flight a 5738 from phoenix fromabrv phx gate 2 name nora gordon seat 27a to alabama toabrv mcz image https //images unsplash com/photo 1464037866556 6812c9d1c72e?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxzzwfyy2h8nnx8cgxhbmv8zw58mhx8mhx8\&auto=format\&fit=crop\&w=500\&q=60 \ id 3 airline get stuff done airlines board 14 00 disembark 19 59 date 30 jul flight a 1123 from iowa fromabrv dsm gate 15 name tracy matthews seat 13f to ohio toabrv day image https //images unsplash com/photo 1488085061387 422e29b40080?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxzzwfyy2h8mtn8fhbsyw5lfgvufdb8fdb8fa%3d%3d\&auto=format\&fit=crop\&w=500\&q=60 datasources (dynamic) datasources flight schedule 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]