Apex Code Development You need to sign in to do that
Don't have an account?
Sandy1 spinner in slds with visualforce
Generaly we use spinner like this
<apex:CommandButton status ="loadingStatus" styleClass="slds-button slds-button_outline-brand" value="Report Missing Document" action="{!reportPopupOpen}" reRender="reportPopup"/>
<apex:actionStatus id="loadingStatus">
<apex:facet name="stop">
<apex:outputPanel >
</apex:outputPanel>
</apex:facet>
<apex:facet name="start">
<apex:outputPanel >
<div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</apex:outputPanel>
</apex:facet>
How to use spinner with button why i need this is im using angular js function on button im not able to do spinner for that
<button id="buttonClr" status="loadingStatus" class="slds-button slds-button_brand" ng-show="myForm.myInput.$valid" ng-click="vm.searchs(result, event); "><b>Search</b></button>
<apex:CommandButton status ="loadingStatus" styleClass="slds-button slds-button_outline-brand" value="Report Missing Document" action="{!reportPopupOpen}" reRender="reportPopup"/>
<apex:actionStatus id="loadingStatus">
<apex:facet name="stop">
<apex:outputPanel >
</apex:outputPanel>
</apex:facet>
<apex:facet name="start">
<apex:outputPanel >
<div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</apex:outputPanel>
</apex:facet>
How to use spinner with button why i need this is im using angular js function on button im not able to do spinner for that
<button id="buttonClr" status="loadingStatus" class="slds-button slds-button_brand" ng-show="myForm.myInput.$valid" ng-click="vm.searchs(result, event); "><b>Search</b></button>
Yes, you can create spinner functionality using normal html button as well.
Step:1 : Create a <apex:action status="loadingStatus" name="testActionName" action="{! testAction}" />
step:2: Here you can call an apex action function to create the spinner functionality.
<button id="buttonClr" status="loadingStatus" class="slds-button slds-button_brand" ng-show="myForm.myInput.$valid" ng-click="vm.searchs(result, event); testActionName();"><b>Search</b></button>
I hope it will work for you !!
Thanks
There is no Apex:Action and for Apex:ActionStatus there is no Attributes like name and Action
<apex:actionStatus id="loadingStatus" action="{!testActionName}">
<apex:facet name="stop">
<apex:outputPanel >
</apex:outputPanel>
</apex:facet>
<apex:facet name="start">
<apex:outputPanel >
<div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</apex:outputPanel>
</apex:facet>
</apex:actionStatus>
Please use this apex action function with some attributes.
<apex:actionFunction action="{!testFunction}" name="testFunction" status="loadingStatus"/>
<apex:CommandButton status ="loadingStatus" styleClass="slds-button slds-button_outline-brand" value="Report Missing Document" action="{!reportPopupOpen}" reRender="reportPopup"/>
<apex:actionStatus id="loadingStatus">
<apex:facet name="stop">
<apex:outputPanel >
</apex:outputPanel>
</apex:facet>
<apex:facet name="start">
<apex:outputPanel >
<div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</apex:outputPanel>
</apex:facet>
<button id="buttonClr" status="loadingStatus" class="slds-button slds-button_brand" ng-show="myForm.myInput.$valid" ng-click="vm.searchs(result, event); testFunction(); "><b>Search</b></button>
Now , Paste this code and try to run your action status .