4

I have a lightning component which I am using for quickaction and I currently show an error message which is passed from the controller as a String. The problem is, I want to show the error message in multiple lines instead of a single line. Below is the relevant code for the same:

var action2 = component.get("c.callfun");
            action2.setParams({"accId" : recId});
            action2.setCallback(this, function(response) {
            var state = response.getState();
                errMsgs = response.getReturnValue();
                var errmsg= new Array(); 
                errmsg = errMsgs.toString().split("."); 
                //alert(errmsg);
                var i;
                resultsToast.setParams({
                "title": "Error",
                    "message": errMsgs
            });

            resultsToast.fire();
            var dismissActionPanel = $A.get("e.force:closeQuickAction");
            dismissActionPanel.fire();
            });
            $A.enqueueAction(action2);

the sample error message being returned from my apex controller is "this is a test error. this is another error. this could be the last error." - basically each being separated by a full stop (".") - Hence I was trying to split the same which again didnt yield any results.

Is there any way to display these in separate lines in the toast window - possibly with a bullet point or something?

  • I need this a week or so ago as well. I tried everything I could think of and was not able to have multiple lines on the message as all html tags and \r\n were escaped. I ended up splitting the message into the title and message. Only works if you only have two lines though....Will be watching this. – Eric Oct 10 '17 at 15:50
  • Thanks for the reply Eric. Could you please tell me how splitting the message into title and message worked? Like did you do the splitting up of the string in the Javascript or at the Apex Controller level? – Sid Oct 11 '17 at 1:15
  • You can do it whatever way works best for you – Eric Oct 11 '17 at 3:26
  • I tried it this way - didnt work : for(i=0;i<errmsg.length;i++){ resultsToast.setParams({ "title": "Error", "message": errmsg[i]+"" }); } resultsToast.fire(); – Sid Oct 11 '17 at 5:54
  • Your title is still Error and not the first part of the string. You cannot have multiple lines in either the title or message and setting the params multiple times will only preserve the last iteration – Eric Oct 11 '17 at 5:56
1

You can accomplish this using jquery to change the css of the toast component.

Add this line before your toast $('.forceToastManager').css('white-space', 'pre-wrap');

Then just add \n's wherever you want line breaks in your message. In your case you can replace . with \n and I believe it will work as you want.

  • Did this worked for you? I tried Jquery method, but no luck. Nothing is happening. – Ajay Feb 1 '18 at 15:29
  • @Ajay yes, it's working for me in chrome and firefox. Are you using a different browser? It may affect it. Otherwise make sure that this is actually being called before. So put it in your afterScriptsLoaded method, and make sure your method is being called after it, you may set up your init to happen before scriptsLoaded so just check that. Otherwise I don't know why it wouldn't work for you – Aequitas Feb 1 '18 at 22:28

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.