FW Crayon how to use Fwchange dynamicaly for one field in dynamic form

App Platform
, ,
1

Hi,
I am currently generating crayon dynamic form in custom app . But i have 2 dependent field which one value should be paopulated in the response of other dropdown… it is not working in the below code


        const formDOM = document.querySelector('#form-content')
        formDOM.addEventListener('change', handleCustomInput);
        if(document.querySelector("#cf_products")){
            document.querySelector('#cf_products').addEventListener('change',handleCustomInput );
        }

it shows cf product is null… is there any way?
i even tried fwFormValuesChanged

form.addEventListener('fwFormValuesChanged', (e) => {
  console.log('current form value', e.detail.value);
});

this is also not working

3

Hi @Deiviya_Sivacoumar,
Good day!
If possible can you please share with us the example in jsfiddle of your problem, the above snippet doesn’t have enough information to suggest the solution.

Thanks

1 Like
4

Sure @Santhosh

in the code i have tried using “fwFormValueChanged” which should trigger whenever cf_product changes this is not working
and i need to hide a sub_product field in dynamic coding it is also not working

5

@Santhosh updated fiddle

What i need to achieve here is there is a dynamic form where On change of order status = open then i need to show language known field else the field should not be shown

6

please take a look at the above working fiddle

Hope it helps

Thanks

7

Thanks @Santhosh it works,
it seems like dynamic form code change will work under v4… i tried under v3 version of crayon

And how to hide and show a field in dynamic form is it possible?

8

Hello,
You can use the hidden:‘true’ attribute to hide elements. You can then have an event listener to listen for changes in your dropdown / select control and resent hidden:‘false’ which will show the required field.

So you can try this in your fiddle
{
id: ‘2978f820-704b-46c7-9f88-110e14e34a8c’,
name: ‘first_name’,
label: ‘First Name’,
type: ‘TEXT’,
position: 3,
hidden:‘true’,
required: true,
placeholder: ‘Enter…’,
hint: ‘Please provide a text of at max 100 characters’,
choices: ,
},

Please note hidden:‘true’ above. This will hide the field. You can then set it to

{
id: ‘2978f820-704b-46c7-9f88-110e14e34a8c’,
name: ‘first_name’,
label: ‘First Name’,
type: ‘TEXT’,
position: 3,
hidden:‘false’,
required: true,
placeholder: ‘Enter…’,
hint: ‘Please provide a text of at max 100 characters’,
choices: ,
},

This will show the hidden field.

Please note this may cause the whole form to re-render so please ensure that the already entered values by the user are persisted in your main prop json so on re-rendering the already existing values are correctly show.

We are working on a feature for implementing related fields where this should be more seamless. But for now we can suggest this method.

Regards

9

Hi @kaushalc
I am using crayon 4.1.0
it is not working in this version is ther any specific version

10

Yeah Looks like it was an issue that got fixed in the next version of 4.2. Please upgrade and try it once.

11

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.