0

There is a Salesforce UI built using Visualforce and Lightning Aura Framework. There are 3 input fields. On clicking of a button we want the values of the input field to be sent to an external API and once we get a response we can show the necessary data on the client side on template. Also we wish to prevent the user from again clicking the button until the API response is received. How can such a requirement be done?

I thought that after clicking the input fields somehow the client side controller in Aura Component Bundle could send it to a Server side Apex Controller which could perform an Apex Callout using Named Credential (for the remote site settings). Once a response is received we can either deserialize it to a Wrapper or perform whatever operation we need and render it on the component template for the client side. I dont know if this approach is fine. Also how would we prevent the user from re-clicking the button until the JSON response is received from the API?

1 Answer 1

0

One option is to have an attribute to disable the button:

<aura:attribute name="disableSubmit" type="Boolean" default="false" />

...

<lightning:button disabled="{!v.disableSubmit}" onclick="{!c.submitForm}" />

...

submitForm: function(component, event, helper) {
  helper.callApi(component, event);
}

...

callApi: function(component, event) {
  component.set("v.disableSubmit", true);
  let action = component.get("c.serverMethodName");
  action.setCallback(this, (response) => {
    component.set("v.disableSubmit", false);
    // Do other stuff here
  });
  action.setParams(
    // set the parameters here
  );
  $A.enqueueAction(action);
}

You can also generally do this directly:

<lightning:button aura:id="submit" onclick="{!c.submitForm}" />

...

component.find("submit").set("v.disabled", true);
3
  • Thanks but I just had a question. so once the disabled attribute is set to true means we cant click it. So suppose the response is received and after that again we wish to send fresh data to API so we need to click the button. What then? I see you set the disabled attribute to false once response is received from API in the helper execution. Does that take care of it for multiple cycles if we need to click the button again?
    – Amax1
    Dec 8, 2022 at 5:36
  • @Amax1 Once you've received the response, you can reset the disabled attribute so the user can use it again.
    – sfdcfox
    Dec 8, 2022 at 11:56
  • could you also answer this please? Badly stuck here salesforce.stackexchange.com/questions/392400/…
    – Amax1
    Dec 20, 2022 at 13:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .