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!

[Himanshu-Rawat-008]

Getting this error, while async and await in select here is implementation

[Object]: {
      type: 'select',
      label: Object,
      columns: { label: 6 },
      search: true,
      allowAbsent: true,
      items: async () => {
          const res = await getData();
          return res;
      },
      object: true,
      conditions: [
          [`${this.section}.${Type}`, [Property]],
      ],
      onChange: (newValue, oldValue, el$) => {
          const Property$ = el$.form$.el$(`${this.section}.${Property}`);
          Property$?.clear();
          Property$?.updateItems();

          // Important: Save the new value only if not loading since onChange is custom and may not be triggered during initial load
          if (!this.isLoading) {
              this.save(newValue, oldValue, el$.name, el$);
          }
      },
}

inside getData converting response

async getData() {
 const res = await fetchData();
 return res.data.map((item) => ({ ...item, value: item.id, label: item.name })) 
}

Edited:- I found out object: true is giving this error. Can you help me understand why?

[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,
        },
    }