You need to sign in to do that
Don't have an account?
how i can break the toast message into next line?
In toast message its showing long text message without breaking the line and its showing same line.
just i need to break the message and show in toast meessage.
just i need to break the message and show in toast meessage.
Please check below Url. I hope this will help you.
Refer this URL: http://sfdcmonkey.com/2018/05/05/multiline-toast-message-lightning-component/
https://stackoverflow.com/questions/36908445/how-to-display-multi-line-message-in-the-toastr
Please let me know if you have any query.
Please mark it as best Answer if you find it helpful.
Thank You
Ajay Dubedi
All Answers
Please check below Url. I hope this will help you.
Refer this URL: http://sfdcmonkey.com/2018/05/05/multiline-toast-message-lightning-component/
https://stackoverflow.com/questions/36908445/how-to-display-multi-line-message-in-the-toastr
Please let me know if you have any query.
Please mark it as best Answer if you find it helpful.
Thank You
Ajay Dubedi
Step 1 : create a external CSS file with following code : xyz
.toastMessage.forceActionsText{
white-space : pre-line !important;
}
Upload it to static resource
Step 2. Add static resource to lightning component ,it looks like below
<aura:component access="global" >
<!--override Toast CSS with external [.CSS] file.-->
<ltng:require styles="{!$Resource.xyz}" />
</aura:component>
Step 3. Prepaire string with \n from where you break the line into next line.
Example : 'Hello i am first statement \n Hello i am Second statement \n Hello i am Third statement';
Step 4. Your toast message looks linke below.
var MsgStr =response.getReturnValue();
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
mode: 'sticky',
message: MsgStr ,
type : 'success'
});
toastEvent.fire();
Thank you .....
we have to overide css :
1) Create a css file and add in static resource
File Content :
.toastMessage{
white-space: break-spaces !important;
}
2) Import That static resource file in your component
import { loadStyle } from 'lightning/platformResourceLoader';
import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}'
a) Define variable like : isCssLoaded = false;
3) Call it in reRenderCallback
renderedCallback(){
if(this.isCssLoaded) return
this.isCssLoaded = true;
loadStyle(this,CUSTOMCSS).then(()=>{
console.log('loaded');
})
.catch(error=>{
console.log('error to load');
});For Multiple Lines Toast in LWC
we have to override CSS :
1) Create a CSS file and add in static resource
File Content :
.toastMessage{
white-space: break-spaces !important;
}
2) Import That static resource file in your component
import { loadStyle } from 'lightning/platformResourceLoader';
import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}';
a) Define variable like : isCssLoaded = false;
3) Call it in reRenderCallback
renderedCallback(){
if(this.isCssLoaded) return
this.isCssLoaded = true;
loadStyle(this,CUSTOMCSS).then(()=>{
console.log('loaded');
})
.catch(error=>{
console.log('error to load');
});
}
4)Create your toast message like this
var msg = 'This is first-line \nThis is Second Line. \nThis is third Line.';
const evt = new ShowToastEvent({
title: "Complete Required Fields :",
message: msg,
variant: "error",
});
this.dispatchEvent(evt);
}
4)Create your toast message like this
var msg = 'This is first line \nThis is Second Line. \nThis is third Line.';
const evt = new ShowToastEvent({
title: "Complete Required Fields :",
message: msg,
variant: "error",
});
this.dispatchEvent(evt);
https://ideas.salesforce.com/s/idea/a0B8W00000GdkhjUAB/showtoastevent-message-display-in-multiple-line-lwc