Get parent block in Builder.registerComponent

Technical Questions
1

Hi,
Is there anyway to get the parent block name to dynamically have options for an input?
sample code:

Builder.registerComponent(MergeTag, {
  name: 'Merge Tag',
  image: button,
  noWrap: true,
  requiresParent: {
    message: 'Merge tag can be used in only in contact us,.... components',
    query: {
      'component.name': { $in: ['Contact Us', 'Standard Single Claim'] }
    }
  },
  inputs: [
    {
      type: 'string',
      name: 'tag',
      required: true,
      enum: parent => pageTags[parent] // get options based on parent block
    }
  ]
});
2

Hey @mossen, if you exclude the message then the component property will be added. However, it sounds like you’re looking for something more dynamic, which we don’t currently support. I will pass this along to our team as a feature request to implement!

1 Like
3

@kara Just to make sure that we are on the sam page, I am looking for a way to find the parent component inside inputs:

inputs: [
    {
      type: 'string',
      name: 'tag',
      required: true,
      enum: parentComponent => pageTags[parentComponent.name] // get options based on parent block
    }
  ]
4

Hi @mossen, we’re working on an example to show you how to achieve similar results with showIf. We’ll update you soon!

5

Thanks @kara, any news?

6

Hi @mossen, sorry for the delay!

Unfortunately there is not a way to do this in Builder. However, we have an idea on how to make this sort of behavior possible, but it will take some coding on our end to make it happen. We will reach back out and let you know when we make the update!

7

Hi @mossen,

We shipped an update recently that passes an array containing the component’s parent elements to showIf. For example, if I wanted to create an input that only shows if the component the input is on is inside a Columns component, I would write something like this:

{
  name: 'title',
  type: 'string',
  defaultValue: 'Your Title Here',
  showIf: (options, parent, parentElements) => {
    return parentElements.some(el => el && el.component && el.component.name === 'Columns');
  }
}

You can use this approach to accomplish what you wanted to do by adding multiple inputs and showing/hiding them depending on what name of the parent component, something like:

inputs: [
  {
    type: 'string',
    name: 'tag',
    enum: ['tag1', 'tag2', 'tag3'],
    showIf: (options, parent, parentElements) => {
      return parentElements.some(el => el && el.component && el.component.name === 'Columns');
    }
  },
  {
    type: 'string',
    name: 'tag',
    enum: ['tag4', 'tag5', 'tag6'],
    showIf: (options, parent, parentElements) => {
      return parentElements.some(el => el && el.component && el.component.name === 'Rows');
    }
  }
]

Hope that helps!

1 Like