Apex Code Development You need to sign in to do that
Don't have an account?
saad mechiche alami Adding a new filter field to a VF table
Hello,
I am taking the hand from another developer code who have built a VF page that displays a table, on top of this page are 4 inpuText fields, those fields are used to filter certain columns of the table,
Store, would filter the Store name column
transaction id, would filter transaction id column
and same thing for the dates
when the user type a value into those inpuText fields, the table shrink dynamically and shows only the lines that have the right value
ex= if store column has store1, store2, store3 on the full table
and the user types store2 into the storename inpuText then the table shows only the correct lines that have only the store2 value, and this is working fine for this storename field
I have added a new outputlabel with the value "transaction type" and an input text next to it called {!transactype} on the VF page (see code below)
in the controller I have added the transactype string into the class
and added the following line to the searchtransaction function to filter on the transaction type
however when I type into the transactype new field added to the vf page, the table is not filtered and do not return the correct lines, like for the other inputtext fields= storename, transactionID, transactionDateFrom, transactionDateTo
I did not understand what is missing in the code, could you please help me, here is the full vf page and controller code
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
VF Page
APEX Controller
I am taking the hand from another developer code who have built a VF page that displays a table, on top of this page are 4 inpuText fields, those fields are used to filter certain columns of the table,
Store, would filter the Store name column
transaction id, would filter transaction id column
and same thing for the dates
when the user type a value into those inpuText fields, the table shrink dynamically and shows only the lines that have the right value
ex= if store column has store1, store2, store3 on the full table
and the user types store2 into the storename inpuText then the table shows only the correct lines that have only the store2 value, and this is working fine for this storename field
I have added a new outputlabel with the value "transaction type" and an input text next to it called {!transactype} on the VF page (see code below)
<!--saad-- adding transaction type------------------------------>
<apex:outputLabel value="Transaction Type" styleClass="outputlabel"/>
<apex:inputText value="{!transactype}" styleClass="inputTextClass">
<apex:actionSupport event="onkeyup" action="{!searchTransaction}" reRender="transtbleid" immediate="false" />
</apex:inputText>
<!--saad-- adding transaction type------------------------------>
in the controller I have added the transactype string into the class
//saad adding transactiontype
public string transactype{get; set;}
//saad
and added the following line to the searchtransaction function to filter on the transaction type
//saad
else if(transactype!=null && transactionID==null && storeName==null && eachWrp.transactionType.contains(transactype) && transactionDateFrom==null && transactionDateTo==null)
{
allTransactionWrper.add(eachWrp);
}
//saad
however when I type into the transactype new field added to the vf page, the table is not filtered and do not return the correct lines, like for the other inputtext fields= storename, transactionID, transactionDateFrom, transactionDateTo
I did not understand what is missing in the code, could you please help me, here is the full vf page and controller code
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
VF Page
<apex:page controller="LbwTransactionSummaryCtrl" id="pageid" docType="html-5.0">
<script>
var lastRow;
function highlight(elem){
if(lastRow != undefined)
lastRow.style.backgroundColor = 'white';
elem.style.backgroundColor = '#8470FF';
lastRow = elem;
}
</script>
<style>
.tableHeader{
background: #9E9E9E;
color: white;
font-weight: bold;
//padding: 4px;
//border: 1px solid #9E9E9E;
text-align: center;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
font-size: 10px;
height: 20px;
}
.tableData{
border-collapse: collapse;
text-align: center;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
font-size: 10px;
background: white;
border-right:thin solid;
border-color:white;
border-bottom: 1px solid #9E9E9E;
border-right: 1px solid #9E9E9E;
border-left: 1px solid #9E9E9E;
height: 15px;
width: 100%;
}
tableData : hover{
background-color: yellow;
}
.tableClass{
width: 100%;
//background: #9E9E9E;
border-collapse: collapse;
}
.inputTextClass{
background: #eee;
color: black;
//font-weight: bold;
//padding: 4px;
//border: 1px solid #ccc;
text-align: left;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
font-size: 10px;
width: 90%;
}
.outputlabel{
color: black;
font-weight: bold;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
font-size: 12px;
}
</style>
<apex:form id="formid">
<br/>
<apex:panelGrid columns="10" width="100%" id="panelgrid">
<!--<apex:outputLabel value="Customer :" styleClass="outputlabel"/>
<apex:outputLabel value="{!contactName}" styleClass="outputlabel"/>-->
<apex:outputLabel value="Store" styleClass="outputlabel"/>
<apex:inputText value="{!storeName}" styleClass="inputTextClass">
<apex:actionSupport event="onkeyup" action="{!searchTransaction}" reRender="transtbleid" immediate="false" />
</apex:inputText>
<!--saad-- adding transaction type------------------------------>
<apex:outputLabel value="Transaction Type" styleClass="outputlabel"/>
<apex:inputText value="{!transactype}" styleClass="inputTextClass">
<apex:actionSupport event="onkeyup" action="{!searchTransaction}" reRender="transtbleid" immediate="false" />
</apex:inputText>
<!--saad-- adding transaction type------------------------------>
<apex:outputLabel value="Transaction ID" styleClass="outputlabel"/>
<apex:inputText value="{!transactionID}" styleClass="inputTextClass">
<apex:actionSupport event="onkeyup" action="{!searchTransaction}" reRender="transtbleid" immediate="false" />
</apex:inputText>
<apex:outputLabel value="Date Range : From" styleClass="outputlabel"/>
<!--<apex:inputText value="{!transactionDate}" id="fromdateid" onclick="DatePicker.pickDate(false, 'pageid:formid:panelgrid:fromdateid', false);" />-->
<apex:input type="date" value="{!transactionDateFrom}" styleClass="inputTextClass">
<apex:actionSupport event="onchange" action="{!searchTransaction}" reRender="transtbleid" immediate="false" />
</apex:input>
<apex:outputLabel value="To" styleClass="outputlabel" />
<apex:input type="date" value="{!transactionDateTo}" styleClass="inputTextClass">
<apex:actionSupport event="onchange" action="{!searchTransaction}" reRender="transtbleid" immediate="false" />
</apex:input>
</apex:panelGrid>
<br/>
<apex:outputPanel id="transtbleid">
<table class="tableClass">
<tr class="tableHeader">
<th width="6%" style="text-align: center;">Transaction<br/> ID</th>
<th width="6%" style="text-align: center;">Transaction<br/> Type</th>
<th width="7%" style="text-align: center;">Total Spend<br/> before tax</th>
<th width="7%" style="text-align: center;">Total Spend<br/> after tax</th>
<th width="7%" style="text-align: center;">Total Points<br/> Earned</th>
<th width="7%" style="text-align: center;">Total Points<br/> Redeemed</th>
<th width="8%" style="text-align: center;">Total Dollars<br/> Off(Offer)</th>
<th width="9%" style="text-align: center;">Total Dollars<br/> Off(Redemption)</th>
<th width="9%" style="text-align: center;">Store<br/> Name</th>
<th width="6%" style="text-align: center;">Transaction<br/> Date</th>
<th width="7%" style="text-align: center;">Transaction<br/> Time</th>
<th width="9%" style="text-align: center;">Device Friendly<br/> Name</th>
</tr>
<apex:repeat value="{!allTransactionWrper}" var="eachTrns">
<tr class="tableData" onclick="highlight(this);" onMouseOver="highlight(this);">
<td ><apex:outputLabel value="{!eachTrns.transactionID}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td ><apex:outputLabel value="{!eachTrns.transactionType}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td ><apex:outputLabel value="{!eachTrns.totalSpendBeforeTax}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.totalSpendAfterTax}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.totalPointsEarned}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.totalPointsRedeemed}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.totalDollarsOffer}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.totalDollarspointRedemption}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.storeName}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.transDate}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.transactionTime}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
<td><apex:outputLabel value="{!eachTrns.deviceFriendlyName}">
<apex:actionSupport action="{!displaySelectedTransaction}" event="onclick" reRender="transdetail">
<apex:param name="transNameindex" value="{!eachTrns.transactionID}"/>
</apex:actionSupport>
</apex:outputLabel>
</td>
</tr>
</apex:repeat>
</table>
</apex:outputPanel>
<br/>
<apex:outputPanel id="transdetail">
<apex:outputPanel rendered="{!displayTransactionDtl}">
<table class="tableClass">
<tr class="tableHeader">
<th width="6%" style="text-align: center;">Transaction ID</th>
<th width="4%" style="text-align: center;">Category</th>
<th width="7%" style="text-align: center;">UPC</th>
<th width="3%" style="text-align: center;">Quantity</th>
<th width="7%" style="text-align: center;">Price Before<br/> Tax</th>
<th width="7%" style="text-align: center;">Points Earned<br/> from Mass Offer</th>
<th width="8%" style="text-align: center;">Points Earned<br/> from Targeted Offer</th>
<th width="9%" style="text-align: center;">Points Earned<br/> from PCF</th>
<th width="9%" style="text-align: center;">Points Earned<br/> from Total Spend</th>
<th width="9%" style="text-align: center;">Offer Details</th>
</tr>
<apex:repeat value="{!allTransactionDtlWrper}" var="eachTrns">
<tr class="tableData">
<td>{!eachTrns.transactionID}</td>
<td>{!eachTrns.category}</td>
<td>{!eachTrns.upc}</td>
<td>{!eachTrns.quantity}</td>
<td>{!eachTrns.priceBeforeTax}</td>
<td>{!eachTrns.ptsEarnedMassOffer}</td>
<td>{!eachTrns.ptsEarnedTargetedOffer}</td>
<td>{!eachTrns.ptsEarnedPCF}</td>
<td>{!eachTrns.ptsEarnedTotalSpend}</td>
<td>{!eachTrns.offerDetails}</td>
</tr>
</apex:repeat>
</table>
</apex:outputPanel>
<br/>
</apex:outputPanel>
</apex:form>
</apex:page>
APEX Controller
public without sharing class LbwTransactionSummaryCtrl {
public list<TransactionWrper> allTransactionWrper{get;set;}
private list<TransactionWrper> allTransactionWrperOriginal{get;set;}
public list<TransactionDetailWrper> allTransactionDtlWrper{get;set;}
public boolean displayTransactionDtl{get;set;}
public string contactName{get;set;}
public string selectedTransactionId{get;set;}
public string transactionID{get; set;}
public string storeName{get; set;}
//saad adding transactiontype
public string transactype{get; set;}
//saad
public string transactionDate{get; set;}
public Date transactionDateFrom{get; set;}
public Date transactionDateTo{get; set;}
public LbwTransactionSummaryCtrl(){
//Getting contact name
contactName=Apexpages.currentpage().getParameters().get('cntname');
system.debug('contactName=========>'+contactName);
allTransactionWrper=new list<TransactionWrper>();
allTransactionWrperOriginal=new list<TransactionWrper>();
Integer tempCounter=0;
while(tempCounter<10){
TransactionWrper eachTrans=new TransactionWrper();
eachTrans.transactionID=934234523+tempCounter+'';
eachTrans.transactionType='External';
eachTrans.totalSpendBeforeTax=3456+''+tempCounter;
eachTrans.totalSpendAfterTax=84548+''+tempCounter;
eachTrans.totalPointsEarned=876+''+tempCounter;
eachTrans.totalPointsRedeemed=324+''+tempCounter;
eachTrans.totalDollarsOffer=7832+''+tempCounter;
eachTrans.totalDollarspointRedemption=567+''+tempCounter;
eachTrans.storeName='Loblaw Store No.'+tempCounter;
eachTrans.transactionDate='10/26/2016';
eachTrans.transDate=Date.Today().addDays(tempCounter);
eachTrans.transactionTime='10:34 AM';
eachTrans.deviceFriendlyName='Mobile';
allTransactionWrperOriginal.add(eachTrans);
Integer tempCounterInner=0;
while(tempCounterInner<4){
TransactionDetailWrper tdwr=new TransactionDetailWrper();
tdwr.transactionID=eachTrans.transactionID;
tdwr.category='Mobile';
tdwr.upc='74458758';
tdwr.quantity='10';
tdwr.priceBeforeTax='$'+tempCounterInner;
tdwr.ptsEarnedMassOffer='$'+tempCounterInner;
tdwr.ptsEarnedTargetedOffer='$'+tempCounterInner;
tdwr.ptsEarnedPCF='$'+tempCounterInner;
tdwr.ptsEarnedTotalSpend='$'+tempCounter;
tdwr.offerDetails='100 points for every $2 spent';
eachTrans.transactionDetails.add(tdwr);
tempCounterInner++;
}
tempCounter++;
}
allTransactionWrper.addAll(allTransactionWrperOriginal);
}
public void displaySelectedTransaction(){
displayTransactionDtl=true;
selectedTransactionId=Apexpages.currentpage().getParameters().get('transNameindex');
system.debug('selectedTransactionId========>'+selectedTransactionId);
allTransactionDtlWrper=new list<TransactionDetailWrper>();
if(selectedTransactionId!=null){
for(TransactionWrper tWrper : allTransactionWrper){
if(selectedTransactionId.equals(tWrper.transactionID)){
allTransactionDtlWrper=tWrper.transactionDetails;
}
}
}
}
public class TransactionWrper{
public string transactionID{get; set;}
public string transactionType{get; set;}
public string totalSpendBeforeTax{get; set;}
public string totalSpendAfterTax{get; set;}
public string totalPointsEarned{get; set;}
public string totalPointsRedeemed{get; set;}
public string totalDollarsOffer{get; set;}
public string totalDollarspointRedemption{get; set;}
public string storeName{get; set;}
public string transactionDate{get; set;}
public Date transDate{get; set;}
public string transactionTime{get; set;}
public string deviceFriendlyName{get; set;}
public list<TransactionDetailWrper> transactionDetails{get;set;}
public TransactionWrper(){
transactionDetails=new list<TransactionDetailWrper>();
}
}
public class TransactionDetailWrper{
public string transactionID{get; set;}
public string category{get;set;}
public string upc{get; set;}
public string quantity{get; set;}
public string priceBeforeTax{get; set;}
public string ptsEarnedMassOffer{get;set;}
public string ptsEarnedTargetedOffer{get;set;}
public string ptsEarnedPCF{get;set;}
public string ptsEarnedTotalSpend{get;set;}
public string offerDetails{get;set;}
}
public void searchTransaction(){
system.debug('transactionDateFrom=======>'+transactionDateFrom);
allTransactionWrper.clear();
for(TransactionWrper eachWrp: allTransactionWrperOriginal){
if(transactionID!=null && storeName==null && eachWrp.transactionID.contains(transactionID) && transactionDateFrom==null && transactionDateTo==null){
allTransactionWrper.add(eachWrp);
}
//saad
else if(transactype!=null && transactionID==null && storeName==null && eachWrp.transactionType.contains(transactype) && transactionDateFrom==null && transactionDateTo==null){
allTransactionWrper.add(eachWrp);
}
//saad
else if(storeName!=null && transactionID==null && eachWrp.storeName.toLowerCase().contains(storeName.toLowerCase()) && transactionDateFrom==null && transactionDateTo==null){
allTransactionWrper.add(eachWrp);
}
else if(storeName!=null && transactionID!=null && eachWrp.storeName.toLowerCase().contains(storeName.toLowerCase()) && eachWrp.transactionID.contains(transactionID) && transactionDateFrom==null && transactionDateTo==null){
allTransactionWrper.add(eachWrp);
}
else if(storeName!=null && transactionID!=null
&& eachWrp.storeName.toLowerCase().contains(storeName.toLowerCase())
&& eachWrp.transactionID.contains(transactionID)
&& transactionDateFrom!=null && transactionDateTo!=null
&& eachWrp.transDate>=transactionDateFrom
&& eachWrp.transDate<=transactionDateTo){
allTransactionWrper.add(eachWrp);
}
else if(storeName==null && transactionID==null
&& eachWrp.storeName.toLowerCase().contains(storeName.toLowerCase())
&& eachWrp.transactionID.contains(transactionID)
&& transactionDateFrom!=null && transactionDateTo!=null
&& eachWrp.transDate>=transactionDateFrom
&& eachWrp.transDate<=transactionDateTo){
allTransactionWrper.add(eachWrp);
}
}
}
}