Is it possible to use dynamic label for <design:attribute>

Question

So what I need is to display some checkboxes with dynamic labels for some component attributes in the app builder(when you add a component to a flexipage you can configure some attributes).

First I wanted to add a multi-select picklist but looks like it is not available for <design:attribute> so now trying with checkboxes. But I need each checkbox label to correspond to some custom field label which may change and it looks that you can't use component variables or custom labels in the design. I've tried

{!$Label.c.labelName}

or

{!v.variableName}

But it does not work.

Is there a way to populate design attribute label dynamically or bind to some other thing like custom label?

Answer 1

Presently, it is not possible to specify custom labels as components' design attribute defaults if that's the ask. This is on the roadmap but not yet prioritized. As a first cut, we're looking to ship support for specifying custom labels (also used for label localization) in the Lightning App Builder in Winter'21 (Safe Harbor).

Answer 2

Yes, you can, but you must do it on the controller, and set some variable:

Controller.js

 var labelSubStr = 'variableNameExample';
 var labelReference = $A.getReference("$Label.c." + labelSubStr);
 // You can add here some validation, when the label doens't exists
 component.set("v.label", labelReference);

comp.cmp

<aura:attribute name="label" type="String"/> <ui:outputText value="{!v.label}" />