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
    Commented Mar 30, 2017 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
    Commented Mar 30, 2017 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
    Commented Mar 30, 2017 at 12:11

2 Answers 2

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
    Commented Mar 30, 2017 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
    Commented Mar 30, 2017 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
    Commented Mar 30, 2017 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
    Commented Mar 30, 2017 at 14:06
  • Ah you're right, correction, its first and rows attributes
    – Raul
    Commented Mar 30, 2017 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 Commented Apr 12, 2018 at 5:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .