0

We need to display the following using Visualforce page from Account object and need to display the Sum/Total for the Columns Open Volume and Close Volume. I used to display the 3 columns but finding it difficult to display the line and its sum for the columns Open Volume and Close Volume, can you please help.

Account volume table

I tried below code:

<apex:page controller="FetchData">
<style>
.ct
    {
        text-align:right;
    }
</style>
    <apex:pageMessages />
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockTable value="{!accounts}" var="account">                    
                <apex:column value="{!account.Name}" headerValue="Account Name" style="text-align: right;width:33%" headerClass="ct"/>
                <apex:column value="{!account.Open_Volume__c}" headerValue="Open Volume" style="text-align: right;width:33%" headerClass="ct">
                    <apex:facet name="footer"><hr noshade="noshade" width="8%" align="right"/>{!openVolumeSum}</apex:facet>
                </apex:column>
                <apex:column value="{!account.Close_Volume__c }" headerValue="Close Volume" style="text-align: right;width:33%" headerClass="ct">                
                <apex:facet name="footer"><hr noshade="noshade" width="8%" align="right"/>{!closeVolumeSum}</apex:facet>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

controller:

public with sharing class FetchData 
{
    public List<Account> accounts{get;set;}
    public Decimal openVolumeSum{get;set;}
    public Decimal closeVolumeSum{get;set;}
    public FetchData()
    {
        openVolumeSum = 0;
        closeVolumeSum = 0; 
        accounts = [Select Name, Open_Volume__c, Close_Volume__c from Account Limit 10];
        if(accounts.size()>0)
        {
            for(Account acc: accounts)
            {
                openVolumeSum = openVolumeSum+acc.Open_Volume__c;
                closeVolumeSum = closeVolumeSum+ acc.Close_Volume__c ;
            }
        }
    }
}

and got below output:

enter image description here

As you see from the image, how do I align the totals(55 & 550) in line with the column values. I tried right align but it is not working.

Thanks.

3
  • Can you include your VF markup in the question? – TSmith Mar 30 '17 at 11:19
  • Are you using Apex? You could loop through the records & increment two Integer variables for Open Volume and Close Volume based on the value in the loop. – Dan Jones Mar 30 '17 at 11:32
  • With only apex:pageblockTable you can't add the bold lines. You have to use some div elements and CSS. – Saroj Bera Mar 30 '17 at 12:11
1

Purely CSS (Easiest)

<apex:page controller="myExample">

    <style>
        [id$=theTable]>tbody>tr:last-child td { border-top: solid 3px !important; }
    </style>

    <apex:pageBlock >
        <apex:pageBlockTable value="{!theList}" id="theTable"  var="l">
            <apex:column headerValue="Value" value="{!l}"/>
        </apex:pageBlockTable>

    </apex:pageBlock>

</apex:page>

Just CSS Results

A bit of a hack but also allows you to do it.

Basically I add a value to the end of my iterator to indicate it is the total row:

Class

public class myExample{

    public string[] theList {get;set;}

    public myExample(){
        theList = New String[]{'10','20','30','total'};
    }


}

VF Page

<apex:page controller="myExample">

    <style>
        td.total_td{
            border-top: solid 3px !important; //make more selective to get rid of important

        }
    </style>

    <apex:pageBlock >
        <apex:pageBlockTable value="{!theList}" var="l">
            <apex:column headerValue="Value" styleClass="{!if(l == 'total','total_td','')}">
                <apex:outPutPanel layout="none" rendered="{!l != 'total'}">
                    {!l}
                </apex:outPutPanel>
                <apex:outPutPanel layout="none" rendered="{!l == 'total'}">
                    60
                </apex:outPutPanel>
            </apex:column>

        </apex:pageBlockTable>

    </apex:pageBlock>

</apex:page>

Results

Feel free to modify as you see fit to make it al kinds of awesome

8
  • Ahem. 10 + 20 + 30 = 60 – Adrian Larson Mar 30 '17 at 14:02
  • @AdrianLarson - Ugh. Its early. Obviously I just typed it in...Will fix it though cause my ADD will not allow it to remain wrong – Eric Mar 30 '17 at 14:03
  • 1
    You can also make use of first and last attribute and use 2 pageBlockTable's, in first pageBlockTable first={!theList.size - 1} and in second one last=1. That might be more generic. – Raul Mar 30 '17 at 14:04
  • @RahulSharma I do not see a last attribute for page block table, although I guess you could use CSS to select the last TD – Eric Mar 30 '17 at 14:06
  • Ah you're right, correction, its first and rows attributes – Raul Mar 30 '17 at 14:12
0

you can use workaround <table> <th> <tr> <td> tag as per your need and last
<table><tr><span style="color:blue">sum<span></tr><tr>{!sumOfOpenVolume}</tr><tr>{!sumOfCloseVolume}</tr>

1
  • or you can use <hr/> tag for lining thanks – Sunil Chandel Apr 12 '18 at 5:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.