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
Luis Guilherme Marques LinoLuis Guilherme Marques Lino 

How to stop Visualforce "Status Spinner" after return of PageReference (CSV Export)

Hello!

I'm relatively new to Salesforce and I'm facing some difficulties to show the Visualforce Spinner during CSV Export.
Currently on my Visualforce I have the following code:
<apex:commandButton disabled="{! lPermissaoExportar }" status="pageStatus" action="{! botaoExportar }" value="Exportar" reRender="mensagem, pageStatus"/>

<apex:actionStatus id="pageStatus">
        <apex:facet name="start">
            <apex:outputPanel >
                <img src="/img/loading32.gif" width="25" height="25" />
                <apex:outputLabel value="Carregando..."/>
            </apex:outputPanel>
        </apex:facet>
  </apex:actionStatus>
And on my controller:
if (this.lInicio == null || this.lFim == null || this.lInicio > this.lFim)
{
	Mensagem_erro__c mensagem = Mensagem_erro__c.getInstance();
	String cMensagem = (mensagem.VF_importar_erro_data__c != null) ? mensagem.VF_importar_erro_data__c : 'Data não preenchida ou Data de inicio maior que a data fim!';
	setMensagem(cMensagem);
	return null;
}

PageReference pg = new PageReference('/apex//RelatorioCaseCSV');
pg.getParameters().put('Inicio', EncodingUtil.urlEncode( String.valueOf(this.lInicio), 'UTF-8'));
pg.getParameters().put('Fim', EncodingUtil.urlEncode( String.valueOf(this.lFim), 'UTF-8'));
pg.getParameters().put('Status', EncodingUtil.urlEncode( this.lFltStatusCaso , 'UTF-8'));
pg.getParameters().put('Tipo', EncodingUtil.urlEncode( this.lFltTipoCaso , 'UTF-8'));
return pg;

If the first verification fails I return null, if it's fine I generate the instance of my CSV Export page and returns it.

The main problem here is that whenever I return null, the spinner works fine stopping after the processing has ended.
But when I return the PageReference, even it just making an download of the csv file, it never stops and keeps spinning forever.
Can anyone help me to solve this issue?
To end with this development I must show to the user that "something is happening", while the download doesn't begin.

Thank you!
 
Best Answer chosen by Luis Guilherme Marques Lino
Luis Guilherme Marques LinoLuis Guilherme Marques Lino
For anyone who might be interested on the solution, here's mine:

On my class I created an variable with the PageReference that is setted when everything goes fine.
public PageReference lCsvGerado { get; set; }

if (!cLimiteEstourado)
{
  PageReference pg = new PageReference('/apex//RelatorioCaseCSV');
  pg.getParameters().put('Inicio', EncodingUtil.urlEncode( String.valueOf(this.lInicio), 'UTF-8'));
  pg.getParameters().put('Fim', EncodingUtil.urlEncode( String.valueOf(this.lFim), 'UTF-8'));
  pg.getParameters().put('Status', EncodingUtil.urlEncode( this.lFltStatusCaso , 'UTF-8'));
  pg.getParameters().put('Tipo', EncodingUtil.urlEncode( this.lFltTipoCaso , 'UTF-8'));
  setMensagem('Dados sendo gerados, aguarde alguns instantes!', ApexPages.Severity.CONFIRM);
  this.lAtualizar = true;
  this.lCsvGerado = pg;
  return;
}

On Visualforce I'm using jquery for functionality.
I call the status during the processing method and I don't return the pageReference.
In onComplete method from the button I call the JavaScript that, if the variable "lAtualizar" is true, submit the outputLink on _parent with the value of the PageRegerence variable.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>$j = jQuery.noConflict();</script>

<apex:commandButton disabled="{! lPermissaoExportar }" status="status" oncomplete="reloadPage()" action="{! botaoExportar }" value="Exportar" reRender="mensagem, pageStatus,reloadPagePanel"/>

<apex:outputPanel id="reloadPagePanel" style="display:none">
  <apex:outputLink id="caseDetailLink" value="{! lCsvGerado }" target="_parent"/>
  <script>
  function reloadPage() {
	if ( '{!lAtualizar}' == 'true' ) {
		$j('[id$=caseDetailLink]')[0].click();
	}
  }
  </script>
</apex:outputPanel>


<apex:actionStatus id="status">
 <apex:facet name="start">
   <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.25; z-index: 1000; background-color: black;">
   &nbsp;
   </div>
   <div style="position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 15% 50%">
     <div style="display: inline-block; padding: 2px; background-color: #fff; width: 125px;">
       <img src="/img/loading.gif" style="float: left; margin: 8px;" />
       <span style="display: inline-block; padding: 10px 0px;">Carregando...</span>
     </div>
   </div>
 </apex:facet>
</apex:actionStatus>

This is working fine for me, showing the processing status and returning the PageReference aswell.

 

All Answers

sfdcMonkey.comsfdcMonkey.com
Hi Luls,
try below code :
<apex:actionStatus id="pageStatus">
        <apex:facet name="start">
            <apex:outputPanel >
                <img src="/img/loading32.gif" width="25" height="25" />
                <apex:outputLabel value="Carregando..."/>
            </apex:outputPanel>
        </apex:facet>
		<apex:facet name="stop"> 
		   <apex:commandButton disabled="{! lPermissaoExportar }" status="pageStatus" action="{! botaoExportar }" value="Exportar" reRender="mensagem, pageStatus"/>
		</apex:facet>
  </apex:actionStatus>
i hope it helps you.
   kindly Let me inform if it helps you and close your query by choosing best answer if you got your right answer so it can helps others
thanks
sfdcmonkey.com
Luis Guilherme Marques LinoLuis Guilherme Marques Lino
Hello piyush_soni!

I tried with your code but the problem persists.
The button becomes the spinner and never comes back to button.

Look like the commandButton never receives the "onComplete" status back.

Thank you for your idea anyway!
Luis Guilherme Marques LinoLuis Guilherme Marques Lino
For anyone who might be interested on the solution, here's mine:

On my class I created an variable with the PageReference that is setted when everything goes fine.
public PageReference lCsvGerado { get; set; }

if (!cLimiteEstourado)
{
  PageReference pg = new PageReference('/apex//RelatorioCaseCSV');
  pg.getParameters().put('Inicio', EncodingUtil.urlEncode( String.valueOf(this.lInicio), 'UTF-8'));
  pg.getParameters().put('Fim', EncodingUtil.urlEncode( String.valueOf(this.lFim), 'UTF-8'));
  pg.getParameters().put('Status', EncodingUtil.urlEncode( this.lFltStatusCaso , 'UTF-8'));
  pg.getParameters().put('Tipo', EncodingUtil.urlEncode( this.lFltTipoCaso , 'UTF-8'));
  setMensagem('Dados sendo gerados, aguarde alguns instantes!', ApexPages.Severity.CONFIRM);
  this.lAtualizar = true;
  this.lCsvGerado = pg;
  return;
}

On Visualforce I'm using jquery for functionality.
I call the status during the processing method and I don't return the pageReference.
In onComplete method from the button I call the JavaScript that, if the variable "lAtualizar" is true, submit the outputLink on _parent with the value of the PageRegerence variable.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>$j = jQuery.noConflict();</script>

<apex:commandButton disabled="{! lPermissaoExportar }" status="status" oncomplete="reloadPage()" action="{! botaoExportar }" value="Exportar" reRender="mensagem, pageStatus,reloadPagePanel"/>

<apex:outputPanel id="reloadPagePanel" style="display:none">
  <apex:outputLink id="caseDetailLink" value="{! lCsvGerado }" target="_parent"/>
  <script>
  function reloadPage() {
	if ( '{!lAtualizar}' == 'true' ) {
		$j('[id$=caseDetailLink]')[0].click();
	}
  }
  </script>
</apex:outputPanel>


<apex:actionStatus id="status">
 <apex:facet name="start">
   <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.25; z-index: 1000; background-color: black;">
   &nbsp;
   </div>
   <div style="position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 15% 50%">
     <div style="display: inline-block; padding: 2px; background-color: #fff; width: 125px;">
       <img src="/img/loading.gif" style="float: left; margin: 8px;" />
       <span style="display: inline-block; padding: 10px 0px;">Carregando...</span>
     </div>
   </div>
 </apex:facet>
</apex:actionStatus>

This is working fine for me, showing the processing status and returning the PageReference aswell.

 
This was selected as the best answer