how to update other fields (onOptionsChange usage) about volkovlabs-form-panel HOT 6 CLOSED

Hello,
I'm using this very interesting plugin!
Also my use case needs a custom onChange for a SELECT field, I would really appreciate an example.

Thank you,
Fabrizio

from volkovlabs-form-panel.

It will be very helpful. Please do it.

@ftasso, Thank you, I will look into custom onChange events.

I am thinking of implementing a Custom Code for the onOptionsChange event, which will allow to create dynamic forms.

from volkovlabs-form-panel.

Hello @lynhnn,

This is how we define SELECT elements. It has predefined onChange event, which updates selected value in Options.

            {element.type === FormElementType.SELECT && (
              <InlineField
                label={element.title}
                grow={!!!element.width}
                labelWidth={element.labelWidth}
                tooltip={element.tooltip}
                transparent={!!!element.title}
              >
                <Select
                  value={element.value}
                  onChange={(event: SelectableValue) => {
                    element.value = event?.value;
                    onOptionsChange(options);
                  }}
                  width={element.width}
                  options={element.options || []}
                  className={highlightClass(element)}
                />
              </InlineField>
            )}

Do you want to have you own custom onChange function? Will it help you?

from volkovlabs-form-panel.

@ftasso, Thank you, I will look into custom onChange events.

I am thinking of implementing a Custom Code for the onOptionsChange event, which will allow to create dynamic forms.

from volkovlabs-form-panel.

We implemented various JavaScript hooks and refactoring element states in v3.

from volkovlabs-form-panel.

We implemented various JavaScript hooks and refactoring element states in v3.

Any example for this? I checked the commits and didn't find anything related to this use case. Currently onchange is a function to change element, rather than a event trigger which will be called on element's value has changed.

Solved by using Show if returned value is true, tricky but works.
Example:

const list = elements.find(
  (element) => element.id === 'list'
);
const count = elements.find(
  (element) => element.id === 'count'
);

if (list) {
  count.value = list.value.split('\n').length + "";
}

return true;

from volkovlabs-form-panel.