Display selected records of one Visualforce page on another
The issue of not being able to display selected records or values of one Visualforce page on another confronting some developers moved to create this post.
To resolve this issue, I created a wrapper class to generate the table with checkboxes. I created a two-step wizard that will allow users to select the desired records on the first page and display them on the second. If you are not familiar with creating Visualforce wizard, you can look forward to my post on the topic or click here to learn more.
For the wizard, I created 2 Visualforce pages that I named selectedBankPage and selectedBankPage2 respectively. These pages are used in the step1 and step2 methods in the Apex code below which in turn were invoked on the Visualforce pages for navigation.
Note, if you create the first page and fail to create the second, there will be an error message prompting you to create the required page.
The selectedBankPage output will look like this
The second page – selelctedBankPage2’s user interface will look like this
The Controller
public class selectedBankCon {
public List<WrapBank> wrapBankList { get; set; }
public List<Bank__c> selectedBanks{get;set;}
public Bank__c bank {get;set;}
public selectedBankCon() {
selectedBanks = new List<Bank__c>();
if(wrapBankList ==null){
wrapBankList =new list<WrapBank>();
for(Bank__c b:[select Name, Source__c, Region__c, Works__c, Services__c, Month_1__c From Bank__c limit 10]){
wrapBanklist.add(new wrapBank(b));
}
}
}
public PageReference step1() {
return Page.selectedBankPage;
}
public PageReference step2() {
selectedRecords(); //this method was added so that only step2 button will be clicked
return Page.selBankPage2;
}
public void selectedRecords(){
selectedBanks =new List<Bank__c>();
for(WrapBank wra : wrapBanklist){
if(wra.isSelected == true){
selectedBanks.add(wra.wbk);
}
}
}
public PageReference cancel() {
PageReference bankPage = new ApexPages.StandardController(bank).view();
bankPage.setRedirect(true);
return bankPage;
}
public PageReference Save() {
upsert selectedBanks;
return null;
}
public Pagereference saveAndNew() {
Save();
String str = ApexPages.currentPage().getUrl().subStringAfter('/');
return new PageReference('/apex/' + str).setRedirect(true);
}
public class WrapBank {
public Bank__c wbk {get;set;}
public boolean isSelected {get;set;}
public WrapBank(Bank__c b){
wbk=b;
isselected=false;
}
}
}
The Visualforce code for the main page
<apex:page controller="selectedBankCon">
<script>
function confirmCancel() {
var isCancel = confirm("Are you sure you wish to cancel?");
if (isCancel) return true;
return false;
}
</script>
<apex:form id="myForm">
<apex:pageBlock >
<apex:pageBlockButtons location="top" >
<apex:commandButton action="{!step2}" value="Select & Next" id="next"/>
<apex:commandButton action="{!cancel}" value="Cancel"
onclick="return confirmCancel()" immediate="true" id="cancel"/>
</apex:pageBlockButtons>
<apex:pageMessages id="myMsg"/>
<apex:outputPanel id="action1">
<apex:pageBlockSection columns="1" id="pbs">
<apex:pageBlockTable value="{!wrapBankList}" var="wb" id="pt" styleClass="pTable">
<apex:column >
<apex:facet name="header">
<apex:outputLabel >Select</apex:outputLabel>
</apex:facet>
<apex:inputCheckbox value="{!wb.isSelected}" id="chkbox"/>
</apex:column>
<apex:column value="{!wb.wbk.name}"/>
<apex:column value="{!wb.wbk.Source__c}"/>
<apex:column value="{!wb.wbk.Region__c}"/>
<apex:column value="{!wb.wbk.Services}"/>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
Things to note in the Visualforce code:
- Select and Next button
- Save and New button
The Select & Next button
This button performs two actions – processes the selection of records and navigates to the next page. In the Apex code, the two methods – selectedRecords() and step2() are combined for a better user experience (UX) because it will not be in the best interest of the users to click two buttons before getting desired results.
Save And New button
The saveAndNew method is used to clear the field after you save the records. If you invoke only save method, the records saved still populate the fields.
Visualforce Code for the Second page
<apex:page controller="selectedBankCon">
<script>
function confirmCancel() {
var isCancel = confirm("Are you sure you wish to cancel?");
if (isCancel) return true;
return false;
}
</script>
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons location="top" >
<apex:commandButton action="{!step1}" value="Back" id="next1"/>
<apex:commandButton action="{!saveAndNew}" value="Save & New"/>
<apex:commandButton action="{!cancel}" value="Cancel"
onclick="return confirmCancel()" immediate="true" id="cancel"/>
</apex:pageBlockButtons>
<apex:pageBlockTable value="{!selectedBanks}" var="sb" id="theBlock">
<apex:column headerValue="Bank Name">
<apex:outputField value="{!sb.name}"/>
</apex:column>
<apex:column headerValue="Source">
<apex:inputField value="{!sb.Source__c}"/>
</apex:column>
<apex:column headerValue="Region">
<apex:inputField value="{!sb.Region__c}"/>
</apex:column>
<apex:column headerValue="Services">
<apex:inputField value="{!sb.Services__c}"/>
</apex:column>
<apex:column headerValue="MonthLy Earnings ">
<apex:inputField value="{!sb.Month_1__c}"/>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
This VIsualforce code displays the records selected on the first page by invoking the selectedBanks list.
For example, after selecting 3 records and clicking Select & Next button, this second page will now look like this
The Monthly Earnings field displayed above was added to the SOQL query for the purpose of adding more field(s) to the second page. This is not displayed on the first page.