Hide inputs for a component dynamically

Technical Questions
1

I have a parent component which has default children as following:

defaultChildren: [
    {
      '@type': '@builder.io/sdk:Element',
      responsiveStyles: {
        large: {
          marginTop: '10px',
          marginBottom: '10px'
        }
      },
      component: {
        name: 'Text Input',
        options: {
          hideFromInputsUI: true, // passing an option to hide inputs for this component
          type: 'search',
          id: 'address_line_1',
          placeholder: 'Search address here...'
        }
      }
    },
]

The child component has some input which should be visible in the UI by default, is there any way to make hideFromUI dynamic for an input?

Builder.registerComponent(TextInput, {
  name: 'Text Input',
  image: input,
  inputs: [
    {
      name: 'name',
      type: 'text',
      required: true,
      hideFromUI: options => options.hideFromUI // something like this, or get the parent options here?
    },
]
})
2

Hi @mossen ,

You can use showIf on the input to dynamically show and hide it. Here is a link to the type definition and here is a link to an example of how it is used.

The options object that is passed to the showIf function is a map of the current options set on the component. Hopefully you are able to accomplish what you need with that. If that does not work and you need access to the parent of the current component, the update we have planned to fix this issue for you: Get parent block in Builder.registerComponent - #6 by korey will also fix this!

1 Like
3

Thanks @korey that helped, however I’d like to know when showIf has more flexibility why there is something as hideFromUi?

4

hideFromUI and showIf provide similar functionality, so you can essentially use either one interchangeably. If you never want a field to be shown (i.e. you are using the field to add data to the component from your codebase and do not want someone to be able to edit it in the Builder editor), hideFromUI is simpler to use. showIf is more helpful if you want to dynamically hide or show an input to a user depending on other settings.

1 Like
5

Important note:
showIf won’t work inside List’s subFields array. But we got this “hack” to make it work (TS type doesn’t support strings for that fields, so we have to ignore ts…)

//@ts-ignore example provided by Builder to convert value to string in subfields
showIf: `options.get('someField') === 'someValue'`,