I'm currently trying to dynamically build nested HTML components using $A.createComponents, but it doesn't seem to be working (I'm receiving an error message: An internal server error has occured).
The output I'm trying to achieve is similar to (repeated for each field):
<td>
<div class="slds-truncate" title="myDynamicTitle>My Dynamic Body Content</div>
</td>
My helper method is as follows:
populateRow : function(component) {
var record = component.get("v.record");
console.log('record = ' + JSON.stringify(record));
var fields = component.get("v.fields");
for (var idx in fields) {
var field = fields[idx];
var value = '';
if(field.includes('.')) {
value = record[field.substring(0, field.indexOf('.'))].Name
} else {
value = record[field];
}
$A.createComponents([
["aura:HTML", {
"tag": "td",
"HTMLAttributes": {
"id": "tdId"
}
}],
["aura:HTML", {
"tag": "div",
"body": value,
"HTMLAttributes": {
"id": "dynamicDiv",
"title": value,
"class": "slds-truncate"
}
}]
],
function(components, status, errorMessage){
if (status === "SUCCESS") {
var td = components[0];
var div = components[1];
td.set("v.body", div);
var container = cmp.find("container");
if (container.isValid()) {
var body = container.get("v.body");
body.push(td);
container.set("v.body", body);
}
}
else if (status === "INCOMPLETE") {
console.log("No response from server or client is offline.")
// Show offline error
}
else if (status === "ERROR") {
console.log("Error: " + JSON.stringify(errorMessage));
// Show error message
}
}
);
}
}
And my component (the init function calls the helper.populateRow function):
<aura:component description="DynamicListElement">
<aura:attribute name="record" type="sObject" required="true"/>
<aura:attribute name="fields" type="String[]" required="true"/>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:registerEvent name="dynamicListElementSelected" type="c:DynamicListElementSelected"/>
{!v.body}
</aura:component>