+ Start a Discussion
nbknbk 

How to display grand total on the fly in Visual force page

Hi All,

Below is my requirement for displaying grand total in viusal force page.

 

The sample data is below from account object.

I have a currency field with "total" in Account object. Now I want to display the Grand total label value dynamically while editing the total.

can you please share your ideas to acheive this!. Is any built in aggregate field in Visual force to use.

 

Account NameTotal
ABC100
XYZ200
PQR300
  
Grand Total600
bob_buzzardbob_buzzard

I'm not aware of any built in aggregator on the visualforce side.  Do you have the accounts stored in a list in an extension or custom controller?  If so you could easily traverse the list and calculate the total yourself.  Another method might be to use a wrapper class that contains a list of accounts and summary information and the Visualforce page just accesses properties of the class.

nbknbk

Yes Bob if we use controller class can get total field, but the field only gets updated with page refresh/onload.

I used javascript to get the field value from field set -

 

 var ele=document.getElementById('{!$Component.pgAccount.frmAccount.pbrpid.pbsAccSection.pbtblacc1.rptAccountid}');

 

How to call fieldset value in javascript? I am getting NULL by using above statement.

 

below is my sample code

VFP:

<apex:page controller="Account_calculation_controller" id="pgAccount">
<script type="text/javascript">
  function checkValue(getElement)
  {
      alert('hello'+getElement.value);
      
      //var sumvalue = getElement.value;
      return false;
  }
  </script>
  <apex:form id="frmAccount">
 
      <apex:pageBlock id="pbrpid">
                <!--Start of Key Contact Section 7-->
             <apex:pageBlockSection columns="1" id="pbsAccSection" title="account" rendered="{!IF($ObjectType.Account.FieldSets.New_Fieldset.size=0,false,true)}">
                     <apex:PageblockTable id="pbtblacc1" value="{!lstAccount}" rendered="{!IF(lstAccount.size > 0,true,false)}" var="subAcc">
                        <apex:repeat id="rptAccountid" value="{!$ObjectType.Account.FieldSets.New_Fieldset}" var="fs">
                            <apex:column headerValue="{!$ObjectType.Account.fields[fs].label}">
                                <apex:inputField value="{!subAcc[fs]}" id="ipfield1" onchange="checkValue(this)" />
                            </apex:column>
                        </apex:repeat>
                     </apex:PageblockTable>
                     <apex:outputText value="Grand Total"></apex:outputText> <apex:outputText id="opfinaltotal" value="{!Total['total']}"/>
                     =
                     
                     <!-- Need to display the Grand total field dynamically while changing the total with respective supplier-->
                     <apex:outputLink onclick="javascript&colon;checkme();">Test</apex:outputLink>
                     <script type="text/javascript">
                         function checkme()
                         {
                             var ele=document.getElementById('{!$Component.pgAccount.frmAccount.pbrpid.pbsAccSection.pbtblacc1.rptAccountid}');
                             alert('Ele = ' + ele);
                             return false;
                         }
                     </script>
              </apex:pageBlockSection>       
         </apex:pageBlock>   
  </apex:form>
</apex:page>

 

 

Controller class:

global class Account_calculation_controller
{
    global list<Account> lstAccount { get; set; }
    global list<Account> lstAccountTotal {get;set;}
    public Account acc;
    global SObject sumCash;    
   global Account_calculation_controller()
   {
       getDetails();
        getTotal();
   }
    public List<schema.fieldsetmember> getFields()
     {  
        return SObjectType.Account.FieldSets.New_Fieldset.getFields();  
     }
     public void getDetails()
             {
               
               String query = 'SELECT ';  
                for(Schema.FieldSetMember f : this.getFields())
                {  
                    query += f.getFieldPath() + ', ';  
                }  
                query += 'Id FROM Account limit 5';  
                //return Database.query(query);  
                lstAccount = Database.query(query);
             }
     public SObject getTotal()
             {
               
               sumCash = [SELECT sum(client_spend__c) total FROM Account];  
               return sumCash ;
             }
}

bob_buzzardbob_buzzard

I'd look to handle this by submitting the page back whenever a value was changed. If you need to do it in javascript, the $Component is the correct way to access fields, you'll just need to figure out the correct id string.  Vewing the page source can help a lot with that.

 

 Failing that you might want to look at knockout.js, which has a tutorial on pretty much this topic.  The downside to that is that you can't really use regular VF pages and have to move to javascript remoting,