salesforce lightning zero-based learning (xiv) Toast light into the light

Benpian Reference:

https://developer.salesforce.com/docs/component-library/bundle/force:showToast/specification

https://archive-2_9_4.lightningdesignsystem.com/components/toast/

Toast is unlikely less than the components in the project, for displaying a message in the page header. Prior often used, but no in-depth studies had recently just started lightning project will further research, I learned than ever to understand a little more, it is hereby concluded later for easy viewing and to have no contact with the small partner sweep blind.

A. Toast

Toast for displaying a message in the header of the page, such as our success will be prompted to modify the data after the update is complete, the abnormal will be prompted to update failure, etc. Lightning Toast package will become an event, we just need to get Toast events according to the specified procedure and can be triggered fire. demo below shows the use of toast using $ A.get ( "e.force: showToast") will be able to get events, add the relevant attribute trigger function can be realized Toast.

showToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        "title": "Success!",
        "message": "The record has been updated successfully."
    });
    toastEvent.fire();
}

So what parameters Toast has it?

title: This parameter is used to display the header area of the message, usually the title will be slightly larger font appear above;
duration: This parameter is used to set the current display Toast automatically disappear after how long, in milliseconds, this property can not fill, the default is 5 seconds, set time if less than five seconds will be processed in five seconds;
message: This parameter is used to display the display content of Toast;
mode: Toast display mode, Toast supports three modes: dismissible (message display contains a close button, if you click the button, you can immediately Toast disappear if you do not click on the default 5 seconds to disappear, this is the default option) / pester ( do not show close button, automatically disappear after a few seconds) / sticky (only show the close button, do not click on the close button never disappear)
type: Toast of types, different types will show different icon and different color styles. Selectable values are: error / warning / success / info / other. We may often use the first four, the last one not often used, in fact, other is the default value of this property, to show the same style and color info, this difference is not showing icon. Of course not show icon is not absolute, if the matching key attribute may show other icons, so if we want to show info of style but do not want to use the info icon, we can consider other then you can set the key.
key: When we chose the other type of situation, where you can specify other icons toast inside the show, you can choose the name of the icon lightning design system in.
messageTemplate: Toast the above message for the news show, but can only display information String string, if we need additional enhanced functionality to show (for example you want to display a clickable URL in the message toast), we need to use messageTemplate placed by parameter placeholder, using messageTemplateData filled. messageTemplate the placeholder like we declare in the custom label, also starting at 0, using {}, such as Record {0} created! See it {1} here set up two placeholder, messageTemplateData need to pass two parameters come.
messageTemplateData: messageTemplate later was used, the use of this property need to replace the placeholder value, which package is a set of text, and text corresponding action.

In addition to Toast, little friends can view their own: lightning: overlayLibrary (display messages by Modal and popover) / lightning: notificationsLibrary (display messages by way of notice and toast)

Now that you have completed all the above attributes and functions Toast Toast description can achieve, then we can show the following commonly used some simple optimization and processing.

Scene One. Content multi-line display

Toast the default content can only display a single line, we made a demo, set to toast the sticky, so that we can look to achieve resolution of html Toast realized as shown below. By css content of the picture we can see the contents of toast using toastMessage two forceActionsText for rendering, css rendering because there are before and after the order, we only need to rewrite the two styles css, setting white-space: pre-line! important; it can, meaning if there is the case where spaces, blank lines and merge all wrap retention and use of message where needed to wrap \ n string can be separated in order to achieve wrap.

We tried the css in the current component bundle to re-render the pattern found is not available, so only static resource to introduce an external covering for this style.

.toastMessage.forceActionsText{
    white-space : pre-line !important;
}

Way to create css, content is content described above, and then uploaded to the named static resource, the code can be introduced. demo we named static resource name multipleLineToastCss.

We only need to code <ltng: require styles = "{$ Resource.multipleLineToastCss!}" /> To.

We did a simple demo to verify:

<aura:component implements="flexipage:availableForAllPageTypes">
    <ltng:require styles="{!$Resource.multipleLineToastCss}"/>
    <lightning:button variant="brand" label="show toast" onclick="{!c.showToast}"/>
</aura:component>

Corresponding controller.js

showToast : function(component, event, helper) {
   var toastEvent = $A.get("e.force:showToast");
   toastEvent.setParams({
        mode: 'sticky',
        title: 'Info',
        type: 'info',
        message: 'test message\ntest multiple lines'
    });
    toastEvent.fire();
}

Scene II. Toast to show a clickable URL

Under certain scenarios, we need to show Toast of time with the URL, the user click on a URL to jump to the page. In this case we only need to use messageTemplate and messageTemplateData to match can be realized.

showMyToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        mode: 'sticky',
        message: 'This is a required message',
        messageTemplate: 'Record {0} created! See it {1}!',
        messageTemplateData: ['Salesforce', {
            url: 'http://www.salesforce.com/',
            label: 'here',
            }
        ]
    });
    toastEvent.fire();
}

Scene Three. Toast change the message icon

We know that when the type assignment toast, there are default styles and icons for success / warning / error / info will be, when we need to show the other icons, we only need to set the type for the other or not set type (the default is other) then you can set the key. key, we can find the name of the icon lightning design system assignment can be.

showToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        mode: 'sticky',
        title: 'Info',
        type: 'other',
        key:'like',
        message: 'test message\ntest multiple lines'
    });
    toastEvent.fire();
}

二. aura:method

We have a lot of content can be a common component of the operation, such as toast for the show (we only need to set the method to pass parameters, you can call, do not need to declare each component of the controller / helper js method is repeated declarations Toast and trigger) for picklist value acquisition, acquisition of label fields for the table. Making the public understand the need to set up a component names package aura, aura: method.

We go to method calls are usually binding a handler or an event in order to call the execution method, the use of aura in the front end of normal: method defines a method can be used as part of the API components, so that we can call this part directly in the client-controller method. Use aura: method can set the incoming parameters, you can also set the results returned synchronously or asynchronously, so we can usually use the aura: method to do content sharing established as common components, use aura: method to the statement, other component only need to introduce this common components will have direct permission to call the aura: a statement of the method method.

aura: method total of the following attributes:

name: to declare the name of the method, the latter called directly using this method call, you can pass the relevant parameters;
action: client-controller method call this method to go;
access: public (component can call this method in the same namespace) / global (can call this method in all the namespace component);
description: Method described.

In addition to the above properties, methods also have parameters, use the aura: attribute to declare the method body in the parameter entry. aura: method can achieve synchronous and asynchronous return, may be interested to see the details, the following content is by aura: method Toast to achieve common components.

ToastServiceComponent.cmp

<aura:component access="global">
    <ltng:require styles="{!$Resource.multipleLineToastCss}"/>

    <aura:method access="global" name="showToast" action="{!c.showToastAction}">
        <aura:attribute name="message" type="String" description="the body message will show. use \n to break lines" required="true"/>
        <aura:attribute name="displayTitle" type="String" description="the title hearder will show" required="true"/>
        <aura:attribute name="displayType" type="String" description="success/warning/error/info/other"/>
        <aura:attribute name="mode" type="String" description="dismissible/pester/sticky"/>
        <aura:attribute name="key" type="String" description="you can set name from lightning design system icon section"/>
    </aura:method>

</aura:component>

ToastServiceComponentController.js

({
    showToastAction : function(component, event, helper) {
        var params = event.getParam('arguments');
        var toastEvent = $A.get("e.force:showToast");
        var type = params.displayType;
        if(params.key) {
            type = 'other';
        }
        if(!params.mode) {
            params.mode = 'dismissible';
        }
        toastEvent.setParams({
            "title": params.displayTitle,
            "message": params.message,
            "type": type,
            "mode":params.mode,
            "key": params.key
        });

        toastEvent.fire();
    }
})

Next is the call:

SimpleToastDemo.cmp: need to introduce ToastServiceComponent, set up a local id

<aura:component implements="flexipage:availableForAllPageTypes">
    <c:ToastServiceComponent aura:id="toastService"/>
    <lightning:button variant="brand" label="show toast" onclick="{!c.showToastHandler}"/>
</aura:component>

SimpleToastDemoController.js: find the aura: id, then call the methods.

({
    showToastHandler : function(component, event, helper) {
        var toastService = component.find('toastService');
        toastService.showToast('this is a toast demo\n this can allow multiple lines\nhere we show like icon','simple toast demo','other','dismissible','like')
    }
})

It is shown below:

Summary: The article in brief Toast and aura: method, to learn more about their own view documents of interest to find out the best lightning: overlayLibrary and lightning: notificationsLibrary. Articles in the wrong place welcome that, I do not understand the welcome message.

salesforce lightning zero-based learning (xiv) Toast light into the light

Guess you like