+ Start a Discussion
Collen Mayer 6Collen Mayer 6 

Totals at bottom of Visual Force page (multiple records)

Hello All,
Is there anyway to update a totals field at the bottom of a visualforce page as the user updates a numeric field on multiple related records on a visualforce page (without saving/refreshing the page)? 

Suppose the data looks like this:

        Hours
6/1     7
6/2     3
6/3     3
Total 13

"Hours" in an input field for the time entry record and the total could either be a visualforce component or a roll-up field on the parent record (summing the time entries).  As the user changes hours on various days, I'd like for the total to automatically update. 

Any help is appreciated.  Thanks!

Collen
Best Answer chosen by Collen Mayer 6
Shruti SShruti S
You can do something like this - 
Apex Class
public class CollenMayerCtrlr {
    public class Item {
        public String nom {get; set;}
        public Decimal num {get; set;}
        
        public Item( String nom, Decimal num ) {
            this.nom = nom;
            this.num = num;
        }
    }
    
    public Decimal result     { get; set; }
    public List<Item> items   { get; set; }
    
    public CollenMayerCtrlr() {
        items = new List<Item>();
        result = 0.0;
        
        for( Integer i = 1; i <= 10; i++ ) {
            items.add( new Item( 'Item - ' + i, 1 ) );
            result += 1;
        }
    }
    
    public void calculateTotal() {
        result = 0.0;
        for(Item item : items ) {
            result += item.num;
        }
    }
}
Visualforce
<apex:page controller="CollenMayerCtrlr">
    <apex:form id="frm">
        <apex:actionFunction action="{!calculateTotal}" name="calculateTotal" reRender="frm"/>
        <apex:pageBlock title="Finding Total">
            <apex:pageBlockTable value="{!items}" var="item">
                <apex:column value="{!item.nom}" title="Name"/>
                <apex:column title="Number">
                    <apex:inputText value="{!item.num}" onchange="calculateTotal()"/>
                </apex:column>
            </apex:pageBlockTable>
            <hr/>
            <h1>Sum: {!result}</h1>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Please feel free to ask if you have any more doubts.

All Answers

Shruti SShruti S
I think we can do this via Roll-up Summary field. But to use Roll-up Summary field, the data has to be stored in the database. And there has to be a relationship between the objects. So if you could share the schema with me, maybe I can help you out.
Collen Mayer 6Collen Mayer 6
Thanks, Shrutl.  The "time  entries" records roll-up to a "timesheet" object which would have a roll-up summary field which totals the hours.  The problem is that I would like to total the hours as the user makes changes without saving/refreshing so the user can cancel if he or she needs to.  Also, I imagine it wouldn't be effecient to save the page each time the user makes a change in order to update the totals.  I would like the user to have a running total of hours at the bottom of the page, similar to what you might do on an excel sheet (where the fields are summed in a "totals" column). 

Any other ideas?
Shruti SShruti S
You can do something like this - 
Apex Class
public class CollenMayerCtrlr {
    public class Item {
        public String nom {get; set;}
        public Decimal num {get; set;}
        
        public Item( String nom, Decimal num ) {
            this.nom = nom;
            this.num = num;
        }
    }
    
    public Decimal result     { get; set; }
    public List<Item> items   { get; set; }
    
    public CollenMayerCtrlr() {
        items = new List<Item>();
        result = 0.0;
        
        for( Integer i = 1; i <= 10; i++ ) {
            items.add( new Item( 'Item - ' + i, 1 ) );
            result += 1;
        }
    }
    
    public void calculateTotal() {
        result = 0.0;
        for(Item item : items ) {
            result += item.num;
        }
    }
}
Visualforce
<apex:page controller="CollenMayerCtrlr">
    <apex:form id="frm">
        <apex:actionFunction action="{!calculateTotal}" name="calculateTotal" reRender="frm"/>
        <apex:pageBlock title="Finding Total">
            <apex:pageBlockTable value="{!items}" var="item">
                <apex:column value="{!item.nom}" title="Name"/>
                <apex:column title="Number">
                    <apex:inputText value="{!item.num}" onchange="calculateTotal()"/>
                </apex:column>
            </apex:pageBlockTable>
            <hr/>
            <h1>Sum: {!result}</h1>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Please feel free to ask if you have any more doubts.
This was selected as the best answer
Collen Mayer 6Collen Mayer 6
Wow this is great.  This will be really useful.  Thanks so much.