list

this component is very similar to the jig list docid\ sjsrtshfgxmar0jup6 dt the only exception is that this list component can be used in a jig default docid 7ezcdet8xhlyyd9oft jj with other items, whereas the jig list docid\ sjsrtshfgxmar0jup6 dt is a jig dedicated to a list only with this component, you can typically combine a list with other components another difference is that jig list docid\ sjsrtshfgxmar0jup6 dt automatically display lists on the widget, which is not true with lists on a jig default docid 7ezcdet8xhlyyd9oft jj as far as the functionality goes, the same list options are available as with the list jig where the list itself can either be a list of values with list items or it can be one of the following https //docs jigx com/examples/list item https //docs jigx com/examples/list item list item https //docs jigx com/examples/bar chart https //docs jigx com/examples/bar chart bar charts https //docs jigx com/examples/expander https //docs jigx com/examples/expander expander https //docs jigx com/examples/pie chart https //docs jigx com/examples/pie chart pie charts https //docs jigx com/examples/product item https //docs jigx com/examples/product item product item stage docid\ o4uunigfa3kmfy sih2yw 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 data the items you want to show in the list item there is a list of components available to use list item docid\ s8uqfspcwxl1 muayfnyv bar chart docid\ v2wu e4trtewcdujreyqr expander docid\ aah6xkffsvasypnjiyi 2 pie chart docid\ rmk9nmtrv65kmcqs2pq6e product item docid\ jeqje jf2vjwhi6ogr4cf stage docid\ o4uunigfa3kmfy sih2yw if you use the list component in a https //docs jigx com/examples/jigcomposite https //docs jigx com/examples/jigcompositehttps //docs jigx com/examples/jigcomposite https //docs jigx com/examples/jigcompositehttps //docs jigx com/examples/jigcomposite https //docs jigx com/examples/jigcomposite jig composite , the maximum number of displayed items is 8 if you set the maximumitemstorender to a higher number, the rest of the list will display after clicking on the 'show more' option maximumitemstorender the number of items you would like to display in your list other options badge add a badge to the list that displays on the widget to highlight critical information and capture the user's attention, ensuring key updates or notifications are easily noticeable within the app the badge can be configured at the root level of the jig file \ to display as a red dot using the empty value \ a red dot with a number using an expression to perform a count for example, counting the number of tasks in the list filter allows you to create lists filtered by a key/value set the filter to open on a specific tab in a list initialvalue predefine the default selected tab for a filter on the list, when opening the jig the default filter tab is displayed data define the filter tabs using \ title give the filter a name the text that will be displayed in the tab, for example, in stock \ value the value that the list filter returns use the following expressions to return this value \ =@ctx components my list state filter (for a list in a default jig) \ =@ctx jig state filter (for a list jig) for true/false values that are saved as boolean ensure the filter has a boolean value for true/false values that are saved as string ensure the filter has a string value when using the value property for filtering, it's recommended to use simple values such as strings or numbers (e g , 'today', '7d', '14d') avoid using objects, as the filter logic is designed for strict equality checks instead, derive complex data like date ranges elsewhere based on the selected value ishorizontal the boolean value that transforms the list into a horizontal one issearchable the boolean value which allows you to add a search bar on the top of your list onshowmorepress action to be performed when you press on the show more button this is type action go to with a linkto option 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 when using the value property for filtering, it's recommended to use simple values such as strings or numbers (e g , 'today', '7d', '14d') avoid using objects, as the filter logic is designed for strict equality checks instead, derive complex data like date ranges elsewhere based on the selected value list functionality list with search functionality list with search this example displays the search functionality of a basic list jig that allows you to search a large list instantly based on certain keywords entered examples see the full example using static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/static data/default w search sd jigx see the full example using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/dynamic data/default w search dd jigx by design, search functionality is automatically disabled when using it on a composite jig datasource see the full datasource for static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/services/repair services static jigx see the full datasource for dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/dynamic data/default w search dd jigx search (static) children \ type component list instanceid cleaning serv items options \# data configured to use datasource (static) data =$filter(@ctx datasources repair services static, function($v){$contains($string($v service),$string(@ctx components cleaning serv items state searchtext != null ? @ctx components cleaning serv items state searchtext ''))})\[] issearchable true maximumitemstorender 50 item type component list item options title =@ctx current item service subtitle =@ctx current item description search (dynamic) children \ type component list instanceid cleaning serv items options \# data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic issearchable true maximumitemstorender 50 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, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ time' from \[default/cleaning services] where '$ service' like '%'||@search||'%' or @search is null queryparameters search =@ctx components cleaning serv items state searchtext list with filter functionality list with filter this example helps to filter the items in a list to create meaningful sections or split the data for ease of use examples see the full example using static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/static data/default w filter label sd jigx see the full example using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/dynamic data/default w filter label dd jigx datasource see the full datasource for static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/static data/default w filter label sd jigx see the full datasource for dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/dynamic data/default w filter label dd jigx filter label (static) children \ type component list instanceid filter list options filter \ title all value '' \ title indoor value indoor \ title outdoor value outdoor \# data configured to use datasource (static) data =$filter(@ctx datasources cleaning services static, function($v){$contains($string($v status), $string(@ctx components filter list state filter != null ? @ctx components filter list state filter '')) })\[] item type component list item options title =@ctx current item service subtitle =@ctx current item area label title =(@ctx current item status = "indoor" ? 'indoor' 'outdoor') leftelement element avatar text =$substring($substringbefore(@ctx current item service, " "), 1, 1) & $substring($substringafter(@ctx current item service, " ") , 1, 1) uri =@ctx current item image filter label (dynamic) children \ type component list instanceid cleaning serv items options \# data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic maximumitemstorender 50 filter \ title all value '' \ title indoor value "true" \ title outdoor value "false" item type component list item options title =@ctx current item service subtitle =@ctx current item area label title =(@ctx current item indoor = "true" ? 'indoor' 'outdoor') leftelement element avatar text =$substring($substringbefore(@ctx current item service, " "), 1, 1) & $substring($substringafter(@ctx current item service, " ") , 1, 1) uri =@ctx current item image datasources (static) 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 http //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 status indoor onceoffrate service bathroom deep clean time 90 \ area garden category description taking care of general gardening to provide an immaculate first impression hourlyrate illustration http //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 status outdoor onceoffrate 100 service gardening time 120 \ area general category description cleaning and streak removal of external windows hourlyrate 35 illustration http //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 status outdoor onceoffrate service window cleaning external time 60 \ area driveway category description car wash including vacuum hourlyrate illustration http //clipart library com/new gallery/9 95271 car wash comments car dry wash icon png image https //images unsplash com/photo 1520340356584 f9917d1eea6f?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1631\&q=80 status outdoor onceoffrate 50 service car washing time 60 \ area laundry category description provision of laundry services by removal of laundry and return of laundry includes a surcharge for delivery hourlyrate illustration https //encrypted tbn0 gstatic com/images?q=tbn\ and9gctloh sliga5q2wgjlodqiqnxhgchmnz2itf9boulesq sgdi0\&s image https //images unsplash com/photo 1610557892470 55d9e80c0bce?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1439\&q=80 status indoor onceoffrate 110 service offsite laundry services time 120 \ area laundry category 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 illustration http //clipart library com/newhp/white laundry basket clip art laundry basket clipart black and white clipground a28f63e33793a653 jpg image https //images unsplash com/photo 1610557892470 55d9e80c0bce?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1439\&q=80 status indoor onceoffrate 110 service onsite laundry services time 120 \ area lounge category description maintain your upholstery (chair, couch and seat) in pristine condition we use only the most delicate clearning methods hourlyrate 40 illustration http //clipart library com/images k/carpet cleaning silhouette/carpet cleaning silhouette 12 png image https //images unsplash com/photo 1612696733290 a2a26ce8131c?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 status indoor onceoffrate service upholstery cleaning time 60 \ area pool category description cleaning of pool, including chemical treatments, sweeping and proper flush hourlyrate illustration http //clipart library com/data images/476778 jpg image https //images unsplash com/photo 1562844275 857f6e7c429e?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1603\&q=80 status outdoor onceoffrate 40 service pool cleaning time 45 datasources (dynamic) datasources cleaning services dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/cleaning services query | select id, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ time' from \[default/cleaning services] where '$ indoor' like @filter or @filter is null queryparameters filter =@ctx components cleaning serv items state filter filtered list with default tab set in this example, there are four tabs to filter on by default we want the jig to open on the third tab to show the in progress work by default this is achieved by setting the initialvalue property to the filter property examples see the example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/dynamic data/default w filter initialvalue jigx default w filter initialvalue title filter list with default tab description a dynamic list displaying filter options opening with a default tab showing tasks in progress type jig default icon notes paper approve 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 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' from \[default/tasks] where '$ taskstatus' like @filter or @filter is null queryparameters filter =@ctx components task progress state filter children \ type component list instanceid task progress options filter initialvalue "in progress" data \ title all value "" \ title not started value not started \ title in progress value in progress \ title complete value complete data =@ctx datasources team tasks item type component list item options title =@ctx current item taskname subtitle =@ctx current item taskid label color \ when =@ctx current item taskstatus = "in progress" color color7 \ when =@ctx current item taskstatus = "not started" color color4 \ when =@ctx current item taskstatus = "complete" color color2 title =@ctx current item taskstatus leftelement element avatar text =@ctx current item taskassignee uri =@ctx current item profile maximumitemstorender 50 list with search and filter functionality list with search & filter combine the search and filter capabilities to enhance the list functionalty examples see the full example using static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/static data/default w search filter sd jigx see the full example using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/dynamic data/default w search filter dd jigx by design, search functionality is automatically disabled when using it on a composite jig datasource see the full datasource for static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/static data/default w search filter sd jigx see the full datasource for dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/dynamic data/default w search filter dd jigx" search filter (static) children \ type component list instanceid search filter list options filter data \ title all value '' \ title indoor value indoor \ title outdoor value outdoor issearchable true \# data configured to use datasource (static) data =$filter($filter(@ctx datasources cleaning services static, function($v){$contains($string($v service),$string(@ctx components search filter list state searchtext != null ? @ctx components search filter list state searchtext '')) }), function($v){$contains($string($v status), $string(@ctx components search filter list state filter != null ? @ctx components search filter list state filter '')) })\[] item type component list item options title =@ctx current item service subtitle =@ctx current item area label title =(@ctx current item status = "indoor" ? 'indoor' 'outdoor') leftelement element avatar text =$substring($substringbefore(@ctx current item service, " "), 1, 1) & $substring($substringafter(@ctx current item service, " ") , 1, 1) uri =@ctx current item image search filter (dynamic) children \ type component list instanceid cleaning serv items options \# data configured to use datasource (dynamic) data =@ctx datasources cleaning services dynamic issearchable true maximumitemstorender 50 filter data \ title all value '' \ title indoor value "true" \ title outdoor value "false" item type component list item options title =@ctx current item service subtitle =@ctx current item area label title =(@ctx current item indoor = "true" ? 'indoor' 'outdoor') leftelement element avatar text =$substring($substringbefore(@ctx current item service, " "), 1, 1) & $substring($substringafter(@ctx current item service, " ") , 1, 1) uri =@ctx current item image datasources (static) 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 http //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 status indoor onceoffrate service bathroom deep clean time 90 \ area garden category description taking care of general gardening to provide an immaculate first impression hourlyrate illustration http //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 status outdoor onceoffrate 100 service gardening time 120 \ area general category description cleaning and streak removal of external windows hourlyrate 35 illustration http //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 status outdoor onceoffrate service window cleaning external time 60 \ area driveway category description car wash including vacuum hourlyrate illustration http //clipart library com/new gallery/9 95271 car wash comments car dry wash icon png image https //images unsplash com/photo 1520340356584 f9917d1eea6f?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1631\&q=80 status outdoor onceoffrate 50 service car washing time 60 \ area laundry category description provision of laundry services by removal of laundry and return of laundry includes a surcharge for delivery hourlyrate illustration https //encrypted tbn0 gstatic com/images?q=tbn\ and9gctloh sliga5q2wgjlodqiqnxhgchmnz2itf9boulesq sgdi0\&s image https //images unsplash com/photo 1610557892470 55d9e80c0bce?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1439\&q=80 status indoor onceoffrate 110 service offsite laundry services time 120 \ area laundry category 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 illustration http //clipart library com/newhp/white laundry basket clip art laundry basket clipart black and white clipground a28f63e33793a653 jpg image https //images unsplash com/photo 1610557892470 55d9e80c0bce?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1439\&q=80 status indoor onceoffrate 110 service onsite laundry services time 120 \ area lounge category description maintain your upholstery (chair, couch and seat) in pristine condition we use only the most delicate clearning methods hourlyrate 40 illustration http //clipart library com/images k/carpet cleaning silhouette/carpet cleaning silhouette 12 png image https //images unsplash com/photo 1612696733290 a2a26ce8131c?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1470\&q=80 status indoor onceoffrate service upholstery cleaning time 60 \ area pool category description cleaning of pool, including chemical treatments, sweeping and proper flush hourlyrate illustration http //clipart library com/data images/476778 jpg image https //images unsplash com/photo 1562844275 857f6e7c429e?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1603\&q=80 status outdoor onceoffrate 40 service pool cleaning time 45 datasources (dynamic) datasources cleaning services dynamic options provider data provider dynamic entities \ entity default/cleaning services query select id, '$ area', '$ description', '$ hourlyrate', '$ illustration', '$ image', '$ indoor', '$ onceoffrate', '$ service', '$ time' from \[default/cleaning services] where ('$ indoor' like @filter or @filter is null) and ('$ service' like '%'||@search||'%' or @search is null) queryparameters filter =@ctx components cleaning serv items state filter search =@ctx components cleaning serv items state searchtext horizontal list this is an example of a horizontal list with ui elements such as an image and values configured horizontal lists are especially helpful when used on a composite jig examples see the full example using static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/static data/default w horizontal list sd jigx see the full example using dynamic data in github "https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx components/list/dynamic data/default w horizontal list dd jigx datasources see the full datasource for static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/services/repair services static jigx see the full datasource for dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/services/cleaning services dynamic jigx horizontal lists cannot be used with the section docid\ fnq 9otfc31lojfzoa lb component as an empty white jig will be displayed horizontal list (static) children \ type component entity options children \ type component entity field options label current user value =@ctx user displayname \ type component list options ishorizontal true ishorizontalscrollindicatorhidden false \# 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 & ' mins' divider solid horizontalitemsize large leftelement element image text '' uri =@ctx current item image horizontal list (dynamic) children \ type component entity options children \ type component entity field options label current user value =@ctx user displayname \ type component list options ishorizontal true ishorizontalscrollindicatorhidden false \# 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' divider solid horizontalitemsize large leftelement element image text '' 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 see also state #