Monday, February 2, 2015

How to Use Apex:actionSupport tag in Visualforce Page.

How to Use Apex:actionSupport tag in Visualforce Page.

 <apex:actionSupport>

A component that adds AJAX support to another component, allowing the component to be refreshed asynchronously by the server when a particular event occurs, such as a button click or mouseover.

actionSupport component adds AJAX support to other components in visualforce. It allows components to be refreshed asynchronously by calling the controller’s method when any event occurs (like click on button). It allows us to do partial page refresh asynchronously without refreshing  full page.
In the example below, initially count value is set to 0. But when we will click on ‘Click here to increment! ‘, then controller action method will be called and count will be incremented. Also outputText component will be rendered without refreshing complete page.
Similarly when we will click on ‘Click here to decrement!’, then controller action method will be called and count will be decremented. Also outputText component will be rendered without refreshing complete page.
apex:actionSupport has following attributes in our example:
  • action: action attribute specifies the controllers action method that will be invoked when event occurs.
  • event: It is DOM event that generates AJAX request
  • reRender: It is comma separated id’s of components that needs to be partially refreshed. In our example, we have given its value as ‘out’. So component with ‘out’ id will be refreshed without refreshing complete page.




Attribute
Description
action
The action method invoked by the AJAX request to the server. Use merge-field syntax to reference the method. For example, action="{!incrementCounter}" references the incrementCounter() method in the controller. If an action is not specified, the page simply refreshes.
disabled
A Boolean value that allows you to disable the component. When set to "true", the action is not invoked when the event is fired.
disableDefault
A Boolean value that specifies whether the default browser processing should be skipped for the associated event. If set to true, this processing is skipped. If not specified, this value defaults to true.
event
The DOM event that generates the AJAX request. Possible values include "onblur", "onchange", "onclick", "ondblclick", "onfocus", "onkeydown", "onkeypress", "onkeyup", "onmousedown", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onselect", and so on.
focus
The ID of the component that is in focus after the AJAX request completes.
id
An identifier that allows the component to be referenced by other components in the page.
immediate
A Boolean value that specifies whether the action associated with this component should happen immediately, without processing any validation rules associated with the fields on the page. If set to true, the action happens immediately and validation rules are skipped. If not specified, this value defaults to false.
onbeforedomupdate
The JavaScript invoked when the onbeforedomupdate event occurs--that is, when the AJAX request has been processed, but before the browser's DOM is updated.
oncomplete
The JavaScript invoked when the result of an AJAX update request completes on the client.
onsubmit
The JavaScript invoked before an AJAX update request has been sent to the server.               
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.
status
The ID of an associated component that displays the status of an AJAX update request. See the actionStatus component.
timeout
The amount of time (in milliseconds) before an AJAX update request should time out.
 

 Example 1 :

<apex:page controller="actionSupportController">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:outputpanel id="panel1">
                    <apex:outputText value="Click here to increment!"/>
                    <apex:actionSupport event="onclick" action="{!incrementCounter}" rerender="out"/>
                </apex:outputpanel>

                <apex:outputpanel id="panel2">
                    <apex:outputText value="Click here to decrement!"/>
                    <apex:actionSupport event="onclick" action="{!decrementCounter}" rerender="out"/>
                </apex:outputpanel>

                <apex:outputText value="{!count}" id="out" label="Count Is:"/>

            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>


Controller : 

public class actionSupportController {
    Integer count = 0;

    public PageReference incrementCounter() {
            count++;
            return null;
    }

    public PageReference decrementCounter() {
            count--;
            return null;
    }

    public Integer getCount() {
        return count;
    }
}






Example 2:
http://sfdcsrini.blogspot.com/2014/08/simple-ajax-example-using-visualforce.html

Example 3: 
http://sfdcsrini.blogspot.com/2014/09/what-is-action-support-salesforce.html


Sunday, February 1, 2015

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





 
| ,