Wrapper class usage in apex and visualforce pages.

Wrapper class usage in apex and visualforce pages.

A common use case for Visualforce is to present a list of sObjects, allowing a user to select a number of these, and then choose an action to apply to the selected entries. Marking an sObject entry as selected presents a challenge, as it is associating transient information, the selected status, with a record persisted in the Salesforce database.

The solution is to use a wrapper class to encapsulate or wrap an sObject instance and some additional information associated with the sObject instance.

In the below example i developed a visualforce page with delete functionality based on the selected account records. when ever user select's particular account records to delete then wrapper object holds the selected account with check box value as true, then based on the check box value we can able to delete the particular selected account records.

Controller Class: 
Here i am using custom controller to develop the wrapper functionality, Here AccountRecordCls  is wrapper class to have multiple things like  holding the selected account record with check-box value and individual account record.


public class AccountDeleteWrapperCLs{
public List<AccountRecordCls> accWrapperRecordList {get;set;}


 public AccountDeleteWrapperCLs(){
 List<Account> accList= new List<Account>();
 accWrapperRecordList = new List<AccountRecordCls>();
 accList = [select id,Name,Phone,AccountNumber from Account];
  if(!accList.isEmpty()) {
    for(Account acc: accList){
     AccountRecordCls arcls = new AccountRecordCls();
     arcls.isSelected =  false;
     arcls.accObj = acc;
     accWrapperRecordList.add(arcls);
    
    } //end of for loop.
  
  } //end of if condition.
 }
  
  /*
   Delete Account functionality based on the selected records.
  */
  public PageReference DeleteAccount(){
   List<Account> accToDelete = new List<Account>();
   //To hold the unselected account records.
   List<AccountRecordCls> listUnSelectedRecords  = new List<AccountRecordCls>();  
    if(accWrapperRecordList !=null && accWrapperRecordList.size()>0) {
      for(AccountRecordCls wrapObj :  accWrapperRecordList){
        if(wrapObj.isSelected == true){
          accToDelete.add(wrapObj.accObj);
        }else{
          listUnSelectedRecords.add(wrapObj);
        }
      
      
      }//end of for.
      /*
       checking the delete list size and assign the unselected values to 
       original wrapper list.
      */
      if(accToDelete !=null && accToDelete.size()>0){
       delete accToDelete;
       accWrapperRecordList.clear();
       accWrapperRecordList.addAll(listUnSelectedRecords);
      }
    
    }else{
     ApexPages.Message  myMsg = new ApexPages.Message(ApexPages.Severity.info, 'Records were not there to delete.');
     ApexPages.addMessage(myMsg);
    }
    
    return null;
  }

  

 /* Wrapper class with checkbox and account object. 
  this is also  called as inner class 
  */

 public class AccountRecordCls{
  public boolean isSelected {get;set;}
  public Account accObj {get;set;}

 }

}

Visualforce Page: 


<apex:page controller="AccountDeleteWrapperCLs">

 <!-- This i am using for action status message display with processing records information -->

 <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="deleteStatus" 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>

 <!-- end of Action Status --> 
<apex:pagemessages id="Msg"> </apex:pagemessages>
<apex:pagemessage summary="Your are doing Mass Delete On Account Object" Severity="Info" Strength="2"></apex:pagemessage>


 <apex:form id="theForm">
  <apex:commandButton value="Delete Account" action="{!DeleteAccount}" reRender="thePb,Msg" status="deleteStatus"/>
  <apex:pageblock id="thePb">
   <apex:pageblockTable value="{!accWrapperRecordList}" var="record">
   <apex:column headerValue="Select">
     <apex:inputCheckbox value="{!record.isSelected}"/>
    </apex:column> 
    <apex:column value="{!record.accObj.Name}"/>
     <apex:column value="{!record.accObj.Phone}"/>
      <apex:column value="{!record.accObj.AccountNumber}"/>
   </apex:pageblockTable>  
  </apex:pageblock> 
 </apex:form>

</apex:page>



Example of using Wrapper class:

1). http://sfdcsrini.blogspot.com/2014/12/adding-and-deleting-rows-dynamically-in.html

2). http://sfdcsrini.blogspot.com/2014/08/displaying-records-in-visualforce-page.html


That's it
Hope you enjoy........

Read more »

Visualforce Action Status with background loading image.

Visualforce Action Status with background loading image.

When a user carries out an action that results in a Visualforce form submission, for example,clicking a button, it can be useful to render a visual indication that the submit is in progress.Without this a user may click on the button again, or assume there is a problem and navigate away from the page. The standard Visualforce <apex:actionStatus /> component can display messages when starting and stopping a request, but these messages are easily missed, especially if the user is looking at a different part of the page.

In the below example, we will create a Visualforce page that allows a user to create a case sObject record utilizing the case standard controller. When the user clicks on the button to create the new record, a spinner GIF will be displayed. In order to ensure that we have the user's full attention, the page will be grayed out while the submit takes place.


Visualforce :

<apex:page standardController="Case">
  <style>
    #spinner{
        display: none;
        width:200px;
        height: 50px;
        position: fixed;
        top: 50%;
        left: 50%;
        text-align:center;
        padding:10px;
        font:normal 16px Tahoma, Geneva, sans-serif;
        margin-left: -100px;
        margin-top: -100px;
        z-index:2;
        overflow: auto;
        border:1px solid #CCC;
        background-color:white;
        z-index:100;
        padding:5px;
        line-height:20px;
     }
     #opaque {
         position: fixed;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%;
         z-index: 1;
         display: none;
         background-color: gray;
         filter: alpha(opacity=30);
         opacity: 0.3;
         -moz-opacity:0.3;
         -khtml-opacity:0.3
     }
     * html #opaque {
         position: absolute;
     }
  </style>

  <apex:form >
  
    <apex:pageMessages id="msgs" />
    <apex:pageBlock mode="mainDetail" title="Create Case">
     
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}" onclick="showSpinner()" />
        <apex:commandButton value="Cancel" action="{!cancel}" onclick="showSpinner()" />
      </apex:pageBlockButtons>
      
      <apex:pageBlockSection title="Details" columns="1">
        <apex:inputField value="{!Case.Subject}" />
        <apex:inputField style="width:80%" value="{!Case.Description}" />
      </apex:pageBlockSection>
      
      <apex:pageBlockSection >
        <apex:inputField value="{!Case.AccountId}" />
        <apex:inputField value="{!Case.Type}" />
        <apex:inputField value="{!Case.Priority}" />
        <apex:inputField value="{!Case.Status}" />
        <apex:inputField value="{!Case.Origin}" />
        <apex:inputField value="{!Case.Reason}" />
      </apex:pageBlockSection>
      
    </apex:pageBlock>    
  </apex:form> 
   <div id="opaque"/>
   <div id="spinner">
        <p align="center" style='{font-family:"Arial", Helvetica, sans-serif; font-size:20px;}'><apex:image value="/img/loading.gif"/>&nbsp;Please wait</p>
   </div>
   
   <script>
    function showSpinner()
    {
       document.getElementById('opaque').style.display='block';
       var popUp = document.getElementById('spinner');
      
       popUp.style.display = 'block';
    } 
   </script>

</apex:page>


once you enter all the details click on the save button the visualforce page status message is going to display with loading image background with in the div.

More about visualforce example and tags

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

Read more »

Standard Controller Extension,Custom Controller Extensions and Uploading the image and displaying in contact details page.

Standard Controller Extension,Custom Controller Extensions and Uploading the image and displaying in contact details page.

Hi,
In this post i am trying to give a small example on Standard Controller Extension. so the usage of Standard Controller Extension (or) Controller Extension is to extend the functionality.

Here the requirement is create a visualforce page using standard controller and extend the upload image functionality in VF page and display the image in Contact detail page. for this i created two fields in Contact object.

1).  Created a Text field with Name "Srinivas__Images_Path__c" length of 255  to store the url of the image.
2). Created a Formula Field with the name of "Srinivas__Picture__c" return type as Text like this.

Extension Class:

Here i created a class and used Standard Controller in constructor. once the user upload the image that image details is stored as attachment and put the attachment record url in contact object text field to populate with formula field.

public class ContactPhotoExtension {

public Contact cont;
public blob picture {get;set;}

 public ContactPhotoExtension(ApexPages.StandardController st){
  this.cont = (Contact) st.getRecord();
 
 }
 public PageReference save() {
 PageReference pr ;
  try{
     insert cont;
     if(picture !=null) {
      Attachment attachment = new Attachment();
        attachment.body = picture;
        attachment.name = 'Contact_' + cont.id + '.jpg';
        attachment.parentid = cont.id;
        attachment.ContentType = 'application/jpg';
        insert attachment;
     cont.Srinivas__Images_Path__c = '/servlet/servlet.FileDownload?file='+ attachment.id;
                update cont;
       Pr = new PageReference('/'+cont.id);
       pr.setRedirect(true);
    }
   
  
  } catch(Exception  e){
   system.debug('Error Message==>'+e);
  }
 
  return pr;
 } 

}

Visualforce Page:

<apex:page standardController="Contact" extensions="ContactPhotoExtension">
<apex:form >
 <apex:pageblock title="Contact With Image">
  <apex:pageblockButtons >
   <apex:commandButton action="{!Save}" value="Save with Image"/>
    </apex:pageblockButtons>
    
    <apex:pageblockSection title="Contact Information">    
     <apex:inputField value="{!Contact.FirstName}"/>
     <apex:inputField value="{!Contact.LastName}"/>
     <apex:inputField value="{!Contact.Email}"/>
     <apex:inputField value="{!Contact.Phone}"/>
    </apex:pageblockSection>
     <apex:pageBlockSection title="Upload Image Here">
      <apex:inputFile value="{!picture}" accept="image/*" />
     
     </apex:pageBlockSection>
 </apex:pageblock>
</apex:form>
</apex:page>

once you develop these things try to create a record with image and click on "Save with Image" button.

Finally the record detail page is like this.

like this you can extend the functionality of standard or custom with out building the all the things.

Custom Controller With Extension:

Here i created two simple classes to demonstrate simple custom controller extension.

Class 1 :

in this class i am querying account records and stored those in list.

Public class AccountDisplatRecCls{
  public List<Account> getAccounts(){
   List<Account> accList = [select id,Name,AccountNumber from Account];
   return accList;
  
  }  }

Class 2:
in this class i am querying contact records and stored those in list and displaying in vf page. 

public class AccountDisplatRecClsExtn{
 
 public List<Contact> contList {get;set;}
 
  public AccountDisplatRecClsExtn(AccountDisplatRecCls act){
    contList = [select id,FirstName,LastName,Email from Contact];
  }
   
 }


Visualforce Page:

in this page i am using booth custom controller and extension controller.

<apex:page controller="AccountDisplatRecCls" extensions="AccountDisplatRecClsExtn">
<apex:pageBlock title="Account Records">
  <apex:pageblockTable value="{!Accounts}" var="acc">
   <apex:column value="{!acc.Name}"/>
   <apex:column value="{!acc.accountNumber}"/>
  </apex:pageblockTable>
</apex:pageBlock>

 <apex:pageblock title="Contacts Details">
  <apex:pageblockTable value="{!contList }" var="con">
    <apex:column value="{!con.FirstName}"/>
     <apex:column value="{!con.LastName}"/>
         <apex:column value="{!con.Email}"/>
  </apex:pageblockTable>
 </apex:pageblock>
  
</apex:page>

Output:

Further reference :

http://www.salesforce.com/docs/developer/pages/Content/pages_controller_extension.htm


Thanks

Read more »