function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
JoshTonksJoshTonks 

help with a commandbutton and to show it is saving

I have a command button that creates a record and when it is saving it freezes for a few seconds whilst it is executing. I cannot figure a way to display that it is saving so people dont just reclicking the button. Ive seen people display a gif whilst saving but im unable to find a way to replicate this function or even display in text that it is saving
  
<apex:form style="margin: 10px; color:#322c4f">
                                    <span style="font-size:1.25em">Request callback</span>    
                                    <table style="color:#322c4f">
                                    <tr>
                                        <td colspan="2" style="color:#322c4f">
                                            User:
                                        </td>
                                        <td style="color:#322c4f">
                                            {!$User.FirstName} {!$User.LastName}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="color:#322c4f">
                                            Date &#038; Time: 
                                        </td>
                                        <td style="color:#322c4f">
                                            <apex:outputText value="{0,date,dd/MM/yyyy HH:mm}"><apex:param value="{!NOW()}" /></apex:outputText>
                                        </td>
                                    </tr>
                                    <tr>
                                    </tr>
                                    <tr>
                                    <td colspan="2" style="color:#322c4f">
                                    Interested In:
                                    </td>
                                    <td style="color:#322c4f">
                                    DashCams
                                    </td>
                                    </tr>
                                    </table>
                                    <br/>
                                     <span style="padding-left: 1px">Contact:
                                    <apex:selectList multiselect="false" value="{!selectedContact}" size="1">
                                    <apex:selectOptions value="{!contacts}">
                                    </apex:selectOptions>
                                    </apex:selectList><br/>
                                
                                    Notes:<br/>
                                    <apex:inputTextarea value="{!Notes}" rows="3" style="width:50%; border: 1px solid #322c4f; color: #322c4f; margin-left:2px" /></span>
                                    <apex:commandButton styleClass="logger" value="Save" action="{!save}" style="width:25%;float: right; margin-top:40px;border: 1px solid #322c4f; color:white; padding: 10px 5px"/>
                                </apex:form>

 
Best Answer chosen by JoshTonks
Dushyant SonwarDushyant Sonwar
One more thing , actionStatus only work on rerender so you need to use the rerender attribute in command button
  
<apex:commandButton styleClass="logger" value="Save" status="status" action="{!save}" style="width:25%;float: right; margin-top:40px;border: 1px solid #322c4f; color:white; padding: 10px 5px" rerener="frm"/>

After Correction , code will something like this below 
<style>
			.custPopup{ 
                background-color: white; 
                border-width: 0px; 
                border-radius:10px; 
                z-index: 9999; 
                left: 50%; 
                padding:20px; 
                position: fixed; 
                margin-left: -100px; 
                top:40%; 
         } 
        .popupBackground{ 
                background-color:black;
                opacity: 0.30; 
                filter: alpha(opacity = 30); 
                position: fixed; 
                width: 100%; 
                height: 100%; 
                top: 0; 
                left: 0; 
                z-index: 9998; 
          }
		  </style>
		  <apex:form id="frm" style="margin: 10px; color:#322c4f">
                                    <apex:actionStatus id="status">
										<apex:facet name="start">
											<apex:outputPanel id="tstpopup">
												<apex:outputPanel styleClass="popupBackground" layout="block"/>
													<apex:outputPanel styleClass="custPopup" layout="block">
													<img src="/img/loading24.gif" style="vertical-align:middle; horizontal-align:middle"/> 
													<span> Please wait...</span> 
												</apex:outputPanel> 
											</apex:outputPanel> 
										</apex:facet> 
									</apex:actionStatus>
									<span style="font-size:1.25em">Request callback</span>    
                                    <table style="color:#322c4f">
                                    <tr>
                                        <td colspan="2" style="color:#322c4f">
                                            User:
                                        </td>
                                        <td style="color:#322c4f">
                                            {!$User.FirstName} {!$User.LastName}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="color:#322c4f">
                                            Date &#038; Time: 
                                        </td>
                                        <td style="color:#322c4f">
                                            <apex:outputText value="{0,date,dd/MM/yyyy HH:mm}"><apex:param value="{!NOW()}" /></apex:outputText>
                                        </td>
                                    </tr>
                                    <tr>
                                    </tr>
                                    <tr>
                                    <td colspan="2" style="color:#322c4f">
                                    Interested In:
                                    </td>
                                    <td style="color:#322c4f">
                                    DashCams
                                    </td>
                                    </tr>
                                    </table>
                                    <br/>
                                     <span style="padding-left: 1px">Contact:
                                    <apex:selectList multiselect="false" value="{!selectedContact}" size="1">
                                    <apex:selectOptions value="{!contacts}">
                                    </apex:selectOptions>
                                    </apex:selectList><br/>
                                
                                    Notes:<br/>
                                    <apex:inputTextarea value="{!Notes}" rows="3" style="width:50%; border: 1px solid #322c4f; color: #322c4f; margin-left:2px" /></span>
                                    <apex:commandButton rerender="frm" styleClass="logger" value="Save" status="status" action="{!save}" style="width:25%;float: right; margin-top:40px;border: 1px solid #322c4f; color:white; padding: 10px 5px"/>
                                </apex:form>


 

All Answers

Dushyant SonwarDushyant Sonwar
Josh,

You need to add actionStatus tag in your vf page 
<apex:actionStatus id="status">
            <apex:facet name="start">
                <apex:outputPanel id="tstpopup">
                    <apex:outputPanel styleClass="popupBackground" layout="block"/>
                        <apex:outputPanel styleClass="custPopup" layout="block">
                        <img src="/img/loading24.gif" style="vertical-align:middle; horizontal-align:middle"/> 
                        <span> Please wait...</span> 
                    </apex:outputPanel> 
                </apex:outputPanel> 
            </apex:facet> 
        </apex:actionStatus>

and Some Css for the UI for spinner 
.custPopup{ 
                background-color: white; 
                border-width: 0px; 
                border-radius:10px; 
                z-index: 9999; 
                left: 50%; 
                padding:20px; 
                position: fixed; 
                margin-left: -100px; 
                top:40%; 
         } 
        .popupBackground{ 
                background-color:black;
                opacity: 0.30; 
                filter: alpha(opacity = 30); 
                position: fixed; 
                width: 100%; 
                height: 100%; 
                top: 0; 
                left: 0; 
                z-index: 9998; 
          }

To call this actionStatus spinner , we need to use apex:commandbutton attribute Status. 
<apex:commandButton styleClass="logger" value="Save" action="{!save}"  status="status" style="width:25%;float: right; margin-top:40px;border: 1px solid #322c4f; color:white; padding: 10px 5px"/>

Final Code Snippet 
<style>
			.custPopup{ 
                background-color: white; 
                border-width: 0px; 
                border-radius:10px; 
                z-index: 9999; 
                left: 50%; 
                padding:20px; 
                position: fixed; 
                margin-left: -100px; 
                top:40%; 
         } 
        .popupBackground{ 
                background-color:black;
                opacity: 0.30; 
                filter: alpha(opacity = 30); 
                position: fixed; 
                width: 100%; 
                height: 100%; 
                top: 0; 
                left: 0; 
                z-index: 9998; 
          }
		  </style>
		  <apex:form style="margin: 10px; color:#322c4f">
                                    <apex:actionStatus id="status">
										<apex:facet name="start">
											<apex:outputPanel id="tstpopup">
												<apex:outputPanel styleClass="popupBackground" layout="block"/>
													<apex:outputPanel styleClass="custPopup" layout="block">
													<img src="/img/loading24.gif" style="vertical-align:middle; horizontal-align:middle"/> 
													<span> Please wait...</span> 
												</apex:outputPanel> 
											</apex:outputPanel> 
										</apex:facet> 
									</apex:actionStatus>
									<span style="font-size:1.25em">Request callback</span>    
                                    <table style="color:#322c4f">
                                    <tr>
                                        <td colspan="2" style="color:#322c4f">
                                            User:
                                        </td>
                                        <td style="color:#322c4f">
                                            {!$User.FirstName} {!$User.LastName}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="color:#322c4f">
                                            Date &#038; Time: 
                                        </td>
                                        <td style="color:#322c4f">
                                            <apex:outputText value="{0,date,dd/MM/yyyy HH:mm}"><apex:param value="{!NOW()}" /></apex:outputText>
                                        </td>
                                    </tr>
                                    <tr>
                                    </tr>
                                    <tr>
                                    <td colspan="2" style="color:#322c4f">
                                    Interested In:
                                    </td>
                                    <td style="color:#322c4f">
                                    DashCams
                                    </td>
                                    </tr>
                                    </table>
                                    <br/>
                                     <span style="padding-left: 1px">Contact:
                                    <apex:selectList multiselect="false" value="{!selectedContact}" size="1">
                                    <apex:selectOptions value="{!contacts}">
                                    </apex:selectOptions>
                                    </apex:selectList><br/>
                                
                                    Notes:<br/>
                                    <apex:inputTextarea value="{!Notes}" rows="3" style="width:50%; border: 1px solid #322c4f; color: #322c4f; margin-left:2px" /></span>
                                    <apex:commandButton styleClass="logger" value="Save" status="status" action="{!save}" style="width:25%;float: right; margin-top:40px;border: 1px solid #322c4f; color:white; padding: 10px 5px"/>
                                </apex:form>

Hope this helps you to understand about actionStatus.
Dushyant SonwarDushyant Sonwar
One more thing , actionStatus only work on rerender so you need to use the rerender attribute in command button
  
<apex:commandButton styleClass="logger" value="Save" status="status" action="{!save}" style="width:25%;float: right; margin-top:40px;border: 1px solid #322c4f; color:white; padding: 10px 5px" rerener="frm"/>

After Correction , code will something like this below 
<style>
			.custPopup{ 
                background-color: white; 
                border-width: 0px; 
                border-radius:10px; 
                z-index: 9999; 
                left: 50%; 
                padding:20px; 
                position: fixed; 
                margin-left: -100px; 
                top:40%; 
         } 
        .popupBackground{ 
                background-color:black;
                opacity: 0.30; 
                filter: alpha(opacity = 30); 
                position: fixed; 
                width: 100%; 
                height: 100%; 
                top: 0; 
                left: 0; 
                z-index: 9998; 
          }
		  </style>
		  <apex:form id="frm" style="margin: 10px; color:#322c4f">
                                    <apex:actionStatus id="status">
										<apex:facet name="start">
											<apex:outputPanel id="tstpopup">
												<apex:outputPanel styleClass="popupBackground" layout="block"/>
													<apex:outputPanel styleClass="custPopup" layout="block">
													<img src="/img/loading24.gif" style="vertical-align:middle; horizontal-align:middle"/> 
													<span> Please wait...</span> 
												</apex:outputPanel> 
											</apex:outputPanel> 
										</apex:facet> 
									</apex:actionStatus>
									<span style="font-size:1.25em">Request callback</span>    
                                    <table style="color:#322c4f">
                                    <tr>
                                        <td colspan="2" style="color:#322c4f">
                                            User:
                                        </td>
                                        <td style="color:#322c4f">
                                            {!$User.FirstName} {!$User.LastName}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="color:#322c4f">
                                            Date &#038; Time: 
                                        </td>
                                        <td style="color:#322c4f">
                                            <apex:outputText value="{0,date,dd/MM/yyyy HH:mm}"><apex:param value="{!NOW()}" /></apex:outputText>
                                        </td>
                                    </tr>
                                    <tr>
                                    </tr>
                                    <tr>
                                    <td colspan="2" style="color:#322c4f">
                                    Interested In:
                                    </td>
                                    <td style="color:#322c4f">
                                    DashCams
                                    </td>
                                    </tr>
                                    </table>
                                    <br/>
                                     <span style="padding-left: 1px">Contact:
                                    <apex:selectList multiselect="false" value="{!selectedContact}" size="1">
                                    <apex:selectOptions value="{!contacts}">
                                    </apex:selectOptions>
                                    </apex:selectList><br/>
                                
                                    Notes:<br/>
                                    <apex:inputTextarea value="{!Notes}" rows="3" style="width:50%; border: 1px solid #322c4f; color: #322c4f; margin-left:2px" /></span>
                                    <apex:commandButton rerender="frm" styleClass="logger" value="Save" status="status" action="{!save}" style="width:25%;float: right; margin-top:40px;border: 1px solid #322c4f; color:white; padding: 10px 5px"/>
                                </apex:form>


 
This was selected as the best answer
JoshTonksJoshTonks
@Dushyant Sonwar 

Thank you for the help with this works brilliantly but when it completes the page redirection i have in my controller extension doesn't work properly anymore and only displays a blank screen when I have this in. The page redirection I have in works fine when this ActionStatus isnt in.