Problem trying to replace javascript alert() for toast implementation?

Question

Hello all and thanks for reading!

I'm new to SF and I'm not finding a good way to replace the alert()'s I'm using to comunicate with the user.

I'm editing the question based on the answer I recieved.

I replaced the alert() I had in the code for this

                   component.find('notifLib').showToast({
                       "title": "Error!",
                       "message": "Please enter a valid ID."
                   });

and added this line in the StarWarsForm.cmp

<lightning:notificationsLibrary aura:id="notifLib"/>

but when I preview the component and try to see the toast I get this error

This page has an error. You might just need to refresh it. Error in $A.getCallback() [Cannot read property 'setParams' of undefined] Callback failed: apex://StarWarsFormController/ACTION$getCalloutResponse Failing descriptor: {markup://lightning:notificationsLibrary}

instead of seeing the toast ...

I can't figure out what I'm doing wrong!

StarWarsForm.cmp

<!--Search Box -->
<div class="slds-size_3-of-8 slds-align_absolute-center">
    <lightning:input type="search" 
                     label="Enter character ID" 
                     aura:id="characterID" />
    
    <lightning:notificationsLibrary aura:id="notifLib"/>
    
    <lightning:button class="slds-m-top_small" 
                      variant="brand" 
                      type="button" 
                      name="calloutButton" 
                      label="Search" 
                      onclick="{!c.APICallout}" />
</div>

StarWarsController.js

APICallout : function(component, event, helper) {
    let id = component.find("characterID").get("v.value");
    helper.getResponse(component, id);
},
     

StarWarsFormHelper.js

     getResponse : function(component, id){
        let action = component.get("c.getCalloutResponse");
        
        action.setParams({
            "url": 'https://swapi.dev/api/people/'+id+'/'
        });

        action.setCallback(this, function(response) {
            
        let state = response.getState();
            
        if(component.isValid() && state === "SUCCESS"){
            if(response.getReturnValue() != null){
                component.set("v.response", response.getReturnValue());
                
                //Fill the attributes
                let name = component.get("v.response")['name'];
                let planet = component.get("v.response")['homeworld'];
                let gender = component.get("v.response")['gender'];
                let height = component.get("v.response")['height'];
                let hair_color = component.get("v.response")['hair_color'];
                let eyes_color = component.get("v.response")['eye_color'];
                let url = component.get("v.response")['url'];

                //Set the attribute to the attribute on component.
                component.set("v.CharacterName", name);
                component.set("v.CharacterHairColor", hair_color);
                component.set("v.CharacterEyesColor", eyes_color);
                component.set("v.CharacterPlanet", planet);
                component.set("v.CharacterHeight", height);
                component.set("v.CharacterGender", gender);
                component.set("v.CharacterUrl", url);
                
                // Enable Create Character button on successful callout 
                let button = component.find("createButton");
                button.set('v.disabled', false);

            } else{
                    //Set the attribute to the attribute on component.
                    component.set("v.CharacterName", '');
                    component.set("v.CharacterHairColor", '');
                    component.set("v.CharacterEyesColor", '');
                    component.set("v.CharacterPlanet", '');
                    component.set("v.CharacterHeight", '');
                    component.set("v.CharacterGender", '');
                    component.set("v.CharacterUrl", '');
                    
                    // Disable Create Character button on unsuccessful callout 
                    let button = component.find("createButton");
                    button.set('v.disabled', true);

                // replaced ---> alert('Please enter a valid ID');
                component.find('notifLib').showToast({
                       "title": "Error!",
                       "message": "Please enter a valid ID."
               });
         }  
            }else if(state === "ERROR"){
                let errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                }else{
                    console.log("Unknown error");
                } 
           }
    });

    $A.enqueueAction(action);
},
                    
                    
          

it's weird because it works fine with the alert() but not with the toast I'm trying to implement.

Answer 1

You can use toast in Notifications Library

<aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="toast" label="Show Toast" onclick="{!c.handleShowToast}"/>
</aura:component>

constroller JS:

({
    handleShowToast : function(component, event, helper) {
        component.find('notifLib').showToast({
            "title": "Success!",
            "message": "The record has been updated successfully."
        });
    }
})

Answer 2

Some events only work under One.app container. Please check if you're using in one.app container(if you're using it on VF page, it won't work directly).

It'll not work with Custom App, pls try this on record page for immediate testing.