choice-field

the choice field component allows you to select one or more options from a predefined list this enhances user experience by providing a straightforward way to make selections, such as choosing a setting, selecting a category, or picking an item from a list implementing a choice field component involves defining the available options and efficiently handling the user's selection benefit using the choice field component over the checkbox docid\ ni esllbpquzvbejkxxgb component eliminates the need to use numerous checkboxes and complex expressions to achieve the same outcome 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 for choice field instanceid the unique identifier for the choice field component label provide a label/name for the choice field data use an expression that evaluates to an array of options item the item property uses the component of choice field item that includes title and value other options errortext add text, string, or expressions to show text under the choice field indicating an error/invalid value in the field text is shown in isnegative (red) styling helpertext add text, string, or expressions to guide users by showing text under the choice field helper text is displayed only when there is no errortext initialvalue the initialvalue is the value that will be displayed in the choice field when the form is initially loaded you can use this property to preset the choice field with a default value so that you do not have to manually select it, for example, on a yes/no choice the initial value can be set to no ishidden if true the choice field will be hidden on the form if set to false the field will be shown isignored when true , the field will be ignored when submitting the form and the content will not be stored ismultiple set to true allows you to select multiple items inside the choice field set to false only allows a single selction in the choice field isoptionallabelhidden if the field is optional you can turn off the "(optional)" label by setting this field to true this property works in combination with isrequired false isrequired set to true when the field is required useful when you use it in form submission set to false the choice field is optional and will have (optional) in the label itemsperrow number of choice boxes to show in each row supports multiline text nextproperty name of the property you want to focus next in the form when you use return/next on a keyboard style isdisabled disables the choice field preventing the selection of any of the choice fields value the value that the choice field will output as its state other options for choice field item instanceid the unique identifier for the choice field item component title text displayed on the choice field item you can add text, expressions or text with format in the field text with format includes, currency, decimal, datetime and more in most instances an expression similar to =@ctx current item option is used to reference the datasource value the value of the item it has to be unique for each item and is usually the id of the record from the datasource actions onchange the action is triggered when the content in the choice field item is changed use intellisense (ctrl+space) to see the list of available actions state configuration key notes =@ctx component state selected value state is the variable of the component =@ctx solution state activeitemid now global state variable that can be used throughout the solution considerations the choice field component can only be used in a form component on a default {{jig}} the choice field is an input control only text can be displayed in the title property using itemperrow for long text is not recommended due to the limited space available in each item and the need for visual consistency among the choices the property supports up to two lines of text per item examples and code snippets examples and code snippets choice field with single selection choice field in this example, a choice field component is configured with basic yes/no options if you a new customer and select yes , then a when property is used with an expression to display additional form fields for the customer to complete if you an existing customer, select no and click the register & place order button to goto the product item {{jig}} to place an order examples see the full example in github choice field single jigx title basic choice description new customer type jig default header type component jig header options height small children type component image options source uri https //images unsplash com/photo 1472851294608 062f824d29cc?w=500\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8nhx8c2hvcg9ubgluzsuymhn0b3jlfgvufdb8fdb8fhww datasources select option type datasource static options data \ id 1 option yes \ id 2 option no children \ type component form instanceid inputvalues options isdiscardchangesalertenabled false children \ type component choice field instanceid new customer options label are you a new customer? data =@ctx datasources select option item type component choice field item options title =@ctx current item option value =@ctx current item option \ type component form instanceid register when =@ctx components new customer state value ='yes' ? true\ false options children \# if yes is selected in the choice field the form displays \ type component text field instanceid firstname options label fist name isrequired true \ type component text field instanceid lastname options label last name isrequired true \ type component email field instanceid email options label email address isrequired true \ type component number field instanceid phonenumber options label mobile number \ type component text field instanceid address options label address ismultiline true \# if yes go to online store actions \ children \ type action action list options \# hide the button until the no option is selected \# then show the button and go to the order jig ishidden =@ctx components new customer state value ='no' ? false\ true title place order issequential true actions \ type action go to options linkto component product item \ type action execute entity options style \# disable the button until all fields in the form are filled in isdisabled =$not(@ctx components register state isvalid) \# hide the button until the yes option is selected \# then show the button, register the customer in dymanica data \# go to the order jig ishidden =@ctx components new customer state value = 'yes' ? false\ true title register provider data provider dynamic entity default/customer method create onsuccess type action go to options linkto component product item data firstname =@ctx components firstname state value lastname =@ctx components lastname state value email =@ctx components email state value address =@ctx components address state value choice field with multiple selection in this example, two choice field components are used the first is a single yes/no selection to answer a question the second choice field is configured with a when property to only display is the yes selection was made the ismultiple property set to true allows multiple options to be selected in the component selecting submit uses an info modal to show the form was successfully submitted examples see the full example in github multiple choice selection choice field multiple jigx title patient details description patient information type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1532938911079 1b06ac7ceec7?q=80\&w=1632\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d \# resets the component when pulling down on the jig \# the form resets with the configured initialvalues onrefresh type action reset state options state =@ctx jig components new patient state data datasources allergies type datasource static options data \ id 1 allergen legumes \ id 2 allergen nuts \ id 3 allergen shellfish \ id 4 allergen milk \ id 5 allergen eggs \ id 6 allergen wheat select option type datasource static options data \ id 1 option yes \ id 2 option no children \ type component form instanceid new patient options isdiscardchangesalertenabled false children \ type component text field instanceid firstname options label fist name isrequired true \ type component text field instanceid lastname options label last name isrequired true \ type component email field instanceid email options label email address isrequired true \ type component choice field instanceid select options itemsperrow 2 label do you have allergies data =@ctx datasources select option item type component choice field item options title =@ctx current item option value =@ctx current item option \ type component section when =@ctx components select state value ='yes' ? true\ false options title what are you allergic to? children \ type component choice field instanceid allery options \# ismultiple allows for multiple selection ismultiple true isrequired true errortext required \# place the choice items two in a row itemsperrow 2 label patient allergies data =@ctx datasources allergies item type component choice field item options title =@ctx current item allergen value =@ctx current item id actions \ children \ type action execute entity options title submit provider data provider dynamic entity default/patient method create onsuccess type action info modal options modal element type icon icon check color positive title form submitted buttontext close data firstname =@ctx components firstname state value lastname =@ctx components lastname state value email =@ctx components email state value allergies =@ctx components allery state selected loading of multiple selected options in this example, we want to load the patient's form that they completed in the example above, and show their selected details and allergies each patient can have multiple allergies, and the data would be saved as an object in the database to deserialize the object the jsonproperties property is configured with the column containing the object of multiple allergies in the choice field component the intialvalue is then configured to return the selected allergies for the specific patient the execute entity action is configured to update the patient data update patient details jigx title patient details description patient information type jig default \# add the input to receive the id for the specific patient inputs patientid type string required true header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1532938911079 1b06ac7ceec7?q=80\&w=1632\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d \# resets the component when pulling down on the jig \# the form resets with the configured initialvalues onrefresh type action reset state options state =@ctx jig components new patient state data datasources allergies type datasource static options data \ id 1 allergen legumes \ id 2 allergen nuts \ id 3 allergen shellfish \ id 4 allergen milk \ id 5 allergen eggs \ id 6 allergen wheat select option type datasource static options data \ id 1 option yes \ id 2 option no \# the datasource used to return the patient details \# queryparameter references the patientid input from the list \# jsonproperties is specified to deserialize the allergies object, \# allowing it to be loaded in the choice field as an initialvalue patient type datasource sqlite options provider data provider dynamic entities \ default/patient query select id, '$ firstname', '$ lastname', '$ email', '$ allergies' from \[default/patient] where id = @patientid queryparameters patientid =@ctx jig inputs patientid jsonproperties \ allergies children \ type component form instanceid new patient options isdiscardchangesalertenabled false children \ type component text field instanceid firstname options initialvalue =@ctx datasources patient firstname label fist name isrequired true \ type component text field instanceid lastname options initialvalue =@ctx datasources patient lastname label last name isrequired true \ type component email field instanceid email options initialvalue =@ctx datasources patient email label email address isrequired true \ type component choice field instanceid select options \# for this choice field we do not save the value in the datasource, \# using an expression we can see if there are allergies for the patient, \# if allergies column contains data, then the yes choice field is populated initialvalue =$exists(@ctx datasources patient allergies) ? 'yes' 'no' itemsperrow 2 label do you have allergies data =@ctx datasources select option item type component choice field item options title =@ctx current item option value =@ctx current item option \ type component section options title what are you allergic to? children \ type component choice field instanceid allergy options \# show the selected patient's allergies using initialvalue initialvalue =@ctx datasources patient allergies id ismultiple true isrequired true errortext required itemsperrow 2 label patient allergies data =@ctx datasources allergies item type component choice field item options title =@ctx current item allergen value =@ctx current item id \# set up the action to update the patient's details and allergies actions \ children \ type action execute entity options title update provider data provider dynamic entity default/patient method update onsuccess type action info modal options modal element type icon icon check color positive title form submitted buttontext close data id =@ctx jig inputs patientid firstname =@ctx components firstname state value lastname =@ctx components lastname state value email =@ctx components email state value allergies =@ctx components allergy state selected patient list jigx title update patient list type jig list icon doctor consultation chat 1 header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1532938911079 1b06ac7ceec7?q=80\&w=1632\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d onfocus type action action list options issequential true actions \ type action sync entities options provider data provider dynamic entities \ default/patient datasources patient list type datasource sqlite options provider data provider dynamic entities \ default/patient query select id, '$ firstname', '$ lastname', '$ email', '$ allergies' from \[default/patient] data =@ctx datasources patient list item type component list item options title =@ctx current item firstname subtitle =@ctx current item lastname rightelement element button title view onpress type action go to options linkto choice field multiple parameters patientid =@ctx current item id choice field with 3 items per row using the itemsperrow property in the choice field component defines how many choice option items must be shown on each row keep in mind this is on a mobile device, having more than 3 could make the options hard to read examples see the full example in github choice field items per row\ jigx title choice field items per row description customer survey type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1628313388777 9b9a751dfc6a?q=80\&w=1548\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d datasources customer satisfaction type datasource static options data \ id 1 option 😀 happy \ id 2 option 😕 neutral \ id 3 option 😡 sad children \ type component form instanceid customer survey options isdiscardchangesalertenabled false children \ type component choice field instanceid satisfaction options itemsperrow 3 label how satisfied were you with our service today? data =@ctx datasources customer satisfaction item type component choice field item options title =@ctx current item option value =@ctx current item option actions \ children \ type action execute entity options title submit provider data provider dynamic entity default/customer method create onsuccess type action info modal options modal element type image uri https //images unsplash com/photo 1643878037082 ba1fd9a60b16?q=80\&w=1632\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d title survey complete buttontext thank you data satisfaction =@ctx components satisfaction state value choice field with an initial selection in this example of the choice field component the form opens with an option already selected this is configured using an expression in the initialvalue property you can change the property note that the onrefresh event used to reset the form, resets the choice field back to it's orginial state with the initialvalue selected examples see the full example in github choice field initialvalue jigx title choice field with initial value selected type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1617347454431 f49d7ff5c3b1?w=500\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mjn8fg9ubgluzsuymgrlbgl2zxj5fgvufdb8fdb8fhwy \# set the component back to the initialvalue when refreshed onrefresh type action reset state options state =@ctx jig components shipping method state value datasources shipping type datasource sqlite options provider data provider dynamic entities \ default/shipping query select id, '$ method', '$ cost' from \[default/shipping] children \ type component form instanceid delivery options children \ type component choice field instanceid shipping method options initialvalue =@ctx datasources shipping\[0] method label choose your shipping method data =@ctx datasources shipping item type component choice field item options title =(@ctx current item method & ' ' & @ctx current item cost) value =@ctx current item method actions \ children \ type action go back options title checkout choice field with onchange choice field onchange in this example, when the choice field item is selected and onchange event triggers a open url action providing the information on the holiday packages examples see the full example in github choice field onchange/jigx title choice field with onchange type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1618245318763 a15156d6b23c?q=80\&w=1740\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d datasources packages type datasource static options data \ name seychelles days 30 description "10 days in luxury accomodation" price "$ 1500" url https //www clubmed co za/d/indian ocean/seychelles \ name maldives days 60 description "7 days experience cultural activities" price "$ 1000" url https //www clubmed co za/d/indian ocean/maldives \ name mauritius days 120 description "8 days includes watersports" price "$ 2350" url https //www clubmed co za/d/indian ocean/mauritius \ name indonesia days 95 description "15 days all inclusive experience" price "$ 3760" url https //www clubmed co za/d/asia/indonesia children \ type component form instanceid island holiday options children \ type component choice field instanceid select package options onchange type action open url options url =@ctx components select package state selected url label select an island package data =@ctx datasources packages item type component choice field item options title =(@ctx current item name & ' ' & 'starting from' & ' ' & @ctx current item price) value =@ctx current item name