function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
bouscalbouscal 

disable/grey buttons in VF page on click in console

I have a VF page that is launched from a custom button on a Contact record.
It will open a new subtab in a console view, or a new browser tab in a standard view and provide a limited set of fields to the end user for quick Case creation.
I have two separate issues.

1. When clicking the Save button, there is no indication that it has been clicked and the end user can repeatedly click it for ever creating dozens of Cases.  I attempted to resolve this using <apex:facet /> with start and stop which will work for the top button set of the page block but not the bottom.  Additionally when the page encounters an error, the error is not displayed.

2. If I remove the rerender phrase the error messages will appear as they should but then I end up with duplicated Cases.

______________________ VF PAGE _________________________

<apex:page standardController="Case" extensions="CreateCaseController" showHeader="false">
<apex:includeScript value="/support/console/20.0/integration.js"/>
<script>
    sforce.console.setTabTitle('New Case');
</script>
    <apex:form >
        <apex:pageMessages />
        <apex:pageBlock title="New Case">
            <apex:pageBlockButtons >
                <apex:actionStatus id="status">
                    <apex:facet name="start">
                        <apex:outputpanel >
                            Saving...
                        </apex:outputpanel>
                    </apex:facet>
                    <apex:facet name="stop">
                        <apex:outputpanel >
                            <apex:commandButton value="Save" action="{!Save}" rerender="error1,error2" status="status"/>
                            <apex:commandButton value="Cancel" action="{!Cancel}" immediate="true" />
                        </apex:outputpanel>
                    </apex:facet>
                </apex:actionStatus>
            </apex:pageBlockButtons>
            <apex:outputLabel value="Account:  " for="acc"/ >
            <apex:outputField id="acc" value="{!case.accountid}" /><br/>
            <apex:outputLabel value="Contact:  " for="con"/>
            <apex:outputField id="con" value="{!case.contactid}" />
       
            <apex:pageBlockTable value="{!$ObjectType.Case.FieldSets.CaseQuickCreate}" var="f">
                <apex:outputField value="{!case.contactid}"/>
                <apex:outputField value="{!case.accountid}"/>
                <apex:column value="{!f.Label}">
                    <apex:facet name="header"></apex:facet>
                </apex:column>
                <apex:column >
                    <apex:inputField value="{!Case[f]}" required="{!f.Required}" />
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>
___________________ END VF PAGE _________________________

___________________ CONTROLLER ________________________
public class CreateCaseController{

public Account account{get; set;}
public Contact contact{get; set;}
public Case cs{get; set;}
public Boolean isSaveSuccess{get; set;}
Public string retURL{get; set;}
Public string csPhone{get; set;}

public CreateCaseController(ApexPages.StandardController controller){

    cs=((case) controller.getRecord());
    cs.contactid=ApexPages.currentPage().getParameters().get('cid');
    cs.accountid=ApexPages.currentPage().getParameters().get('aid');
    }
   
public void createCase(){
    cs.contactid=ApexPages.currentPage().getParameters().get('cid');
    cs.accountid=ApexPages.currentPage().getParameters().get('aid');
   
    try{       
        insert cs;
        isSaveSuccess = true;
        retUrl=cs.id;
        }
    catch(DmlException ex) {
        ApexPages.addMessages(ex);
        }       
    }
 }
_________________ END CONTROLLER ______________________

Desired outcome -
1. When clicking on the Save button, all buttons are greyed out like standard Salesforce functionality.  When saved the tab is redirected to the new Case.
2. When an error is encountered the page shows the specifics of the error.

Any direction toward this solution will be greatly appreciated.

 

Best Answer chosen by bouscal
Ishan K SharmaIshan K Sharma
You can use action status something like this.

<apex:actionStatus id="disablebtn">
                   <apex:facet name="stop">
                           <apex:commandButton value="Search" action="{!action}" style="margin-left: 450px"  reRender="Form" status="disablebtn"   
                            disabled="false"/>
                   </apex:facet>    
                   <apex:facet name="start">
                            <apex:commandButton style="margin-left: 450px" status="disablebtn" value="Searching.." disabled="true"/>
                   </apex:facet>
 </apex:actionStatus>


All Answers

Vamsi KrishnaVamsi Krishna
i would suggest to use jquery/javascript to disable the buttons once the save button is cliked..

refer these stackexchange answers for code samples on how to do this
http://stackoverflow.com/questions/9871519/disable-command-button-after-one-click
http://salesforce.stackexchange.com/questions/7729/disable-commandbutton-after-first-click-to-prevent-double-submission
Ishan K SharmaIshan K Sharma
You can use action status something like this.

<apex:actionStatus id="disablebtn">
                   <apex:facet name="stop">
                           <apex:commandButton value="Search" action="{!action}" style="margin-left: 450px"  reRender="Form" status="disablebtn"   
                            disabled="false"/>
                   </apex:facet>    
                   <apex:facet name="start">
                            <apex:commandButton style="margin-left: 450px" status="disablebtn" value="Searching.." disabled="true"/>
                   </apex:facet>
 </apex:actionStatus>


This was selected as the best answer