How to Use Apex:ActionStatus tag in Visualforce Page.

How to Use Apex:ActionStatus tag in Visualforce Page.

<apex:actionStatus>
A component that displays the status of an AJAX update request. An AJAX request can either be in progress or complete.


actionStatus visualforce component displays the status of an AJAX update request. An AJAX request can either be in progress or complete.

Depending upon the AJAX request status (whether AJAX request is in progress or complete), this component will display different message to user. In many scenarios AJAX request takes some time. So we should display some message to user that your request is in progress. Once request is complete, we can display some different message to user.

Using actionstatus, we can also display some gif (graphic Interchange Format), which shows to user that their request is in progress. It gives very good presentation to end user.

In the example below, we are using actionStatus for commandbutton. We are showing account edit page to user. When user will click on save buttton, request will go to controller method. We are showing gif image to user while AJAX request is in progress using actionstatus component. We are using apex:facet tag inside actionstatus to show image and we have specified name value as ‘start’ in apex:facet tag. So It will show image when request is in progress. We can also use ‘stop’ value in name attribute of apex:facet to specify message when request completes.

This tag supports following attributes.

Attribute	Description
dir	The direction in which the generated HTML component should be read. Possible values include "RTL" (right to left) or "LTR" (left to right).
for	The ID of an actionRegion component for which the status indicator is displaying status.
id	An identifier that allows the actionStatus component to be referenced by other components in the page.
lang	The base language for the generated HTML output, for example, "en" or "en-US". For more information on this attribute, see the W3C specifications.
layout	The manner with which the actionStatus component should be displayed on the page. Possible values include "block", which embeds the component in a div HTML element, or "inline", which embeds the component in a span HTML element. If not specified, this value defaults to "inline".
onclick	The JavaScript invoked if the onclick event occurs--that is, if the component is clicked.
ondblclick	The JavaScript invoked if the ondblclick event occurs--that is, if the component is clicked twice.
onkeydown	The JavaScript invoked if the onkeydown event occurs--that is, if the user presses a keyboard key.
onkeypress	The JavaScript invoked if the onkeypress event occurs--that is, if the user presses or holds down a keyboard key.
onkeyup	The JavaScript invoked if the onkeyup event occurs--that is, if the user releases a keyboard key.
onmousedown	The JavaScript invoked if the onmousedown event occurs--that is, if the user clicks a mouse button.
onmousemove	The JavaScript invoked if the onmousemove event occurs--that is, if the user moves the mouse pointer.
onmouseout	The JavaScript invoked if the onmouseout event occurs--that is, if the user moves the mouse pointer away from the component.
onmouseover	The JavaScript invoked if the onmouseover event occurs--that is, if the user moves the mouse pointer over the component.
onmouseup	The JavaScript invoked if the onmouseup event occurs--that is, if the user releases the mouse button.
onstart	The JavaScript invoked at the start of the AJAX request.
onstop	The JavaScript invoked upon completion of the AJAX request.
rendered	The style used to display the status element at the start of an AJAX request, used primarily for adding inline CSS styles.
startStyleClass	The style class used to display the status element at the start of an AJAX request, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
startText	The status text displayed at the start of an AJAX request.
stopStyleClass	The style class used to display the status element when an AJAX request completes, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
stopStyle	The style used to display the status element when an AJAX request completes, used primarily for adding inline CSS styles.
stopText	The status text displayed when an AJAX request completes.
style	The style used to display the status element, regardless of the state of an AJAX request, used primarily for adding inline CSS styles.
styleClass	The style class used to display the status element, regardless of the state of an AJAX request, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
title	The text to display as a tooltip when the user's mouse pointer hovers over this component.

  

Facet Name	Description
start	The components that display when an AJAX request begins. Use this facet as an alternative to the startText attribute. Note that the order in which a start facet appears in the body of an actionStatus component does not matter, because any facet with the attribute name="start" controls the appearance of the actionStatus component when the request begins.
stop	The components that display when an AJAX request completes. Use this facet as an alternative to the stopText attribute. Note that the order in which a stop facet appears in the body of an actionStatus component does not matter, because any facet with the attribute name="stop" controls the appearance of the actionStatus component when the request completes.

Example 1:

http://sfdcsrini.blogspot.com/2014/06/ajax-implementation-with-actionstatus.html

Example 2: 

http://sfdcsrini.blogspot.com/2014/09/actionstatus-visualforce-disable-screen.html

Example 3:

In this example when ever user click on the "Quick Save"  button i am dislaying status bar which back ground .

To get this status bar  please refer to this link   http://www.ajaxload.info/

Once you prepare your status bar upload into static resources, here i uploaded the image into static resouces with the name of  "AJAXProgressBar". the same i am using in visualforce page.

 Visualforce Page: 

<apex:page standardController="Opportunity" tabStyle="Opportunity" showHeader="true">
<style>
    /* This is for the full screen DIV */
    .popupBackground {
        /* Background color */
        background-color:black;
        opacity: 0.20;
        filter: alpha(opacity = 20);
   
        /* Dimensions */
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 998;
        position: absolute;
       
        /* Mouse */
        cursor:wait;
    }

    /* This is for the message DIV */
    .PopupPanel {
        /* Background color */
        border: solid 2px blue;
        background-color: white;

        /* Dimensions */
        left: 50%;
        width: 300px;
        margin-left: -100px;
        top: 50%;
        height: 50px;
        margin-top: -25px;
        z-index: 999;
        position: fixed;
       
        /* Mouse */
        cursor:pointer;
    }
</style>
<apex:actionStatus id="statusSaveTrip" stopText="">
    <apex:facet name="start">
        <div>
            <div class="popupBackground" />
            <div class="PopupPanel">
                <table border="0" width="100%" height="100%">
                    <tr>
                        <td align="center"><b>Please Wait</b></td>
                    </tr>
                    <tr>
                        <td align="center"><img src="{!$Resource.AJAXProgressBar}"/></td>
                    </tr>
                </table>
            </div>
        </div>
    </apex:facet>
</apex:actionStatus>
<apex:form id="myForm">
    <apex:pageMessages />
   
    <apex:pageBlock >
        <apex:pageBlockButtons location="Top">
            <apex:commandButton value="Quick Save" action="{!quicksave}" rerender="myForm" status="statusSaveTrip" />
        </apex:pageBlockButtons>
       
        <apex:pageBlockSection >
            <apex:inputField value="{!Opportunity.Name}" />
            <apex:inputField value="{!Opportunity.Amount}" />
            <apex:inputField value="{!Opportunity.AccountId}" />
             <apex:inputField value="{!Opportunity.CloseDate}" />
              <apex:inputField value="{!Opportunity.stageName}" />
                      </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>



Example 4: 


http://sfdcsrini.blogspot.com/2015/03/visualforce-action-status-with.html

More about visualforce tags and examples

http://sfdcsrini.blogspot.com/2014/06/visualforce-form-tags-with-examples.html

Read more »

How to Use Apex:enhancedList tag in Visualforce Page?

How to Use Apex:enhancedList tag in Visualforce Page?

Enhanced list views on a Visualforce page

Enhanced lists are used when you want to display a specific list view for a standard or custom object, rather than having all list views available for the user to select.

This tag supports following attributes.

Attribute Name	Description
customizable	A Boolean value that specifies whether the list can be customized by the current user. If not specified, the default value is true. If this attribute is set to false, the current user will not be able to edit the list definition or change the list name, filter criteria, columns displayed, column order, or visibility. However, the current user's personal preferences can still be set, such as column width or sort order.
height	An integer value that specifies the height of the list in pixels. This value is required.
id	The database ID of the desired list view. When editing a list view definition, this ID is the 15-character string after 'fcf=' in the browser's address bar. This value is required if type is not specified.
listId	The Salesforce object for which views are displayed. This value is required if type is not specified.
oncomplete	The JavaScript that runs after the page is refreshed in the browser. Note that refreshing the page automatically calls this JavaScript, while an inline edit and subsequent save does not.
rendered	A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.
reRender	The ID of one or more components that are redrawn when the result of an AJAX update request returns to the client. This value can be a single ID, a comma-separated list of IDs, or a merge field expression for a list or collection of IDs. Note: When an enhancedList is rerendered through another component's rerender attribute, the enhanceList must be inside of an apex:outputPanel component that has layout attribute set to "block".
rowsPerPage	An integer value that specifies the number of rows per page. The default value is the preference of the current user. Possible values are 10, 25, 50, 100, 200. Note: If you set the value for greater than 100, a message is automatically displayed to the user, warning of the potential for performance degradation.
type	The Salesforce object for which views are displayed, for example, type="Account" or type="My_Custom_Object__c".
width	An integer value that specifies the width of the list in pixels. The default value is the available page width, or the width of the browser if the list is not displayed in the initially viewable area of the viewport.

Step 1 – Create the list view

Go to the standard or custom object and click on the Create New View next to the Go button. Create the view and click on Save. When the page has reloaded, you will notice in the url a 15 digit id has been created for your view. Copy or make a note of the id.

Step 2 – Add code to your visualforce page

Add the following bit of code to your visualforce page, replacing the listid with your id:

<apex:enhancedlist type=”Lead” height=”730″ customizable=”false” rowsPerPage=”25″ Listid=”00B30000007wesH” />

Change customizable to equal true if you want your users to be able to edit the filters on the view. Once saved, you should find your visualforce page displays an enhanced list similar in appearance to the image below.

More about Visualforce page Tags:
http://sfdcsrini.blogspot.com/2014/06/visualforce-form-tags-with-examples.html

Read more »