[Question] Is it possible customized options popup in the form builder

[anandbhaskaran]

Environment

Please provide as many details as you can:

• Hosting type
  • [x] Form.io
  • [ ] Local deployment
  • Version:
• Formio.js version: Latest
• Frontend framework: Vue
• Browser: Chrome
• Browser version: Latest

Steps to Reproduce

1. Open the form builder
2. Add any new component
3. A detailed options menu appears

Requirement

I am building a simplified form builder and I would like to have very few options for each component. Hence I would like to remove the tabs in the options popup and also remove most of the fields that are not relevant. I want to know if there is a possibility to achieve this.

Thanks in advance

[wag110894]

Hello @anandbhaskaran,

Have you been able to take a look at this example of a custom builder using formio.js: https://formio.github.io/formio.js/app/examples/custombuilder.html?

Looking forward to your response.

Thank you.

[anandbhaskaran]

Hello @wag110894 , Thanks for the quick reply.

Yes, I looked into this example.

But what I am looking for is a simpler options popup on each component (by setting many default values):

Something like this:

instead of

[randallknutson]

You can accomplish this with the link shared above. The options object has ways to override and turn off fields and tabs to simplify it so that you can achieve what you are looking for. You can also write a module to do this with examples at https://github.com/formio/contrib and https://github.com/formio/module-example

[anandbhaskaran]

Thank you for the pointer. The first option of yours (where we can override the options object) is elegant for me.

I dig a bit deeper into the code and landed in al the options a component can have -> https://github.com/formio/formio.js/blob/master/src/components/_classes/component/Component.js

Can you please help me (or link to the documentation) to find which option I should override to remove tabs and other objects?

[travist]

You can also completely define your own editForm like so.

Formio.Components.components.textfield.editForm = function() {
  return {
    components: [
       {type: 'textfield', key: 'label', label: 'Label'},
       {type: 'textfield', key: 'placeholder', label: 'Placeholder'}
    ]
  };
};

You can actually run this in the console @ https://portal.form.io to see it working.

[anandbhaskaran]

This is a fantastic answer! Thank you @travist :)

One last question: Is it possible to reconfigure the UI itself? For example:

1. All the available components appear in a row (instead of column)
2. The preview component in the options popup, appears full-width and options appear below, etc ..

Thanks in advance.

[randallknutson]

I don't know that we have an easy answer to that question. You're going to need to dig into the source code to figure it out. You may be able to reconfigure the components from column to row by overriding the template for the form builder.

Feel free to make some pull requests to make it possible to do the things you are asking if it already isn't possible.

[dilanthas]

Hi, Im trying to achieve the same thing with the formio angular library. I'm basically trying to simplify the form component configuration popup by giving few basic options . Are there any examples that i can follow ? Thanks

[Tatsiana8]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!