Use an action
| 1 | inputEx({ |
| 2 | type: "group", |
| 3 | parentEl: 'container1', |
| 4 | fields: [ |
| 5 | { |
| 6 | type: 'boolean', // inputex type |
| 7 | name: 'toggler', |
| 8 | value: true, |
| 9 | rightLabel: 'Stay anonymous', |
| 10 | interactions: [ |
| 11 | { |
| 12 | valueTrigger: false, // this action will run when this field value is set to false |
| 13 | actions: [ |
| 14 | { |
| 15 | name: 'username', // name of the field on which the action should run |
| 16 | action: 'show' // name of the method to run on the field instance ! |
| 17 | } |
| 18 | ] |
| 19 | }, |
| 20 | { |
| 21 | valueTrigger: true, // when set to true: |
| 22 | actions: [ |
| 23 | { |
| 24 | name: 'username', |
| 25 | action: 'hide' |
| 26 | }, |
| 27 | { |
| 28 | name: 'username', // name of the field on which the action should run |
| 29 | action: 'clear' // name of the method to run on the field instance ! |
| 30 | } |
| 31 | ] |
| 32 | } |
| 33 | ] |
| 34 | }, |
| 35 | {type: "string", name: "username", label: "Enter your name" } |
| 36 | ] |
| 37 | }); |
| view plain | print | ? |
Toggle a field
| 1 | new inputEx.Group({ |
| 2 | parentEl: 'container2', |
| 3 | |
| 4 | fields: [ |
| 5 | { |
| 6 | type: 'boolean', // inputex type |
| 7 | name: 'toggler', |
| 8 | value: true, |
| 9 | rightLabel: 'Check this box to toggle the enabled field', |
| 10 | interactions: [ |
| 11 | { |
| 12 | valueTrigger: true, // this action will run when this field value is set to true |
| 13 | actions: [ |
| 14 | { |
| 15 | name: 'group1', // name of the field on which the action should run |
| 16 | action: 'disable' // name of the method to run on the field instance ! |
| 17 | }, |
| 18 | { |
| 19 | name: 'group2', |
| 20 | action: 'enable' |
| 21 | } |
| 22 | ] |
| 23 | }, |
| 24 | { |
| 25 | valueTrigger: false, // when set to false: |
| 26 | actions: [ |
| 27 | { |
| 28 | name: 'group1', |
| 29 | action: 'enable' |
| 30 | }, |
| 31 | { |
| 32 | name: 'group2', |
| 33 | action: 'disable' |
| 34 | } |
| 35 | ] |
| 36 | } |
| 37 | ] |
| 38 | }, |
| 39 | { |
| 40 | type: 'group', |
| 41 | name: 'group1', |
| 42 | fields: [ |
| 43 | { type: 'select', label: 'Title',name: 'title', choices: [{ value : 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, |
| 44 | { label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, |
| 45 | { label: 'Lastname', name: 'lastname', value:'Dupont' }, |
| 46 | { type:'email', label: 'Email', name: 'email'} |
| 47 | ] |
| 48 | }, |
| 49 | { |
| 50 | type: 'group', |
| 51 | name: 'group2', |
| 52 | fields: [ |
| 53 | {type: 'url', label: "Website", name: 'myUrl' } |
| 54 | ] |
| 55 | } |
| 56 | ] |
| 57 | }); |
| view plain | print | ? |
Toggle a field
| 1 | new inputEx.Group({ |
| 2 | parentEl: 'container3', |
| 3 | |
| 4 | fields: [ |
| 5 | { |
| 6 | type: 'select', |
| 7 | label: 'Select your country', |
| 8 | choices: [{ value: "France" }, { value: "USA" }], |
| 9 | interactions: [ |
| 10 | { |
| 11 | valueTrigger: "France", |
| 12 | actions: [ |
| 13 | { |
| 14 | name: "franceCitiesSelect", |
| 15 | action: "show" |
| 16 | }, |
| 17 | { |
| 18 | name: "USACitiesSelect", |
| 19 | action: "hide" |
| 20 | }, |
| 21 | ] |
| 22 | }, |
| 23 | { |
| 24 | valueTrigger: "USA", |
| 25 | actions: [ |
| 26 | { |
| 27 | name: "franceCitiesSelect", |
| 28 | action: "hide" |
| 29 | }, |
| 30 | { |
| 31 | name: "USACitiesSelect", |
| 32 | action: "show" |
| 33 | }, |
| 34 | ] |
| 35 | } |
| 36 | ] |
| 37 | }, |
| 38 | {type: 'select', label: 'Select your city', name: 'franceCitiesSelect', choices: [{ value : "Paris" }, { value: "Lyon" }, { value: "Marseille" }] }, |
| 39 | {type: 'select', label: 'Select your city', name: 'USACitiesSelect', choices: [{ value: "NewYork" }, { value: "Chicago" }, { value: "LA" }, { value: "San Francisco" }] } |
| 40 | ] |
| 41 | }); |
| view plain | print | ? |