Access field value for different element

[Himanshu-Rawat-008]

To be more clear on topic
I want to create two custom element lets say Custom_First and Custom_Second with two different field under properties something like custom_first_field and custom_second_field which can be of type text or list.
Now I have two scenarios from here let me know how it can be solved -

1. based on value of custom_first_field user should not able to drag and drop custom_second element
2. based on value of custom_first_field, I can show some type of error notification saying value in custom_first_field is not valid

Also, in same way I want to have multiple custom field, based on values in these fields, default values or values in list (if I choose to go with SelectField) for another custom element might change.

I can access different field values inside same element.

[adamberecz]

In custom elements you can inject form$ ref that is the instance of the wrapping Vueform component.

The Vueform component has an el$ method that can be used to reach other elements and use their props and methods. For example in this form:

const schema = {
  foo: {
    type: 'custom_first',
    // ...
  },
  bar: {
    type: 'custom_second',
    // ...
  },
}

you can reach the values like this: form$.value.el$('foo').value or form$.value.el$('bar').value.

If you are looking for a more specific answer that involves manipulating drag and drop and more advanced things, I am happy to:

• help you with the implementation if you can send a sandbox with the current state
• jump on a call to look into your case

Let me know which works for you the best!

[adamberecz]

Could you move this to another fork and send it as a link? It's hard to lose track where we are at exactly when using field names like [Object] that appears nowhere in previous code.

[Himanshu-Rawat-008]

Here is reference implementation in same fork, similar to actual implementation.
getting same error.

[adamberecz]

Thanks, here's the update. The issue was that selects were setting object values, but that's not allowed for all elements by default when using multiple elements in the same field (docs was missing).

I've added two things:

const CustomField = class extends BaseElementField {
  // Use this if you need to store object values
  objectValue = true;
}

onChange: (newValue, oldValue, el$) => {
  const custom4$ = el$.form$.el$(`${this.section}.${custom4}`);

  // Making sure we don't clear on load
  if (!this.isLoading) {
    custom4$?.clear();
  }

  custom4$?.updateItems();

  if (!this.isLoading) {
    this.save(newValue, oldValue, el$.name, el$);
  }
},

[Himanshu-Rawat-008]

Here is example. I want custom section in tabs field.

const customSection = {
    'Custom Section': {
        name: 'Custom Section',
        label: 'Custom Section',
        fields: {
            custom: { type: CustomField },
        },
    },
};

const tabSection = { ...elementTypes.tabs.sections };
const tabSections = {
     ...customSection,
     ...tabSection,
 };

 export const tabElementType = {
     ...elementTypes.tabs,
     sections: tabSections,
 };

element: {
        types: {
            tabs: tabElementType,
        },
    }

[adamberecz]

Thank you for the patience @Himanshu-Rawat-008 and sorry for taking longer to reply to this. I've published a patch for the builder that would allow extending the tab/step panel. It requires a slightly different approach—see a PoC here.

You need to have a different custom field for page (tab/step) types (see CustomPageField.js). Then you need to add custom sections directly tab.sections in builder.config.js. Let me know if I can help with anything else. (also make sure to upgrade @vueform/builder to 1.11.3 before trying this in your project)

[Himanshu-Rawat-008]

Hi @adamberecz, Thanks for your help.
Creating Elements

type of value for components is Array

But when I tried it was giving error finally I replace it with type Object and it started rendering. Here's

[adamberecz]

Thanks for pointing this out. I'll make sure it gets fixed in the docs!

[Himanshu-Rawat-008]

One more problem I faced please let me know why it is happening here is repo

Steps

• Drag text element
• Under Custom Section, select any value in CustomConfig1 which will invoke function onChange
• Now move to code section, only value for CustomConfig6 is set but in UI both values are rendering

What should happen

• CustomConfig5 should also be set. which is not happening

[adamberecz]

TL;DR
Add delayable = false to your class and it should be fine. Demo here.

---

When using multiple elements inside a single field (like in CustomField), an onChange event is attached to all of them unless you explicitly define one (as with custom-config-1). This means that when any element changes, it tells the builder to update the corresponding property (custom-config-1, custom-config-5, or custom-config-6) in the selected element’s schema.

By default, each field has a built‑in delay to avoid updating the schema on every keystroke. Without it, typing into a large form (eg., just changing a label) would cause noticeable lag because the schema would be rebuilt after each character. Instead, the builder debounces these updates and only applies the last change. Internally, it keeps a queue of update requests, keyed by the field’s name. In this case, the name is CustomField, so it’s shared by all elements (custom-config-1, custom-config-5, custom-config-6). As a result, changing custom-config-1 also queues updates for all three, and the last one in the queue will typically be custom-config-6.

You can disable this queuing by setting delayable = false. Also, if you want to update multiple elements in the field directly, you can do it more simply like this:

if (!this.isLoading) {
  el$.form$.update({
    [custom5]: 'hello',
    [custom6]: 'hello',
  })
 }