Modals (overlayLibrary) and multi line strings
In $A.createComponents
, create an additional component: aura:unescapedHtml
for instance; to generate the appropriate HTML and use it as modal header. Example here:
({
handleShowModal: function(component, evt, helper) {
var modalHeader;
var modalBody;
$A.createComponents([
["aura:unescapedHtml", {
"value": "<h1>Confirmation?</h2><br/>Please click to confirm!"
}],
["c:modalContent",{}]
],
function(components, status){
if (status === "SUCCESS") {
modalHeader = components[0];
modalBody = components[1];
component.find('overlayLib').showCustomModal({
header: modalHeader,
body: modalBody,
showCloseButton: true,
cssClass: "my-modal,my-custom-class,my-other-class"
})
}
}
);
}
})
$A.createComponent as per the previous answer above is great , However we can further improvise this using the lightning:formattedRichText. The advantage of using lightning:formattedRichText over aura:unescapedHtml is it automatically takes care of XSS by sanitizing the value passed to it.Read more here
The below code works
({
handleShowModal: function(component, evt, helper) {
var modalHeader;
var modalBody;
$A.createComponents([
["lightning:formattedRichText", {
"value": "<h1>Confirmation?</h2><br/>Please click to confirm!"
}],
["lightning:formattedRichText",{"value": "aaa <br/> bbb"}]
],
function(components, status){
if (status === "SUCCESS") {
modalHeader = components[0];
modalBody = components[1];
component.find('overlayLib').showCustomModal({
header: modalHeader,
body: modalBody,
showCloseButton: true,
cssClass: "my-modal,my-custom-class,my-other-class"
})
}
}
);
}
})