Sign Up ›

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

How can I add animation (gif) to actionStatus

Is it possible to add an animation (gif) to the actionStatus attribute as I haven't been able to figure this one out. Text is okay but an animation would be much more ideal as it gives the user visual feedback that something is happening.

If a controller is performing heavy logic there may be a delay before something happens and if there is only static text that says "Retriving data..." the user doesn't know if the page is frozen or if it is actually doing something. An animation at least gives the user the perception that something is happening and therefore user is less likely to assume some this wrong and is more likely to wait rather than hit the back button, call me, and say, "Hey, its not working!"

If this is possible great! But please point me in the right direction. If not, I think the easiest way would to have an attribute in the actionStaus component that pointed to a static resource that is an image.

<apex:actionStatus image="{!$Resource.SpinnerImage}" id="status"/>

Ideally the page would also precache this image so that when displayed it would be all loaded up, no stuttering.
Best Answer chosen by Admin (Salesforce Developers) 
Manu ErwinManu Erwin
Try a facet to handle the start of the action.

e.g.,

Code:
<apex:page standardController="Account">
 <apex:pageBlock title="Hello {!$User.FirstName}!">
  You are displaying contacts from the {!account.name} account. 
  Click a contact's name to view his or her details.
 </apex:pageBlock>
 <apex:pageBlock title="Contacts">
  <apex:form>
    <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" border="1">
    <apex:column>
     <apex:actionSupport event="onclick" rerender="detail" status="detailStatus">
      <apex:param name="cid" value="{!contact.id}" />
     </apex:actionSupport>
     {!contact.Name}
    </apex:column>
   </apex:dataTable>
  </apex:form>
 </apex:pageBlock>
 <apex:outputPanel id="detail">
  <apex:actionStatus id="detailStatus">
   <apex:facet name="start">
     <img src="/img/waiting_dots.gif" border="0" width=156 height=25>
   </apex:facet>
   <apex:facet name="stop">
    <apex:detail subject="{!$CurrentPageReference.parameters.cid}" relatedList="false" title="false"/>
   </apex:facet>
  </apex:actionStatus>
 </apex:outputPanel> 
</apex:page>

 
Hope this helps,
manu

All Answers

Manu ErwinManu Erwin
Try a facet to handle the start of the action.

e.g.,

Code:
<apex:page standardController="Account">
 <apex:pageBlock title="Hello {!$User.FirstName}!">
  You are displaying contacts from the {!account.name} account. 
  Click a contact's name to view his or her details.
 </apex:pageBlock>
 <apex:pageBlock title="Contacts">
  <apex:form>
    <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" border="1">
    <apex:column>
     <apex:actionSupport event="onclick" rerender="detail" status="detailStatus">
      <apex:param name="cid" value="{!contact.id}" />
     </apex:actionSupport>
     {!contact.Name}
    </apex:column>
   </apex:dataTable>
  </apex:form>
 </apex:pageBlock>
 <apex:outputPanel id="detail">
  <apex:actionStatus id="detailStatus">
   <apex:facet name="start">
     <img src="/img/waiting_dots.gif" border="0" width=156 height=25>
   </apex:facet>
   <apex:facet name="stop">
    <apex:detail subject="{!$CurrentPageReference.parameters.cid}" relatedList="false" title="false"/>
   </apex:facet>
  </apex:actionStatus>
 </apex:outputPanel> 
</apex:page>

 
Hope this helps,
manu


This was selected as the best answer
TehNrdTehNrd
Worked great! Thanks for the help.
TehNrdTehNrd
Hmmm. So looks like something changed in the last week or so on SFDC's end that has caused this to break. I have isolated the issue and it appears to be with my reference to the static resource image. If I remove the image line it works. I get the warning about the img tag not being closed but that never caused any issues before. Ideas?

Code:
<apex:actionStatus startText="(Retrieving data...)"  id="status">
 <apex:facet name="start">
   <center>
     Retrieving data... <br>   
     <img src="{!$Resource.bigSpinner}" border="0">
   </center>
 </apex:facet>
 <apex:facet name="stop">
  //Output when complete  
 </apex:facet> 
</apex:actionStatus>

 
TehNrdTehNrd
So the issue definitely has to do with referencing a static resource that is in an image <img> tag

Works fine:
<img src="/img/waiting_dots.gif" border="0">

Doesn't work:
<img src="{!$Resource.bigSpinner}" border="0">

Instead of the image being displayed all that is show is this:



Message Edited by TehNrd on 02-28-2008 03:26 PM
jwetzlerjwetzler
Your code puts warnings on my page, which should be a first indication that something is not quite right.  Failing to close a tag can have some very unexpected consequences.

In your case your issue is that you're not closing your <img> tag.  If you end it with a /> it will fix it.  (You should also close your <br> tag as well.  Even though html allows it, it will keep your page much cleaner and will prevent things like this from happening).
TehNrdTehNrd
Chalk one up to my sloppy html skills.

Closing the <img>  with /> and changing <br> to <br/> did the trick.

Looks like salesforce.com tightened things up.

Thanks for the help!