0

I need functionality similar to the "follow" button in a lightning component. I'm using the stateful button as described in the lightning component guide: https://developer.salesforce.com/docs/component-library/bundle/lightning:buttonStateful/example

It looks great on the page and changes text when you click it. However, I need some help completing the full functionality of the button, namely: 1. On page load, check what state the button should be in (via apex class) 2. On button click, call apex class to update record based on their click

I find it odd that the examples don't cover that, but I can't find it. I can write the Apex class but am stuck on what I would need to add to the controller in the example above to do the class callout as well as verify on page load what the button state should be. thanks in advance for any guidance.

Component:

<aura:component implements="force:hasRecordId,forceCommunity:availableForAllPageTypes" controller = 'ButtonContoller' access="global" >>
<aura:attribute name="buttonstate" type="Boolean" default="false"/>
<lightning:buttonStateful
    labelWhenOff="Follow"
    labelWhenOn="Following"
    labelWhenHover="Unfollow"
    iconNameWhenOff="utility:add"
    iconNameWhenOn="utility:check"
    iconNameWhenHover="utility:close"
    state="{! v.buttonstate }"
    onclick="{! c.handleClick }"
/>

Controller:

  ({
doInit : function(component) {
var action = component.get("c.getAccountInterestStatus");
action.setParams({ acctId : component.get("v.recordId")});
action.setCallback(this, function(response) {
    let state = response.getState();
    if (state === "SUCCESS") {
        component.set("v.buttonstate", response.getReturnValue());
    }
    else {
        console.log("Failed with state: " + state);
    }
})
$A.enqueueAction(action);

},

handleClick : function (cmp, event, helper) {
    var buttonstate = cmp.get('v.buttonstate');
    console.log(buttonstate);
    cmp.set('v.buttonstate', !buttonstate);
    //action.setCallback(this, function(response) {
    if (buttonstate){
        var action = component.get("c.AcctInterested");
        action.setParams({ acctId : component.get("v.recordId")});
        console.log('buttonstate == true');
    }
    else {
        var action = component.get("c.AcctNotInterested");
        action.setParams({ acctId : component.get("v.recordId")});
        console.log('buttonstate == false');
    }

    $A.enqueueAction(action);

}

});

0

You can define attributes for 'labelWhenOff' and 'labelWhenOn' like below

<aura:attribute name="labelWhenOff" type="String"/>
<aura:attribute name="labelWhenOn" type="String"/>

Then define an aura handler

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

Then in your controller, you call an apex method to get the value when the page is loaded.

({
doInit : function(component) {
    let action = component.get("c.getButtonlabel");
    action.setParams({
        // if you want to pass any parameter
    });
    action.setCallback(this, function(response) {
        let state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.labelWhenOff", response.getReturnValue());
        }
        else {
            console.log("Failed with state: " + state);
        }
    })
    $A.enqueueAction(action);
}
})

And change the lightning:buttonStateful declaration to as below

<lightning:buttonStateful
                          labelWhenOff="{!v.labelWhenOff}"
                          labelWhenOn="{!v.labelWhenOn}"
                          labelWhenHover="Unfollow"
                          iconNameWhenOff="utility:add"
                          iconNameWhenOn="utility:check"
                          iconNameWhenHover="utility:close"
                          state="{! v.buttonstate }"
                          onclick="{! c.handleClick }"
                          />

Similarly, you can set different value when button is clicked

4
  • Thanks @maniac-coder - I was able to get the init function working with your help. I'm almost there on the handleClick. It correctly flips the state of the button but the apex class is not actually getting called for some reason. – EMC Sep 3 '19 at 20:34
  • your controller.js file is not correct. you are calling action.setCallback without declaring the action variable. Please use the code I have provided in the doInit and make suitable changes according to your business logic. – maniac coder Sep 4 '19 at 8:11
  • That's a little different than my use case... I need to (1) load correct status based on account field value and (2) update the status if the button state changes. Thanks – EMC Sep 14 '19 at 12:27
  • You can easily do that. In the server call you can check for the account's field value and update accordingly – maniac coder Sep 16 '19 at 11:01

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.