6

I am trying to output a regular multiline string into a modal component. Somehow, SFDC is refusing to break it down. It either shows the html as text (samples 4/5) or ignores the line break and shows both strings separated by a space (samples 1/2/3)

Any ideas? I don't want to create a custom component just to display this, and I feel I am missing something obvious.

Launch code (none of the variations of modalText are working

var modalText = `aaa \r\n bbb`; //Using backticks per ES6
//var modalText = `aaa \n bbb`; //Using backticks per ES6
//var modalText = `aaa \\n bbb`; //Using backticks per ES6
//var modalText = 'aaa <br/> bbb'; //HTML
//var modalText = 'aaa &lt;br/&gt; bbb'; //HTML

helper.showModal(component, helper, 'My Title', modalText);

showModal code

showModal: function (component, helper, title, modalBody) {

    component.find('overlayLib').showCustomModal({
        header: title,
        body: modalBody,
        showCloseButton: true
    })
},
3
  • 2
    Use create component to initialise an aura:html to display the header?
    – Raul
    Jul 12 '18 at 20:47
  • That's an idea. If you put some meat on it, then can be an answer for me to accept. No big deal if you can't Jul 12 '18 at 20:49
  • @Raul It worked beautifully. Get that answer in and I'll be happy to accept it. Thanks! Jul 12 '18 at 21:01
5

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"
                    })
                }
            }
       );
    }
}) 
0
3

$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"
                })
            }
        }
   );
   }
}) 
2
  • Thanks Mo, that is a great alternative! I'll try it out! Jul 12 '18 at 22:14
  • 1
    +1 I like this more! Was too lazy to dig further. Thanks for improving!
    – Raul
    Jul 12 '18 at 22:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.