Developer Tricks: Prevent the Dreaded Double-Click Using Apex

Let’s face it, our users are busy. They are short on time, late for their next meeting, jabbing at app interfaces on their phone while sipping a hot latte and walking across the parking lot. They want their software to respond RIGHT AWAY.

As developers know, this means we’re likely to encounter the dreaded double-click problem: our Verybusyuser clicks the Save (or any other) button and then, not seeing anything happen, clicks again. This creates a duplicate record, sends a duplicate trigger, or otherwise creates double havoc. And even if we manage to throw up a “wait” animation, that could take longer to render onscreen than our user has time to wait.

Great Wave’s Senior Developer, Josiah Fizer, shares this trick for avoiding this problem:

To prevent double clicking on Apex buttons or actions, embed them in their own action status with a secondary set of disabled buttons:

<apex:facetBlockButtons >
<apex:actionStatus id=“SaveStatus”>
<apex:facet name=“stop”>
<apex:outputPanel>
<apex:commanButton value=“Save” action=“{!save}”reRender=“msg”
status=”SaveStatus”?>
<apex:commanButton value=“Save & New” action=“{saveAndNewExt}”
reRender=“msg”status=“SaveStatus”/>
<apex:commanButton value=“Cancel” action=“{!cancel}”
status=“SaveStatus”/>
</apex:outputPanel>
</apex:facet>
</apex:facet name=“start”>
</apex:outputPanel>
<apex:commanButton value=“Save” disabled=“true”/>
<apex:commanButton value=“Save & New” disabled=“true”/>
<apex:commanButton value=“Cancel” disabled=“true”/>
</apex:outputPanel>
</apex:facet>
<apex:actionStatus>
<apex:pageBlockButtons >


The apex:status component supports two different apex:facet conditions: “start” and “stop”. In this example, the “stop” facet is displayed (you can think of it as “waiting”). As soon as any action button within the facet is clicked, the front end switches to the “start” facet with disabled buttons, preventing additional clicks on the actions regardless of what the backend process is doing. If there is a save error, the AJAX request will have finished, reverting to the “stop” facet.

“Stop” is displayed whenever the AJAX request is not running, as is the condition when the page is loaded but before an action is clicked. Once an action is clicked, the AJAX request starts and the “start” facet is displayed. Or to put it another way, clicking the buttons (in the stop facet) will display the second set (in the start facet) until processing is complete.

We can’t always control how long it will take for something to process, but we can minimize the chance for error. Got any good Developer Tricks of your own? We’d love to hear about them!

Posted by Great Wave admin.