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

This site is temporarily in read only mode and not accepting new answers.

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