onChange and showIf for List's subFields - DataCloneError

Technical Questions
1

Hi

I use Next.js 12 with Builder and Custom Components.
Inside registerComponent we want to add 2 fields with some restrictions:

  1. number type field with min = 1 and max = 100. But it will be used inside List’s subFields.
  2. list type field which should be limited to maximum of 4 selected items.

We probably can achieve both with onChange function. But this function provided as a normal arrow function onChange: (options: Map<string, any>) => { ... } couse an Error when used within List’s subFields:

DataCloneError: Failed to execute 'postMessage' on 'Window': function(options, parent, parentElements) {
console.log("options, parent, parentElement...<omitted>... } could not be cloned.

I know that for the showIf function inside subFields there is a “hack” to provide string and ignore TS (which expects arrow function):

//@ts-ignore example provided by Builder to convert value to string in subfields
showIf: `options.get('varietal') === 'OTHER'`,

I’ve tried it with onChange and it also seams to work with this simple code:

onChange: `console.log('options.get(percentage) > 100', options.get('percentage') > 100)`,

But:

  1. How could I use some more complicated logic here, when I would like to have multiple lines of code inside this function? Would it work with line breaks? can I set variables in this templetestring?

  2. How to communicate with users? I would like to show an error message as we can do with the regex property (the message is shown next to the input field in place of helper text). Is it possible? At your example at Docs you use alert() with a message - is that the only option?
    Using Your React Components in Builder.io - Builder.io

Any code samples/examples (especially with TS) highly appreciated :slight_smile:

All the best,
Lucas

1 Like
2

@LucasMatuszewski

I will need to connect with our dev team on that DataCloneError to see if we can provide a fix or better work around. In the meantime…

Could you explain the use case for this set up, or the code for the custom component as you have written it? It would be easier to advise an implementation if I understood how it will be used.

It sounds like you are using onChange within your lists subFields itself, but as I understand it I think you should be able to just use onChange on the parent List to limit the length to 4. It is a bit of a work around, but if needed you should also be able to access the properties of the subFields from within the list onChange…or could you possibly manipulate them directly within the component itself? Again any clarification on use case would be very helpful here.

As for the number field, in this instance you might be able to use a string with the appropriate regex limitations, instead of number type? Would that achieve your end goal?

Once I have a better understanding I can help with implementation.

Finally, for the communication with users there is no support on the list input type for message, unfortunately. Currently the only support for any sort of user messaging within the Visual Editor UI would be what you have available within the onChange function itself…most likely the alert() option you mentioned.

3

Thanks, I will provide some code samples and more examples after the Holidays (it’s late night in Poland, where I live :wink:

Probably to limit the number of items on a list we can indeed use onChange on the “list” element which is not inside “subFields”. So I should be able to use a normal function in this case.

About Regex for number, yeah, I was also considering this. Ok, I will write a regex to validate the string with “numbers” within 1 and 100. Since regex provides an error message it’s a better option.

Have a great Christmas! All the best. :christmas_tree:
Lucas