list-item

the list item component serves as the child component whenever any list related item has been called, as discussed in the jig list docid 5uifnxycbeewhizctnjqm and list docid\ plkhukmyjaepjjfxmz9aq sections the component determines how the list items are returned, allowing you to customize the data returned and add ui elements to the lists 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 title add a title for the list item you can use an expression and datasource to set the title the title must fit the line, as the text will not wrap to the next line other options color the color of the list item changes based on conditions the first evaluating to true will be used description the subtitle or description should be displayed with the list item title you can format the text of these properties if you select the "text with format" option in the builder help (ctrl + space) divider set the space between two items in the list none no divider is shown between items set by default transparent sets a 1pt margin between two items solid displays a colored line between two items when the list item is contained in a card, this property will be ignored iscontained used to style the list item, true wraps the list item in a card, while false displays the item with no styling this property can be used with vertical and horizontal lists leftelement set an element to the left of the list the following elements are available avatar checkbox icon image progress numberoflines specify the maximum number of lines for the description and subtitle properties property values are dynamic displays all lines of text numerical value (e g , 2 ) limits the description and subtitle to the specified number of lines progress add a colorful visualization (background color of your choice) of the list item's progress the color displays from left to right, and the range of the allowed values is from 0 to 1 rightelement set an element to the right of the list the following elements are available amountcontrol badge can be a solid colored badge or a badge with a number in it badges always use the primary color button checkbox icon switch value when using text , the option to change its color is available rating displays a rating as either a numerical value or a percentage this property is highly flexible, with options to configure the ratingicon , color , and accompanying descriptive text by default, the rating property has only one icon showing a rating star in the primary color value rating with numerical value the value of the rating, which can be a simple number the number of icons is calculated based on this value unless overridden in the icon configuration configuring the current and maximum values, shows the value as a fraction, for example 7/10 percentage rating with a percentage the percentage value for the rating, where the value ranges between 0 and 1, for example 0 75 is 75% ratingicon by default the rating star icon in the primary color is displayed icon add an icon to represent the rating a list of icons is available see jigx icons docid\ kcd yl jqeuthf7cpfe91 for more information color sets the color of the icon, choose a color from the provided color palette default color is primary if the property is not specified in the yaml see the list of available colors in jigx color palette docid\ alxcnrj rgickyu94iyws current and maximum values where maximum is the number of icons to display and current the number of icons to color text add a descriptive text that displays next to the rating ratings can set up in the following ways example of value for a product rating rating value 4 5 text based on 1,200 reviews example of a user rating shown in a percentage rating percentage 0 75 text expectations exceeded example of value rating showing 2 5/5 as a rating with single star icon rating value current 2 5 maximum 5 ratingicon icon rating star subtitle the subtitle or description should be displayed together with the title on the list item you can format the text of these properties if you select the text with format option in the intellisense (ctrl + space) tags a set of descriptive keywords appear at the bottom of each list item, helping to categorize and provide context unlike labels, multiple tags can be shown tags support up to two lines; if the tags exceed this space, a +1 indicator is added to represent the number of hidden tags for example, if two tags are hidden, +2 will display at the end of the list text the text content displayed within the tag color sets the color of the tags, choose a color from the provided color palette the default is primary see the list of available colors in jigx color palette docid\ alxcnrj rgickyu94iyws tags can be set up in three ways using a dynamic expression from a datasource tags =@ctx datasources product tags\[product = @ctx current item id] {"text"\ tags, "color"\ color} using a dynamic expression from a list item tags =@ctx current item tags {"text" $, "color" "primary"} using static, predefined tags tags \ text =@ctx current item rating > 0 75 ? 'great' color positive \ text =@ctx current item rating >= 0 5 ? 'good' color warning \ text =@ctx current item rating < 0 5 ? 'bad' color negative actions onpress the action is available with the swipeable action and is triggered when pressing an item in the list use intellisense (ctrl+space) to see the list of available actions swipeable use the swipeable property to add the onpress action the action will appear and become pressable by swiping the list item to the left or right state configuration key notes =@ctx current state amount checked applies to a list, list item, product item, and stage components list's data is an array of records the =@ctx current state is the state of the current object in the array =@ctx component state amount checked state is the variable of the component =@ctx solution state activeitemid now global state variable that can be used throughout the solution considerations you can use a list item outside of the list component this allows configuring a single list item with all list item features, such as left and right elements and swipe actions, without requiring a full list these items typically use static values rather than a datasource see the list item outside a list code example below the functionality is available in the following components jig default docid\ rtomyji3uoxiqxdultz3o children custom components (alpha) docid\ ovpg8p8kzterpmy2aqn3a children expander docid\ mnozmfj2412 jmq1o2vut card docid\ jfrmiisv6l bomdftpshj section docid\ g1wjik9jylkzsddrrzi8h examples and code snippets examples and code snippets simple list this example displays the list in its most basic form without configuring additional properties or elements scroll down for more examples of how you can implement lists examples see the full example using static data local and global 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 simple list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description simple list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item area datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc simple list with dividers this example shows only a slight variation from the previous example, by having a divider solid properly configured 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 list w divider (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description divider solid list w divider (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item area divider solid datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with colored progress bars this example showcases two additional properties that have been configured, the progress and colors you can use the data along with some expressions to manipulate data to create meaningful list displays 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 progress list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description progress =@ctx current item hourlyrate/120 color \ when =@ctx current item materials color primary \ when =@ctx current item materials = 'true' color color14 \ when =@ctx current item materials = 'false' color color7 progress list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description progress =($number(@ctx current item hourlyrate) / 100) color \ when =@ctx current item indoor color primary \ when =@ctx current item indoor = 'true' color color14 \ when =@ctx current item indoor = 'false' color color7 datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with charts this example shows pie charts displayed on a list this is great for a visual representation of information pie chart 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 pie chart list (static) children \ type component list options \# data configured to use datasource (static) data =@ctx datasources components item type component pie chart options chart title text =@ctx current item title verticalalign center subtitle text =@ctx current item subtitle verticalalign center width 100 height 100 legend ishidden true series \ data =@ctx current item data layout pie pie chart list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources pie chart list dynamic item type component pie chart options chart title text =@ctx current item title verticalalign center subtitle text =@ctx current item subtitle verticalalign center width 100 height 100 legend ishidden true series \ data =@ctx current item data layout pie color =@ctx current item color datasources (static) datasources components type datasource static options data \ title 25% subtitle as data \ 25 \ y 75 color transparent \ title 45% subtitle brno data \ 45 \ y 55 color transparent \ title 33% subtitle prague data \ 33 \ y 67 color transparent datasources (dynamic) datasources pie chart list dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/charts query | select id, json extract(data, '$ seriesy') as y, '$ color', '$ category', json extract(data, '$ seriesx') as x, '$ subtitle', '$ title' from \[default/charts] where '$ category' = "pie chart list" this example shows bar charts displayed on a list as a visual representation of information bar chart example 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 bar chart list (static) children \ type component list options \# data configured to use datasource (static) data =@ctx datasources list bar item type component bar chart options legend ishidden true chart title text =@ctx current item title height 260 isanimated false yaxis min 0 labels format numberstyle currency currency usd compactdisplay short notation compact tickamount 5 isfirsttickhidden false isfirstlabelhidden false series \ data =@ctx current item data color =@ctx current item color bar chart list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources finance charts \# ishorizontal true item type component bar chart options yaxis max 2000 min 200 xaxis categories =@ctx datasources finance charts x series \ data =@ctx datasources finance charts y color =@ctx datasources finance charts color datasources (static) datasources list bar type datasource static options data \ title quarterly overview 2019 color color1 data \ x q1 y 1851 \ x q2 y 1483 \ x q3 y 1250 \ x q4 y 1700 \ title quarterly overview 2020 color color2 data \ x q1 y 1343 \ x q2 y 1832 \ x q3 y 1932 \ x q4 y 2012 \ title quarterly overview 2021 color color3 data \ x q1 y 1932 \ x q2 y 1734 \ x q3 y 2129 \ x q4 y 2358 datasources (dynamic) datasources finance charts type datasource sqlite options provider data provider dynamic entities \ entity default/finances \ entity default/finance review dynamic query | select json extract(b data, '$ title') as title, json extract(b data, '$ subtitle') as subtitle, json extract(b data, '$ year') as year, json extract(a data, '$ amount') as y, json extract(a data, '$ date') as x, json extract(a data, '$ financeid') as financeid, json extract(a data, '$ quarterid') as quarterid, json extract(a data, '$ share') as share from \[default/finances] a left join \[default/finance review dynamic] b on json extract(a data, '$ year') = json extract(b data, '$ year') list with avatars this example shows a list of avatars grouped by titles and returns all avatars in the array in this example, the static datasource has been configured to use the uri and text properties that are required for avatars in a list this makes it easy to configure in the {{jig}} by simply using the expression avatars =@ctx current item people the following expression can be used if your datasource uses different names for uri and text , for example avatars =@ctx current item people {"text"\ name,"uri"\ image}\[] examples see the full example using static data in github list avatars (static) # data configured to use datasource (static) data =@ctx datasources employee groups item type component list item options title =@ctx current item title subtitle = 'group id '& ' ' & @ctx current item groupid avatars =@ctx current item people datasources (static) datasources employee groups type datasource static options data \ id 1 title developers groupid 101 people \ uri https //images unsplash com/photo 1548449112 96a38a643324?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=774\&q=80 text john smith \ uri https //images unsplash com/photo 1573497019940 1c28c88b4f3e?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=774\&q=80 text mary gomez \ id 2 title ux design groupid 102 people \ uri https //images unsplash com/photo 1546961329 78bef0414d7c?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=774\&q=80 text july nelson \ id 3 title project management groupid 103 people \ uri https //images unsplash com/photo 1591084728795 1149f32d9866?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=928\&q=80 text karl fisher \ uri https //images unsplash com/photo 1542740348 39501cd6e2b4?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=774\&q=80 text lucy williams list with left avatar this example showcases the list of items with an avatar to the left 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 left avatar list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element avatar text $substring($substringbefore(@ctx current item service, " "), 1, 1) & $substring($substringafter(@ctx current item service, " ") , 1, 1) uri =@ctx current item illustration left avatar list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item time & ' minutes for task completion' leftelement element avatar text $substring($substringbefore(@ctx current item service, " "), 1, 1) & $substring($substringafter(@ctx current item service, " ") , 1, 1) uri =@ctx current item illustration datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with left checkboxes this example showcases a list with checkboxes to the left this can be configured with preset checked values or can just be empty for the user to select themselves examples see the full example using static data in github https //github com/jigx com/jigx samples/blob/main/samples/jigx samples/jigs/jc avatar/static data/avatar on widget/jw avatar on widget jigx https //github com/jigx com/jigx samples/blob/main/samples/jigx samples/jigs/components/list item/static data/list with left elements/list with left checkbox sd jigx see the e full example using dynamic data in github https //github com/jigx com/jigx samples/blob/main/samples/jigx samples/jigs/jc avatar/dynamic data/avatar on widget jigx https //github com/jigx com/jigx samples/blob/main/samples/jigx samples/jigs/components/list item/dynamic data/list with left elements/list with left checkbox dd jigx specifying initialvalue will determine the value when the list is loaded, however, specifying the value presets the value itself the latter is handy when you want to display details that don't require much intervention from the user or if you wish to make it easier and faster so they only have to review the current selections for instance datasources see the full datasource for static data in github see the full datasource for dynamic data in github left checkbox list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element checkbox initialvalue =(@ctx current item materials) = true ? true \ false left checkbox list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element checkbox initialvalue =(@ctx current item indoor) = 'true' ? true \ false datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with the left icons this example displays icons to the left of the 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 left icon list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item time & 'minutes for task completion' leftelement element icon icon =(@ctx current item materials) = true ? 'home' 'car garage' left icon list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item time & 'minutes for task completion' leftelement element icon icon =(@ctx current item indoor) = "true" ? 'home' 'car garage' datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with the left image this example displays a list with an image to left of the list item for visual representation 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 left image list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element image text =@ctx current item service uri =@ctx current item image left image list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element image text =@ctx current item service uri =@ctx current item image datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with left progress this example displays a list with visual progress elements to the left of the list items 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 left progress list dynamic (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element progress title time value =@ctx current item time/120 left progress list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element progress title time value =$number(@ctx current item time)/120 datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc swipeable list (left) this example shows using the swipeable action to access the onpress action as well as setting up a primary and secondary action 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 swipeable list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element icon icon =(@ctx current item materials = true ? 'home' 'car garage') rightelement element value text ='$ ' & $number(@ctx current item hourlyrate) swipeable left \ onpress type action go to options linkto action list onpress label primary action icon alarm bell color primary \# note that the secondary action is only for demo purposes, you can stop at the primary action \ onpress type action go to options linkto action list onpress label secondary action icon alert triangle color warning swipeable list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element icon icon =(@ctx current item indoor = "true" ? 'home' 'car garage') rightelement element value text =(@ctx current item hourlyrate) != 'na' ? '$ ' & $number(@ctx current item hourlyrate) & ' p/hr' '$ ' & $number(@ctx current item onceoffrate) & ' once off' swipeable left \ onpress type action go to options linkto action list onpress label primary action icon alarm bell color primary \# note that the secondary action is only for demo purposes, you can stop at the primary action \ onpress type action go to options linkto action list onpress label secondary action icon alert triangle color warning datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with the right amount control examples see the full example of amount control options in github 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 amount control list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description style isdisabled =@ctx current state amount = 5 rightelement element amount control value 1 step 1 minimum 2 maximum 5 amount control (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description style isdisabled =@ctx current state amount = 5 rightelement element amount control value =$number(@ctx current item quantity) step 1 minimum 1 maximum 5 onchange type action execute entity options provider data provider dynamic entity default/cleaning services method update data id =@ctx current item id quantity =@ctx current state amount datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with the right badges this example shows badges that are displayed based on a certain input badges always use the primary color you cannot change the color of the badge 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 list badges (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element badge ishidden =(@ctx current item materials) = true ? true \ false list badges (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element badge ishidden =(@ctx current item indoor) = 'true' ? true \ false datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with right numbered badges in this example a list shows the work priorities and how many tasks there are for each priority the rightelement uses a badge with an expression the count is performed in the datasource query rather than in the expression the expression calls the taskcount from the datasource badges always use the primary color you cannot change the color of the badge examples see the example in github default w number badge list jigx title team task priorities list description a list displaying priorities, with a numbered badge for each type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1569098644584 210bcd375b59?w=500\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mjv8fhdvcmslmjb0yxnrc3xlbnwwfhwwfhx8ma%3d%3d children \ type component list options data =@ctx datasources team tasks maximumitemstorender 8 item type component list item options color \ when =@ctx current item priority = 'urgent' color negative \ when =@ctx current item priority = 'medium' color primary \ when =@ctx current item priority = 'low' color color6 \ when =@ctx current item priority = 'closed' color positive \ when =@ctx current item priority = 'high' color warning title =@ctx current item priority divider solid leftelement element icon icon =@ctx datasources priority\[name = @ctx current item priority] icon isduotone true rightelement \# the badge will display with the number of priorities per priority, \# the count is configured in the datasource query element badge value =@ctx current item taskcount datasource datasources team tasks type datasource sqlite options provider data provider dynamic entities \ entity default/tasks query | select id, json extract(task data, '$ taskassignee') as taskassignee, json extract(task data, '$ taskname') as taskname, json extract(task data, '$ taskcost') as taskcost, json extract(task data, '$ taskid') as taskid, json extract(task data, '$ taskstatus') as taskstatus, json extract(task data, '$ team') as team, json extract(task data, '$ profile') as profile, json extract(task data, '$ priority') as priority, count(json extract(task data, '$ taskid')) as taskcount from \[default/tasks] as task group by priority order by priority desc priority type datasource static options data \ id 1 name closed icon check 2 alternate \ id 2 name urgent icon double exclamation mark 2 formatting \ id 3 name high icon arrow double up \ id 4 name low icon arrow double down \ id 4 name medium icon equal math symbol circle list with right buttons this example shows a list with actionable buttons 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 list with right button (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element button title press me onpress type action go back list with right button (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element button title press me onpress type action go back datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with the right icons this example shows icons to the right of the list items 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 right icon list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element icon icon =(@ctx current item materials = true ? 'attachment' 'alert triangle') right icon list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item time & 'minutes for task completion' rightelement element icon icon =(@ctx current item indoor = "true" ? 'home' 'car garage') datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with the right switch this example displays a list with switches/toggle functionality based on a certain input 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 switch list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element switch initialvalue =(@ctx current item materials = true ? true\ false) switch list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element switch initialvalue =(@ctx current item indoor = 'true' ? true\ false) datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with the right value this example shows the right values on a list populated dynamically based on input, and additional configuration using expressions were used to concatenate values 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 list with right elements (static) title list with right value (static data) description a list to display values in list items type jig list icon task list header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1534398079543 7ae6d016b86a?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxzzwfyy2h8n3x8cmvwywlyc3xlbnwwfhwwfhw%3d\&auto=format\&fit=crop\&w=900\&q=60 \# data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element value text ='$ ' & @ctx current item hourlyrate list with right elements (dynamic) title list with right value (dynamic data) description a list to display values in list items type jig list icon task list header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1618038483079 bfe64dcb17f1?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=870\&q=80 \# data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description rightelement element value text =(@ctx current item hourlyrate) != 'na' ? '$ ' & $number(@ctx current item hourlyrate) & ' p/hr' '$ ' & $number(@ctx current item onceoffrate) & ' once off' datasource (static) type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasource (dynamic) type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc swipeable list (right) this example shows the swipeable action configured to swipe right for each list item we show how to set up a primary and secondary action 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 swipable right list (static) # data configured to use datasource (static) data =@ctx datasources repair services static item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element icon icon =(@ctx current item materials = true ? 'home' 'car garage') rightelement element value text ='$ ' & @ctx current item hourlyrate swipeable right \ onpress type action go to options linkto action list onpress label primary action icon alarm bell color primary \# note that the secondary action is only for demo purposes, you can stop at the primary action \ onpress type action go to options linkto action list onpress label secondary action icon alert triangle color warning swipable right list (dynamic) # data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item description leftelement element icon icon =(@ctx current item indoor = "true" ? 'home' 'car garage') rightelement element value text =(@ctx current item hourlyrate) != 'na' ? '$ ' & $number(@ctx current item hourlyrate) & ' p/hr' '$ ' & $number(@ctx current item onceoffrate) & ' once off' swipeable right \ onpress type action go to options linkto action list onpress label primary action icon alarm bell color primary \# note that the secondary action is only for demo purposes, you can stop at the primary action \ onpress type action go to options linkto action list onpress label secondary action icon alert triangle color warning datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with active item this allows you to see when you are interacting with a specific list item whilst interacting, the list item changes slightly making it clear which item you are interacting with 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 active item 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 configured to use datasource (static) data =@ctx datasources repair services static hasactiveitem true item type component list item options title =@ctx current item service subtitle =@ctx current item time & ' mins' leftelement element image text '' uri =@ctx current item image rightelement element value text ='$ ' & @ctx current item hourlyrate & ' p/hr' onpress type action set state options state =@ctx solution state hasactiveitem value true active item list (dynamic) children \ type component entity options children \ type component entity field options label current user value =@ctx user displayname \ type component list options hasactiveitem true \# data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic item type component list item options title =@ctx current item service subtitle =@ctx current item time & ' mins' leftelement element image text '' uri =@ctx current item image rightelement element value text =(@ctx current item hourlyrate) != 'na' ? '$ ' & $string(@ctx current item hourlyrate) & ' p/hr' '$ ' & $string(@ctx current item onceoffrate) & ' once off' onpress type action set state options state =@ctx solution state hasactiveitem value true datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list with sections this functionality allows you to split your lists into meaningful sections 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 section list (static) children \ type component list options sections \ title services incl materials \# data configured to use datasource (static) data =@ctx datasources repair services static\[materials=true] \ title services excl materials \# data configured to use datasource (static) data =@ctx datasources repair services static\[materials=false] item type component list item options title =@ctx current item service subtitle =@ctx current item description label title =@ctx current item time & ' mins' section list (dynamic) children \ type component entity options children \ type component entity field options label current user value =@ctx user displayname \ type component list options sections \ title indoor services \# data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic\[indoor='true'] \ title outdoor services \# data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic\[indoor='false'] item type component list item options title =@ctx current item service subtitle =@ctx current item time & ' mins' leftelement element image text '' uri =@ctx current item image rightelement element value text =(@ctx current item hourlyrate) != 'na' ? '$ ' & @ctx current item hourlyrate & ' p/hr' '$ ' & @ctx current item onceoffrate & ' ' & 'once off' datasources (static) datasources repair services static type datasource static options data \ id 1 description installation or repairs for doors doors to be provided by client hourlyrate 70 illustration http //clipart library com/data images/436224 png image https //images unsplash com/photo 1500281781950 6cd80847ebcd?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1469\&q=80 materials false service door installation/repair time 60 \ id 2 description repairs to door handles hourlyrate 40 illustration http //clipart library com/img1/1332215 jpg image https //images unsplash com/photo 1538766017398 415434a31a5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service door handle/lock repairs time 60 \ id 3 description installation or repairs of tiled surfaces tiles have to be provided by client hourlyrate 110 illustration http //clipart library com/images/kcknbzbxi jpg image https //images unsplash com/photo 1523413184730 e85dbbd04aba?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=687\&q=80 materials false service tile installation/repair time 120 \ id 4 description installation or repairs of dry wall surfaces hourlyrate 80 illustration http //clipart library com/img1/505759 jpg image https //images unsplash com/photo 1628901551715 7234d14fb7a0?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials true service drywall installation/repair time 120 \ id 5 description repairs to bathroom rails, toilets, etc hourlyrate 90 illustration http //clipart library com/new gallery/53 530190 black and white toilet png png image https //images unsplash com/photo 1585313647787 7a061b5a85a6?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1423\&q=80 materials true service bathroom repairs time 60 \ id 6 description painting as required paint and tools not provided hourlyrate 70 illustration http //clipart library com/img/853166 jpg image https //images unsplash com/photo 1562259949 e8e7689d7828?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1431\&q=80 materials false service painting services time 120 \ id 7 description repairs to fences tools and items not included hourlyrate 90 illustration http //clipart library com/img/18345 gif image https //images unsplash com/photo 1583805978118 ba9a81ac1399?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service fence installation/repair time 60 \ id 8 description removal of graffiti and painting paint and brushes not included in cost hourlyrate 110 illustration http //clipart library com/images/6cy5al5gi jpg image https //images unsplash com/photo 1581850518616 bcb8077a2336?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 materials false service removal of graffiti time 120 \ id 9 description repairs to cupboard doors hourlyrate 60 illustration http //clipart library com/img1/1605140 jpg image https //images unsplash com/photo 1522791465802 47616431a4cf?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1451\&q=80 materials true service cupboard door repairs time 60 \ id 10 description plumbing issues and repairs hourlyrate 90 illustration http //clipart library com/images k/plumbing silhouette/plumbing silhouette 6 png image https //images unsplash com/photo 1591804774220 c1db3673d05b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1074\&q=80 materials true service plumbing time 60 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list items contained in a card this example use the iscontained property set to true to style each item by wrapping it in a card the code sample below is for a vertical list you can also wrap list items in a card for a horizontal list examples see the full example in github list item in a card list item contained jigx title list with items wrapped in a card description a list displaying images on list items styled in a card type jig list icon task list \# change the list to a horizontal list by uncommenting the ishorizontal line below \# ishorizontal true header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1581244277943 fe4a9c777189?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1632\&q=80 data =@ctx datasources repair services static item type component list item options iscontained true title =@ctx current item service subtitle =@ctx current item description leftelement element image text =@ctx current item service uri =@ctx current item image list item with ratings as a value this example uses the basic rating configuration to display a value with accompanying text by default, the rating shows a single star in the primary color examples see the full example in github list item rating value jigx title list of cleaning services with ratings type jig default description a list displaying ratings with values icon notes paper approve header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1529220502050 f15e570c634e?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1829\&q=80 children \ type component list instanceid rating list options data =@ctx datasources cleaning services static item type component list item options iscontained true title =@ctx current item service subtitle =@ctx current item area label title =(@ctx current item status = "indoor" ? 'indoor' 'outdoor') leftelement element image text =$substring($substringbefore(@ctx current item service, " "), 1, 1) & $substring($substringafter(@ctx current item service, " ") , 1, 1) uri =@ctx current item image \# rating uses a value from the datasource with accompanying text \# by default, a single rating star icon in the primary color is shown rating value =@ctx current item rating text =@ctx current item ratingtext cleaning services static (datasource) datasources cleaning services static type datasource static options data \ area bathroom category withrate description steam cleaning and disinfecting of the bathroom in its totality provision of fresh towels hourlyrate 30 illustration https //clipart library com/newimages/bathroom clip art 15 jpg image https //images unsplash com/photo 1646592472335 fa6be8e9bc7c?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1471\&q=80 onceoffrate null service bathroom deep clean status indoor time 90 ratingtext good rating 7 \ area garden category null description taking care of general gardening to provide an immaculate first impression hourlyrate null illustration https //clipart library com/images/6tr8brjtk jpg image https //images unsplash com/photo 1416879595882 3373a0480b5b?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 onceoffrate 100 service gardening status outdoor time 120 ratingtext poor rating 3 \ area general category null description cleaning and streak removal of external windows hourlyrate 35 illustration https //clipart library com/img1/872145 png image https //images unsplash com/photo 1650538250295 6ef68d7ae1f4?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 onceoffrate null service window cleaning external status outdoor time 60 ratingtext excellent rating 9 \ area driveway category null description car wash including vacuum hourlyrate null image https //images unsplash com/photo 1520340356584 f9917d1eea6f?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1631\&q=80 onceoffrate 50 service car washing status outdoor time 60 ratingtext recommended rating 8 \ area laundry category null description provision of laundry services by removal of laundry and return of laundry includes a surcharge for delivery hourlyrate null image https //images unsplash com/photo 1637795065412 eed4c565db78?w=800\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mtl8fgxhdw5kcnklmjbzzxj2awnlfgvufdb8fdb8fhww onceoffrate 110 service offsite laundry services status indoor time 120 ratingtext excellent rating 8 5 \ area laundry category null description provision of laundry services making use of client's machines note that where this has been booked, but machines are not available, this will automatically be adjusted to offsite laundry services hourlyrate null image https //images unsplash com/photo 1626806819282 2c1dc01a5e0c?w=800\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mtv8fgxhdw5kcnklmjbyb29tfgvufdb8fdb8fhww onceoffrate 110 service onsite laundry services status indoor time 120 ratingtext not satisfied \ area lounge category null description maintain your upholstery (chair, couch and seat) in pristine condition we use only the most delicate clearning methods hourlyrate 40 image https //images unsplash com/photo 1612696733290 a2a26ce8131c?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 onceoffrate null service upholstery cleaning status indoor time 60 ratingtext poor rating 5 \ area pool category null description cleaning of pool, including chemical treatments, sweeping and proper flush hourlyrate null image https //images unsplash com/photo 1562844275 857f6e7c429e?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1603\&q=80 onceoffrate 40 service pool cleaning status outdoor time 45 ratingtext excellent service rating 9 list item with ratings as a percentage this example uses the simplest configuration of the rating property to display a percentage by default the rating shows a star in the primary color examples see the full example in github list with rating percentage jigx title manufacturing quality control description list with a percentage rating type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1700727448575 6f1680cd7d75?w=800\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8nnx8cxvhbgl0esuymgnvbnryb2x8zw58mhx8mhx8fda%3d children \ type component list options data =@ctx datasources control stats maximumitemstorender 8 item type component list item options iscontained true title =@ctx current item stat subtitle =@ctx current item description \# rating uses a percentage defined in the datasource \# by default, a single star icon in the primary color is shown rating percentage =@ctx current item percentage leftelement element icon icon =@ctx current item icon isduotone true control stats (datasource datasources control stats type datasource static options data \ id 1 stat quality description the performance and consistency of products in meeting established standards percentage 0 7 percentage text y icon air quality check magnifying glass \ id 2 stat inspection description measures the outcomes of product evaluations within the quality control process percentage 0 5 icon amazon inspector \ id 3 stat rework description tracks the percentage of products that require additional processing or correction after initial inspection percentage 0 2 icon hardware hammer nail hit \ id 4 stat rejected description measures the percentage of products that fail to meet quality standards and cannot be reworked or sold percentage 0 1 icon cross over \ id 5 stat approved description the percentage of products that meet all quality standards and are cleared for distribution or sale percentage 0 9 icon select list item with ratings with a percentage, minimum, maximum and icon this example sets up a product review {{jig}} that displays a rating as a percentage an icon and color customized to represent the rating percentage visually a styled list where each item is displayed within a card format, achieved by enabling the iscontained property a verified label placed on the right side of the item a product image shown as an avatar on the left side examples see the full example in github list item rating percentage max jigx title product review description list with percentage rating and icons type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1505740420928 5e560c06d30e?w=800\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mtf8fhbyb2r1y3qlmjblehblcmllbmnlfgvufdb8fdb8fhww children \ type component list options data =@ctx datasources product review maximumitemstorender 8 item type component list item options title =@ctx current item title subtitle =@ctx current item subtitle description =@ctx current item thirdline iscontained true label title =@ctx current item label leftelement element avatar text "" uri =@ctx current item productimage \# rating uses a percentage from the datasource, the rating icon and color is customized \# by configuring the maximum property sets the number of icons required \# by configuring the current property colors the number of icons specified in the maximum \# property with the value to create the rating rating percentage =@ctx current item rating ratingicon color color7 current =@ctx current item rating 5 icon thumb up like maximum 5 product review\ jigx type datasource static options data \ avatars \ https //plus unsplash com/premium photo 1658527049634 15142565537a?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mxx8yxzhdgfyfgvufdb8fdb8fhww \ https //images unsplash com/photo 1500648767791 00dcc994a43e?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mnx8yxzhdgfyfgvufdb8fdb8fhww \ https //images unsplash com/photo 1535713875002 d1d0cf377fde?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8m3x8yxzhdgfyfgvufdb8fdb8fhww \ https //images unsplash com/photo 1494790108377 be9c29b29330?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8nhx8yxzhdgfyfgvufdb8fdb8fhww \ https //images unsplash com/photo 1438761681033 6461ffad8d80?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8n3x8yxzhdgfyfgvufdb8fdb8fhww id 1 label verified productimage https //images unsplash com/photo 1559912311 8421ee673ca5?w=700\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8nnx8chjvzhvjdcuymgltywdlc3xlbnwwfhwwfhx8ma%3d%3d rating 0 95 ratingvalue 5 ratingtext (529) subtitle exceeded my expectations tags \ high quality \ durable \ recommended \ value for money thirdline i've been using this product daily for over a year, and it still works as well as the day i bought it highly recommend! title fantastic product! \ avatars \ https //plus unsplash com/premium photo 1658527049634 15142565537a?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mxx8yxzhdgfyfgvufdb8fdb8fhww \ https //images unsplash com/photo 1500648767791 00dcc994a43e?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mnx8yxzhdgfyfgvufdb8fdb8fhww \ https //images unsplash com/photo 1535713875002 d1d0cf377fde?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8m3x8yxzhdgfyfgvufdb8fdb8fhww id 2 label verified productimage https //images unsplash com/photo 1523275335684 37898b6baf30?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mnx8chjvzhvjdhxlbnwwfhwwfhx8ma%3d%3d rating 0 75 ratingvalue 4 ratingtext (1999+) subtitle solid performance overall tags \ value for money \ good support \ recommended thirdline the product works well, but there are a few minor issues that could be improved customer support was helpful in resolving my concerns title good, but room for improvement \ avatars \ https //images unsplash com/photo 1438761681033 6461ffad8d80?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8n3x8yxzhdgfyfgvufdb8fdb8fhww id 3 label verified productimage https //images unsplash com/photo 1504274066651 8d31a536b11a?w=700\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8ntr8fhbyb2r1y3qlmjbpbwfnzxn8zw58mhx8mhx8fda%3d rating 0 35 ratingvalue 2 ratingtext (247) subtitle not worth the price tags \ not satisfied \ poor quality thirdline the product stopped working after just a few weeks the build quality feels cheap, and i’m not happy with the overall experience title disappointing experience product users jigx type datasource static options data \ avatars https //plus unsplash com/premium photo 1658527049634 15142565537a?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mxx8yxzhdgfyfgvufdb8fdb8fhww id 1 product 1 text ab \ avatars https //images unsplash com/photo 1500648767791 00dcc994a43e?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mnx8yxzhdgfyfgvufdb8fdb8fhww id 2 product 1 text cd \ avatars https //images unsplash com/photo 1535713875002 d1d0cf377fde?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8m3x8yxzhdgfyfgvufdb8fdb8fhww id 3 product 1 text ef \ avatars https //images unsplash com/photo 1494790108377 be9c29b29330?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8nhx8yxzhdgfyfgvufdb8fdb8fhww id 4 product 2 text gh \ avatars https //images unsplash com/photo 1438761681033 6461ffad8d80?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8n3x8yxzhdgfyfgvufdb8fdb8fhww id 5 product 2 text ij \ avatars https //plus unsplash com/premium photo 1658527049634 15142565537a?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mxx8yxzhdgfyfgvufdb8fdb8fhww id 6 product 3 text kl list item with multiple tags this example creates a list with multiple tags shown on each list item a styled list where each item is displayed within a card format, achieved by enabling the iscontained property the tags show the assigned team, priority, and status a product image shown as an avatar on the left side examples see the full example in github list with tags multiple jigx title team task list with multiple tags description list displaying multiple tags type jig default header type component jig header options children options source uri https //images unsplash com/photo 1590402494628 9b9acf0b90ae?q=80\&w=2970\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d type component image height medium children \ type component list options data =@ctx datasources team tasks maximumitemstorender 8 item type component list item options iscontained true title =@ctx current item taskassignee subtitle =@ctx current item taskname \# add multiple tags to the list items \# each tag can have its own color \# tags are shown in the order they configured tags \ text =@ctx current item team color primary \ text =@ctx current item priority color warning \ text =@ctx current item taskstatus color color2 leftelement element avatar text =@ctx current item taskassignee uri =@ctx current item profile datasource datasources team tasks type datasource sqlite options provider data provider dynamic entities \ entity default/tasks query | select id, '$ taskassignee', '$ taskname', '$ taskcost', '$ taskid', '$ taskstatus', '$ team', '$ profile', '$ priority' from \[default/tasks] list item with ratings and tags this example show a list of cleaning services that displays a rating as a value an icon and color customized to represent the rating value visually multiple tags showing the hourly rate and cleaning area category a styled list where each item is displayed within a card format, achieved by enabling the iscontained property a numbered badge in the rightelement of the item shows the number of services available examples see the full example in github list with tags rating jigx title cleaning services description list showing available cleaning services type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1628177142898 93e36e4e3a50?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=2070\&q=80 children \ type component list options data =@ctx datasources cleaning services dynamic maximumitemstorender 8 item type component list item options title =@ctx current item service subtitle ='duration of ' & @ctx current item time & ' mins' horizontalitemsize large \# wrap each list item in a card iscontained true \# rating uses a value from the datasource, the rating icon and color is customized \# by configuring the maximum property sets the number of icons required \# by configuring the current property colors the number of icons specified in the maximum \# property with the value to create the rating rating ratingicon icon thumb up like color color7 value current =@ctx current item rating maximum 5 \# add multiple tags to the list items \# each tag can have its own color \# tags are shown in the order they configured tags \ text =('$' & @ctx current item hourlyrate) color color14 \ text =@ctx current item area color color14 leftelement element image text '' uri =@ctx current item image rightelement \# the badge will display with the number of service, \# the count is configured in the datasource element badge value =@ctx current item quantity cleaning services dynamic jigx type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ id' as sqlid, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ pressed', '$ time', '$ quantity', '$ rating' from \[default/cleaning services] where '$ hourlyrate' is not null order by id desc list item outside a list in this example, a single list item is configured inside an expander component the list item uses a static value and is configured to use the left and right element as well as the swipeable event that opens an info modal note , that the list item is outside of a list component and uses a static value and does not rely on a datasource title single list item type jig default children \# configure the expander component that will contain the single list item \ type component expander options header centerelement type component titles options align left leftelement title reservations element text divider solid children \# single list item configured outside of the list \# the values are static and do not rely on a datasource \# add a left and right element for the list item \ type component list item instanceid list item options \# note the list item is outside of a list component \# and uses a static value and does not rely on a datasource \# this means you do not need to use =@ctx current item title guests subtitle select the number of guests leftelement element checkbox value "true" rightelement element amount control initialvalue 5 progress 1 swipeable right \ label cost icon currency dollar color primary onpress type action info modal options modal element type icon icon monetization approve color warning title cost per guest is $25 description bookings for groups of ten or more are charged at $20 per guest buttontext rightbook see also list docid\ plkhukmyjaepjjfxmz9aq jig list docid 5uifnxycbeewhizctnjqm state docid 0js3trstyj4kcu6vviv1y