0

I am trying to print lightning aura markup from apex to lightning component, i have my reasons :( but its not working, I tried unescapedHTML as well.

Here is how my lightning component looks

Aura Component

<aura:component controller="controller" implements="force:appHostable" access="global" >
    {!v.option}                                                    
</aura:component>

Apex Class

@AuraEnabled
public static string getIdentifiers() {
    String options = '<lightning:helptext iconName="" content="' + testing +' " class="customIcon" iconVariant="inverse"></lightning:helptext>';                                           
    return options;
}

1 Answer 1

2

Lightning components need to be rendered on the client, so you cannot just drop markup in to an attribute. Instead, you would need to return a payload suitable for $A.createComponents and call that instead.

Apex

public class AuraComponent {
  @AuraEnabled public String name;
  @AuraEnabled public Map<String, String> props = new Map<String, String>();
}
@AuraEnabled public static List<AuraComponent> getIdentifiers() {
  AuraComponent[] values = new AuraComponent[0];
  AuraComponent value = new AuraComponent();
  value.name = 'lightning:helptext';
  value.props.put('iconName','');
  value.props.put('content','testing');
  value.props.put('class','customIcon');
  values.add(value);
  return values;
}

Component Markup

<aura:attribute name="bodyattr" type="Aura.Component[]" />
{!v.bodyattr}

Controller/Helper JS

var action = component.get("c.getIdentifiers");
action.setCallback(this, result =>
  if(result.getState() === 'SUCCESS') {
    $A.createComponents(
      // Convert to array of array format expected by createComponents
      result.getReturnValue().map(row => [ row.name, row.props ]),
      // Set the value in to the attribute for rendering
      components => component.set("v.bodyattr", components)
    );
  } else { /* handle errors */ }
);
$A.enqueueAction(action);
2
  • thanks @sfdcfox I got confused to how to use this result.getReturnValue().map(row => [ row.name, row.props ]) Jun 14, 2019 at 21:27
  • @AbhiTripathi It's just Array.prototype.map, which translates the data from the server into the appropriate format for the method. This technique allows you to specify any number of parameters fairly easily. You night want to read more on MDN
    – sfdcfox
    Jun 14, 2019 at 22:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .