0

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.

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."
        });
    }
})
| improve this answer | |
  • Hi ! Thanks for the help ! I've edited the question because I don't have a button in my case and I've tried this way but not working ... can't see why ! – Nacho Zve De La Torre Jun 30 at 1:48
0

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.

| improve this answer | |
  • Hi ! Thanks for the answer ! I'm not using VF, this is Aura components. The StarWarsForm.cmp component is inside a .app application which is the unique container of it – Nacho Zve De La Torre Jun 30 at 3:08
  • 1
    2 possiblities are there::: 1-- setParams undefined check why its undefined ||| 2nd you can try this - I'd recommend try this in plain controller so that you'll get to know if its a toast issue or your code issue. - var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success!", "message": "The record has been updated successfully." }); toastEvent.fire(); } – Ysr Shk Jun 30 at 3:15
  • I'm getting the problem only when I change that line ... the alert() for the new toast code ... before, with the alert() the code is working fine ... I can't figure out what's wrong with the new code I'm adding and I can't see anything that breaks the logic – Nacho Zve De La Torre Jun 30 at 3:46
  • Could it be something that I'm implementing in the component ?? implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" – Nacho Zve De La Torre Jun 30 at 3:52
  • Ideally it should not be interface part. Pls see your app is using - extends="force:slds" and try to remove your all code just see with toast code, if it is working means it is not a toast error. Rest you can debug your code line by line. – Ysr Shk Jun 30 at 4:50

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.