Custom component friendlyName deprecated for component name

Technical Questions
1

What are you trying to accomplish
We want to be able to use friendlyName to rename components so that we don’t have to rebuild all the existing content on production. There is an internal initiative to use consistent component naming across teams and this requires us to rename some components already existing on production.

Screenshots or video link

Screen Shot 2022-12-06 at 1.58.50 PM
Screen Shot 2022-12-06 at 1.58.50 PM1876×2382 240 KB

Code stack you are integrating Builder with
NextJS

Sample Code of what we’re trying to achieve

Builder.registerComponent(Img, {
  name: Img,
  friendlyName: 'Image', // <-- any solution for this
  inputs: [
    {
      name: 'image',
      type: 'file',
      allowedFileTypes: ['jpg', 'png'],
      required: true,
    },
  ],
});
2

Hi @Jason.yang,

Since friendlyName is deprecated, it can’t be used anymore, but there is a workaround that you can use possibly so that you don’t have to rebuild all existing components.

You can register the existing component with a friendly name for insertMenu. Below is an example

Builder.registerComponent(MyCustomComponent, {
  name: "ExampleCustomComponent",
  friendlyName: "SOME GOOD NAME",
  inputs: [
    { name: "title", type: "string", defaultValue: "I am a React component!" },
    {
      name: "description",
      type: "string",
      defaultValue: "Find my source in /pages/[...page].js",
    },
  ],
});

Builder.register("insertMenu", {
  name: "UPDATED COMPONENTS",
  items: [{ item: "ExampleCustomComponent", name: "THIS IS REALLY NEW!!" }],
});

image
image319×650 20.3 KB

1 Like
3

@manish-sharma This shows “THIS IS REALLY NEW!!” in the insert menu, but “ExampleCustomComponent” is still shown as the layer name. Is there any way to fully implement the friendlyName functionality so that only the `“THIS IS REALLY NEW!!” is seen from the editor?

We found the friendlyName really convenient and useful for us, so if there’s any way to bring it back or something that allows us to register a component as one thing and show it in the editor as something else, that would be amazing. :slight_smile:

1 Like
4

@manish-sharma would love to bring back friendlyName too! it is not useful if the real name is still shown in the layer.

5

Hello @morty,

I’m pleased to inform you that we have reinstated the friendlyName prop. You should now be able to utilize it as needed.

If you have any further questions or require additional assistance, please don’t hesitate to reach out.

6

Hi Manish!

If i use friendlyName, how would I make the friendlyName appear as the component name on the menu?
I am having an issue with that.

Thank you!

7

Hello @morty,

Currently, I don’t think that’s possible, however, you can submit a feature request at Builder.io Ideas

You may also check below article for options available for custom components

8

Hi team, just wanted to come back here and revisit this topic to let everyone know that friendlyName has actually been un-deprecated, and should now work as expected again! Please check it out and let us know if you have any issues!

1 Like