text-field

the text field is a versatile component, allowing many variations and configurations it allows users to enter letters, numbers, and special signs on a single or multiple lines 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 instanceid provide a unique id for the component that can be referenced elsewhere label give the field a label label is displayed as placeholder when no value is provided other options autocapatilize this property automatically capatilzes certain parts of the text input depending on the selection made the keyboard caps lock is automatically set depending on the selection made this property is not supported by certian keyboard types such as name phone pad the following options are available characters capatilizes the all characters sentences capatilizes all words in a sentence none nothing is automatically capatalized words capatilizes all words color there is a list of colors available the color is used in combination with the condition when see jigx color palette docid\ alxcnrj rgickyu94iyws for the available color options errortext add text, string, or expressions to show text under the text field indicating an error/invalid value in the field text is shown in isnegative (red) styling with a red exclamation icon on the right format text format of the value entered for example, percentage or currency formatting only displays in the app when the input field is set to disabled (read only) helpertext add text, string, or expressions to guide users by showing text under the number field helper text is displayed only when there is no errortext keyboardtype determines which keyboard to open there is a list to select from, certain keyboard selections require a specific device or virtual keyboard icon there is a list of icons available, see jigx icons docid\ kcd yl jqeuthf7cpfe91 for more information initialvalue the initialvalue is the value that will be displayed in the text field when the form is initially loaded you can use this property to preset the field with default text so that you do not have to manually select it useful when creating an edit or update form using the reset state action with initialvalues does not clear the field, it resets the field back to it's initialvalue isautocorrected set to false , disables auto correct the default value is true isautofocused if true the text field will get focus immediately after the form is displayed and the keyboard will be opened automatically ishidden if true the text 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 ismultiline set to true allows for multiple line text input the default value is false setting the field to single line 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 as the submit button remains disabled until the text field has an input set to false the field is optional and will have (optional) in the label isreturnkeyenabledautomatically when set to true , the keyboard disables the return/done key when there is no text and automatically enables it when there is a text the default value is false issensitive if set to true , the input obscures the text entered so that sensitive text stays secure for example, bank card account details, passwords or salary details istextclearedonfocus when set to true , the text field is automatically cleared when editing begins minlength specifies the minimum number of characters allowed in the field maxlength specifies the maximum number of characters allowed in the field nextproperty name of the property you want to focus next in the form when you use return/next on a keyboard returnkeytype determines the label of the return key on the keyboard, for example, done , search , join or next on android you can use returnkeylabel style the following property settings are available \ flex flex property if rendered inside row \ isbusy displays spinner on right side of field it removes any configured icon \ isdisabled disables the number field preventing any input text \ ispositive a green green icon displays on the right of the number field more than one can be true it will be evaluated based on priority textarea sets the height of the text area this property should be used in conjunction with ismultiline the following property settings are available \ dynamic allows the height to change based on the text content \ small \ medium \ large set the height to a relative size with a dynamic edit size the default is undefined, which uses a static height textcontenttype if you have setup your phone with your details these can be used as autofill hints to select for populating the text field for ios 11+ you can set textcontenttype to username or password to enable autofill of login details from the device keychain for ios 12+ newpassword can be used to indicate a new password input the user may want to save in the keychain, and onetimecode can be used to indicate that a field can be autofilled by a code arriving in an sms to disable autofill, set textcontenttype to none value the value to show in the text field when the form initially loads this can be combined with the isdisable style to preset the value that cannot be edited on the form actions onchange the action is triggered when the content in the text field is changed use intellisense (ctrl+space) to see the list of available actions state configuration key notes =@ctx component state value 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 contenttype phone , ensure the phone number entered contains no spaces; this allows you to click on the field to initiate a call from your device examples and code snippets examples and code snippets text fields on a form in this example five text fields are used, namely the name text field uses minlength and maxlength and helptext properties the zip/postal code text field uses the isrequired property set to false making the field optional the autocapitalize property is set to character to ensure the keyboard caps lock is on for all characters typed in the field the claim details text field uses the ismultiline set to true and textarea set to medium allowing for a full description to be input the otp text field property use the errortext and issensitive properties ensuring the otp number is obscured the submission text field is set as style isdisabled true with a color and icon to be displayed examples see the full example using static data in github see the full example using dynamic data in github text field (static) title text field type jig default header type component jig header options height small children type component image options source uri https //images unsplash com/photo 1592431913823 7af6b323da9b?q=80\&w=2340\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d children \ type component form instanceid newapplicant options children \ type component text field instanceid name options minlength 5 maxlength 30 helpertext provide your name and surname label full name \ type component text field instanceid address options isrequired false autocapitalize characters label zip/postal code \ type component text field instanceid claimdetails options ismultiline true textarea medium label provide details of the claim \ type component text field instanceid claimotp options errortext that is not a valid otp number issensitive true label provide the claim one time password \ type component text field instanceid claimstatus options color \ when true color color6 style isdisabled true icon check 2 alternate label submission value ready for submission text field (dynamic) children \ type component form instanceid text form options children \ type component text field instanceid firstname options label name helpertext =@ctx datasources field values text datasources (dynamic) datasources field values type datasource sqlite options provider data provider dynamic entities \ entity default/value query | select '$ id', '$ number', '$ text', '$ email', '$ category' from \[default/value] where '$ category' = "field category" use textcontenttypes to autofill text fields setting certain information in your device, for example in settings on iphone, will allow you to be able to autofill forms quickly and accurately then use the contenttype property in the text field on a {{jigx}} form to specific the type, such as name, address, credit card and more if the information is available on the device, tapping on the field will provide an autofill hint that can be selected and the field will autofill with the details content type jigx title content types type jig default icon content browser edit header type component jig header options height small children type component image options source uri https //builder jigx com/assets/images/captureinfo jpg actions \ children \ type action action list options title create contact issequential true actions \ type action execute entity options provider data provider dynamic entity default/contacts method create data name =@ctx components name state value surname =@ctx components surname state value phone =@ctx components phone state value address =@ctx components phone state value onsuccess title your contact details were successfully created \ type action go back children \ type component form instanceid info options isdiscardchangesalertenabled false children \ type component field row options children \ type component text field instanceid name options \# provide the autofill hint for first name using textcontenttype textcontenttype givenname label first name \ type component text field instanceid surname options \# provide the autofill hint for surname using textcontenttype textcontenttype familyname label last name \ type component text field instanceid phone options \# provide the autofill hint for phone numbers using textcontenttype textcontenttype telephonenumber label contact us icon phone \ type component text field instanceid address options \# provide the autofill hint for street address using textcontenttype textcontenttype fullstreetaddress label address icon maps pin 1 see also state docid 0js3trstyj4kcu6vviv1y