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

[Question] How to hide a tab in the edit form for a pre-defined component?

Open opcodewriter opened this issue 3 years ago • 1 comments

Following the example from https://help.form.io/developers/form-builder#adding-pre-defined-components, is it possible to hide, for example, the "API" tab for the text field with the 'First Name' label?

I tried to override Formio.Components.components.datetime.editForm so I could modify the edit form on the fly, the problem is there's no way to identify whether it's the pre-defined text field component or any other text field component. The parameter which Formio.Components.components.datetime.editForm receives is the edit form of the textfield component.

Is there a way beside creating a custom new component based on the textfield?

opcodewriter avatar Jul 18 '22 12:07 opcodewriter

Just provide editForm config without tabs

editForm custom config for textfield

export default () => ({
    components: [
        {
            weight: 0,
            type: 'textfield',
            input: true,
            key: 'label',
            label: 'Title',
            validate: {
                required: true,
            },
        },
        {
            weight: 1,
            type: 'textfield',
            input: true,
            key: 'placeholder',
            label: 'Hint when the field is empty',
            placeholder: 'Enter hint',
            tooltip: 'The placeholder text that will appear when this field is empty.',
        },
        {
            weight: 2,
            type: 'textfield',
            input: true,
            key: 'tooltip',
            label: 'Tooltip',
            placeholder: 'Enter text for tooltip',
            tooltip: 'Adds a tooltip to the side of this field.',
        },
        {
            weight: 3,
            type: 'textfield',
            input: true,
            key: 'description',
            label: 'Instructional sub-text - used to provide guidance or clarification',
            placeholder: 'Enter sub-text',
            description: '150 symbols',
            validate: {
                maxLength: 150,
            },
        },
        {
            weight: 4,
            type: 'checkbox',
            label: 'Required',
            tooltip: 'A required field must be filled in before the form can be submitted.',
            key: 'validate.required',
            input: true,
        },
    ],
});

and after that update default editForm

Formio.Components.components.textfield.editForm = textField;

nikita-remeslov avatar Aug 02 '22 17:08 nikita-remeslov

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

daneformio avatar Feb 07 '24 14:02 daneformio