formio.js icon indicating copy to clipboard operation
formio.js copied to clipboard

Having issues while adding additional properties to Textfield component configuration model

Open prabhjotkaur10 opened this issue 1 year ago • 1 comments

I have a Custom Text field component, which is. created by extending Textfield component as follows,

`/* tslint:disable */

import TextField from 'formiojs/components/textfield/TextField';
import editForm from './editForm';


export default class CustomTextField extends TextField {
  static schema(...extend) {
    return TextField.schema(
      { 
        input: false,
        persistent: false,
      },
      ...extend
    );
  }

  static editForm = editForm;

  static get builderInfo() {
    return {
      title: 'Text field',
      group: 'basic',
      icon: 'code',
      weight: 70,
      schema: CustomTextField.schema(),
    };
  }
}

` editform.js is as follows

import baseEditForm from 'formiojs/components/_classes/component/Component.form';

export default (...extend) => {
  return baseEditForm(
    [
      {
        key: 'display',
        components: [
          {
            // You can ignore existing fields.
            key: 'placeholder',
            ignore: true,
          },
          {
            // Or add your own. The syntax is form.io component definitions.
            type: 'textfield',
            input: true,
            label: 'My Custom Setting',
            weight: 12,
            key: 'myCustomSetting', // This will be available as component.myCustomSetting
          },
        ],
      },
      {
        key: 'data',
        components: [],
      },
      {
        key: 'validation',
        components: [],
      },
      {
        key: 'api',
        components: [],
      },
      {
        key: 'conditional',
        components: [],
      },
      {
        key: 'logic',
        components: [],
      },
    ],
    ...extend
  );
};
```
`

The above configuration is not adding the custom property to the configuration model while I try to add the custom text field. 
What is the correct way to do it?

Thanks!

prabhjotkaur10 avatar Jun 25 '24 07:06 prabhjotkaur10

I have a similar setup to what you have but was able to see the my custom properties on my custom component. What are you doing to check that the custom property is added to the configuration model? Also what version of formiojs are you on? We do have a tutorial on making a custom component in our help docs that might be of use https://help.form.io/faq/tutorials-and-workflows/custom-component

ZenMasterJacob20011 avatar Nov 27 '24 14:11 ZenMasterJacob20011