Show/hide form component settings

[Bdestasio33]

Is there a way to show or hide the settings for a form field? Trying to enable and disable user per login for who can access certain settings on a field. Thanks for the help in advance.

[randallknutson]

These can be passed in as the options to the form. See http://formio.github.io/formio.js/app/examples/custombuilder.html

You can configure a different options.builder config based on the user role.

[Bdestasio33]

I guess I should have been a little more descriptive. I want to hide the options on the modal that comes up when you hit the gear icon on a field. So that for example a fields display properties do not show or the hide input does not show. I didn't see a way to do this on the field settings.

[Bdestasio33]

Not returning a value to the API for a field setting and not allowing them to change this in the builder would work. Just wasn't sure if this was able to be done.

[travist]

The link that @randallknutson mentioned earlier does show how this is done in that modal that comes up. This uses the editForm configuration like this.

Formio.builder(document.getElementById('builder'), {}, {
  editForm: {
    textfield: [
      {
        key: 'api',
        ignore: true
      }        
    ]
  }
});

You can override any component within the component tree by just navigate to it and then make whatever changes you want to make. This configuration gets passed in as an override JSON for those fields.

[JackyKoh]

@travist how would you do this to hide a specific setting. e.g. data's widget or custom css class

[travist]

@JackyKoh yes you can target any element within the editForm of that component. So get a sense of what the editForm looks like for a specific field, you can type the following within the console of your browser when looking at the form builder.

Formio.Components.components.textfield.editForm()

You can then replace "textfield" with any component type such as...

Formio.Components.components.email.editForm()

[iHamzaKhanzada]

The link that @randallknutson mentioned earlier does show how this is done in that modal that comes up. This uses the editForm configuration like this.

Formio.builder(document.getElementById('builder'), {}, {
  editForm: {
    textfield: [
      {
        key: 'api',
        ignore: true
      }        
    ]
  }
});

You can override any component within the component tree by just navigate to it and then make whatever changes you want to make. This configuration gets passed in as an override JSON for those fields.

Thankyou for defining this, I have created a custom property through this configuration. I just want it to be required so that whenever someone using the formbuilder drags and drops that component and they don't specify its value in the edit modal that opens automatically, it shows them an error that this component is required, just like it does with Label component of textfield in the edit modal. If you don't specify the value for label in the edit modal, it shows a required validation error. Any idea how to do this ?

I am using the following code

editForm: { panel: [ { key: 'display', components: [ { tooltip: "Is this form Single Dimensional or Two Dimensional", type: "select", label: "Form Type?", key: "hasRows", data: { values: [ { value: "false", label: "1D Form" }, { value: "true", label: "2D Form" } ] }, dataSrc: "values", multiple: false, input: true, isRequired: true }, ] }]}

[jeriah-formio]

@iHamzaKhanzada Can you please open a new ticket as as this thread has been closed for some time. Thanks!

[0liver]

@JackyKoh and my future self:

how would you do this to hide a specific setting. e.g. data's widget or custom css class?

Formio.builder(document.getElementById('builder'), {}, {
  editForm: {
    textfield: [
      {
        key: 'display',
        components: [
          {
            key: 'widget.type',
            ignore: true,
          },
          {
            key: 'customClass',
            ignore: true,
          }
        ],
      }        
    ]
  }
});

I found the key values by executing Formio.Components.components.textfield.editForm() in a browser console of a window that has the form builder loaded:

[DanDvoracek]

Hi guys,

My question is pretty close to this thread so let me ask it here. I got the logic about hiding/showing fields for components (I'll probably end up with a massive json file). But my concern is about the "inherited component". Basically, when creating a structure for a custom builder, I can define "custom" component that are based on formio's components offer.

I can do something like this:

builder_components = {
...
        "components":{
            "sectionTitle":{
                "title":"Section title",
                "key":"sectionTitle",
                "icon":"header",
                "schema":{
                    "label":"Section title",
                    "type":"htmlelement",
                    "key":"sectionTitle",
                    "tag": "h3",
                    "className": "simple-title",
                    "content": "Un titre de section",
                }
            },
...

Thing is, I am then unable to disable the tag parameter for this component using the following snippet in my json:

builder_params = {
...
"sectionTitle":[
        {
            "key":"display",
            "ignore":false,
            "components":[
                {
                    "key":"tag",
                    "ignore":true
                },
                
            ]
        },
...

Any idea of how I could disable the tag for this component only, meaning without having to disable it on the htmlelement component that is is based on ?

This feature would be extremely helpful, but I didn't find a way yet to achieve it. @randallknutson is that even possible ?

Thanks for the help in advance

[0liver]

Maybe this will work (using unknown as the component type):

Formio.builder(document.getElementById('builder'), {}, {
  editForm: {
    unknown: [
      {
        key: 'display',
        components: [
          {
            key: 'tag',
            ignore: true,
          },
        ],
      }        
    ]
  }
});

I got the idea of using unknown by inspecting Formio.Components.components in the debug console, as mentioned in my comment above.

I haven't worked with custom components, yet, though, so I might be completely wrong.

[opcodewriter]

I have the builder configured to show the component panel with components which are based on the existing components, but with some customization. For example, beside the 'select' component, I also have a ' select' based component called 'mySelect' which has some default settings changed (not shown below):

Formio.builder(document.getElementById('builder'), {}, {
  builder: {
                    basic: {
                        components: {
                            mySelect: {
                                title: "MySelect",
                                key: 'myselect',
                                icon: "th-list",
                                schema: {
                                    label: 'MySelect',
                                    type: 'select',
                                    key: 'myselect',
                                    input: true,
                                    ...
                                }
                            }
                        }
                    },
  }
});

How can I customize the component edit form only for 'mySelect'? For example, I want to hide some of the options. I could not see a way other than creating a custom component. I wish there was an easier way to have this kind of customization.

[KwamsC]

is there a way to hide a component, within a component, without a key?

Wanted to ignore key validate.customPrivate in validation, but it is nested in key validation -> custom-validation-js -> which has a type "well", but no key -> validate.customPrivate.