Can the “Label” be set for an aura component? (Specifically for custom Utility Bar component)

aura-attributelightning-aura-components

I'm creating a Utility Bar component using Aura.
There does not appear to be a way for me to set the default "Label" or "Icon" for the component when showing on the "Custom" Utility List. It shows the actual Component Name.

For example: Component name is "AgentQuestionsUtilityBar" (which is the aura wrapper for my utility bar component). It shows as "AgentQuestionsUtilityBar" on the custom item list when I add it to the Utility Bar. Once added, I can manually change the label and icon… but I would love to have it set by default.

It appears that the LWC can do this, as it uses "MasterLabel" in the metadata to show the label on the custom component listing. Is there no way to do this for Aura Components? (in the screenshot, you can see the LWC labeled as "Agent Questions" even though in code its name is agentQuestions)

Best Answer

You'd do this through the Aura Component Bundle Design Resource. Specifically, the label attribute:

Sets the label of the component when it displays in tools such as App Builder.

When creating a custom Lightning page template component, this text displays as the name of the template in the Lightning App Builder new page wizard.

If you add this .design file to your aura bundle, it can just be the label if you have no other attributes to define.

<design:component label="Kris Test">

</design:component>

The above looks like the following in the Add Utility Item UI

Related Solutions

[SalesForce] Set a Custom Label for App Builder Lightning Component

Yes. You need to create a design file for the component:

<design:component label="Label For Component">
</design:component>

See the Add a Design Resource to Your Component Bundle section in the dev guide at https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder.htm

[SalesForce] Receiving error when using UtilityBarAPI in Winter ’18

I got it to work, but honestly it was more of a trial and error method. I suspect we are running into a documentation bug of some kind. The documentation states setUtilityIcon({sldsKey, utilityId}) , but the error seems to indicate a key "icon" was missing. So i modified the code as follows and UtilityApi started to work as expected. Check the before and after images for the working scenario.

Controller:

    var utilityAPI = component.find("utilitybar");
    utilityAPI.getEnclosingUtilityId().then(function(response) {
        utilityAPI.setUtilityLabel({label : "Hello World", utilityId : response});
        utilityAPI.setUtilityIcon({icon : "insert_tag_field", utilityId : response });
    });

Before SetUtilityIcon()

After SetUtilityIcon()

We will be able to notice that the icon and label changed to "insert tag field" & "Hello World" respectively . And i guess callback is optional.

Best Answer

Related Solutions

[SalesForce] Set a Custom Label for App Builder Lightning Component

[SalesForce] Receiving error when using UtilityBarAPI in Winter ’18

Related Topic