[SalesForce] Visualforce pageBlockTable – update values in cells on load

I've been developing a page that displays dollar amounts in a table, and allows updates to those amounts. This table is read from and writes to a JSON string. Some of these dollar amounts have many decimal places, as they are worked out through formulas dividing up other values. I'd like to have these amounts display in the input field with two decimal places. As this needs to be an input field I'm not able to format these amounts as dollar values the simple way (value="{0, number, currency}". So I've taken the approach of using javascript and jquery, however I've had some trouble getting this working.

The goal: To have values in a pageBlockTable column updated on load to round up to 2 decimal places. Preferably this should effect display and not alter the field value itself, to avoid replacing data unnecessarily on save.

Issues: I haven't been able to get pageBlockTable cell entity IDs to retrieve values or write values back. I need to be able to retrieve these dynamically, but even testing with a hard coded entity Id (e.g. dp = document.getElementById('{!$Component.theBlock.theForm.TableSched.5.duePrinc}').value; ) results in an error in the console "Uncaught TypeError: Cannot read property 'value' of null". A similar argument referencing a normal inputText Id retrieves the value fine.

Vf page:

<apex:page standardController="Account" extensions="LoanScheduleTableController" docType="html-5.0" id="loansummary">
<apex:includeScript value="{!$Resource.jquery}"/> 

<script>
    $j = jQuery.noConflict(); 
    // test to set value through jquery
    $j(document).ready(function () {
        pid = {!$Component.theBlock.theForm.TableSched.5.duePrinc};
        princ = document.getElementById('pid').value;  
        princ = parseFloat(princ).toFixed(2);
        document.getElementById('pid').val(princ)
        alert('due principal to 2dp is ' + a);
    });
</script>
    <apex:pageBlock id="theBlock" title="Repayment Schedule">
        <apex:form id="theForm">
            <apex:pageBlockSection id="SecButton">
                <apex:commandButton action="{!updateSched}" value="Update Schedule" reRender="loansummary"/>
                <apex:commandButton value="Test" onclick="check()"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection columns="2" id="SecLoan">

                <apex:outputText label="Loan Amount" id="loanAmt" value="{0, number, currency}">
                    <apex:param value="{!ls.loanAmount}"/>
                </apex:outputText>
                <apex:outputText label="Interest Rate" value="{0, number, #%}">
                    <apex:param value="{!ls.interestRatePercent/100}" />
                </apex:outputText>
                <apex:outputText label="Estimated Interest" value="{0, number, currency}">
                    <apex:param value="{!ls.estimatedInterest}" />
                </apex:outputText> 
                <apex:outputText label="Origination Fee Percentage" value="{0, number, ###.0%}">
                    <apex:param value="{!ls.originationFeePercent}" />
                </apex:outputText> 
                <apex:outputText label="Origination Fee" value="{0, number, currency}">
                    <apex:param value="{!ls.originationFeeAmount}" />
                </apex:outputText>
                <apex:outputText label="Annual Fee Percentage" value="{0, number, ###.0%}">
                    <apex:param value="{!ls.annualFee}" />
                </apex:outputText>
                <apex:outputText label="Daily Fee Percentage" value="{0, number, ###.0%}">
                    <apex:param value="{!ls.dailyFee}" />
                </apex:outputText>
                <apex:outputText label="Estimated Fee" value="{0, number, currency}">
                    <apex:param value="{!ls.estimatedFee}" />
                </apex:outputText>
                <apex:outputText label="Actual Fee" value="{0, number, currency}">
                    <apex:param value="{!ls.actualFee}" />
                </apex:outputText>
                <apex:outputText label="Penalty Rate" value="{0, number, ###.0%}">
                    <apex:param value="{!ls.penaltyRate}" />
                </apex:outputText>
                <apex:outputText label="Additional Rate" value="{0, number, ###.0%}">
                    <apex:param value="{!ls.additionalRate}" />
                </apex:outputText>
            </apex:pageBlockSection>
            <apex:pageBlockTable value="{!schedules}" var="sitem" id="TableSched">
                <apex:column headerValue="Due Date">
                    <apex:input type="date" value="{!sitem.dueDate}" disabled="{!sitem.dueDate<TODAY()}"/>
                </apex:column>
                <apex:column headerValue="Effective Date">
                    <apex:outputText value="{!sitem.effDate}"/>
                </apex:column>
                <apex:column headerValue="Due Principal">
                    <apex:input id="duePrinc" value="{!sitem.duePrin}" type="text" disabled="{!sitem.dueDate<TODAY()}"/>
                </apex:column>
                <apex:column headerValue="Due Interest">
                    <apex:outputText value="{0, number, currency}">
                    <apex:param value="{!sitem.dueInt}"/>
                    </apex:outputText>
                </apex:column>
                <apex:column headerValue="Fee">
                    <apex:outputText value="{0, number, currency}">
                    <apex:param value="{!sitem.fee}"/>
                    </apex:outputText>
                </apex:column>
                <apex:column headerValue="Total Installment">
                    <apex:outputText value="{0, number, currency}">
                    <apex:param value="{!sitem.total}"/>
                    </apex:outputText>
                </apex:column>
            </apex:pageBlockTable>
        </apex:form>
    </apex:pageBlock>
</apex:page>

Controller:

public class LoanScheduleTableController {

    private Account acct;
    ApexPages.StandardController stdController;
    public LoanJSONHandler.loanSummary ls {get;set;} // wrapper class to structure json
    public Date dat {get;set;} 

    public LoanScheduleTableController (ApexPages.StandardController stdController) {
        stdController.addFields(new List<string>{'loan_json__c'});
        this.acct = (Account)stdController.getRecord();
        if(acct.loan_json__c!=null) ls = (LoanJSONHandler.loanSummary)JSON.deserialize(acct.loan_json__c, LoanJSONHandler.loanSummary.class);

    }

    public PageReference updateSched() {
        LoanJSONHandler.createLoanSchedfromJSON(ls);
        acct.loan_json__c = JSON.serializePretty(ls);
        update acct;
        return null; // stay on the same page 
    }

    public LoanJSONHandler.loanSummary getLoan(){
        return ls;
    }

    public list<LoanJSONHandler.schedule> getSchedules(){

        //if(acct.loan_json__c!=null) schedules = (list<Schedule>)JSON.deserialize(acct.loan_json__c, list<Schedule>.class);
        system.debug('schedules: '+ls.scheds);
        return ls.scheds;
    }


}

Wrapper classes:

public with sharing class LoanJSONHandler {

    public LoanJSONHandler() {}

    // Defines shape of JSON response
    public class loanSummary {
        public string clId {get;set;}
        public decimal loanAmount {get;set;}
        public decimal interestRatePercent {get;set;}   // should be 7.33%
        public decimal estimatedInterest {get;set;}
        public final decimal originationFeePercent {get;set;}
        public decimal originationFeeAmount {get;set;}  // should be loanAmount * originationFeeAmount
        public final decimal annualFee {get;set;}       
        public final decimal dailyFee {get;set;}
        public decimal estimatedFee {get;set;}          // should be loan days / 365 * 1.5 / 100 * (loanAmount + estimatedInterest)
        public decimal actualFee {get;set;}             // should be loan days * dailyFee * (loanAmount * adjusted interest total)
        public final decimal penaltyRate {get;set;}     // should be (1+(interestRatePercent*2)/2)squared - 1       look at Math.pow(value,powerOf) method
        public final decimal additionalRate {get;set;}

        public list<schedule> scheds = new list<schedule>();

        public loanSummary() {
            originationFeePercent = 0.015;
            annualFee = 0.015;
            dailyFee = annualFee/365;
            penaltyRate = 0.202;
            additionalRate = 0.5;
        }

    }

    public class schedule {
        public string schedId {get;set;}
        public date dueDate {get;set;}
        public date effDate {get;set;}
        public decimal duePrin {get;set;}
        public decimal dueInt {get;set;}
        public decimal fee {get;set;}
        public decimal total {get;set;}
    }
}

Best Answer

I tried your code in my dev org. The issue here as per my findings is <apex:input>. It is not returning the proper value to the Javascript or jQuery .value functions. I am not sure why or there may be another option to get and set the value out of apex:input.

What I would suggest is, change your apex:input to input like this:

<input type="text" id="duePrinc" value="{!sitem.duePrin}" disabled="{!sitem.dueDate<TODAY()}"/>

Then, in your jQuery code, instead using Javascript to get the value, use jQuery straightaway like:

$j = jQuery.noConflict(); 
    $j(document).ready(function () {
        var princ = $j('#duePrinc').val(); 
        alert('due principal to 2dp is '+princ);
        princ = parseFloat(princ).toFixed(2);
        $j('#duePrinc').val(princ);
        alert('due principal to 2dp is '+princ);
    });

This will give you the result you expected.

Shailesh

Related Solutions

[SalesForce] Removing rows separately from the Visualforce pageBlockTable list

I have a simple example for you, where you can add entries to the list and show this list on the visualforce page and separately remove these entries. This looks like this:

enter image description here

The idea is to use an extra variable to define a row number to remove. Try to reproduce my example and use the logic in your code:

Class:

public with sharing class test1 {

    public List<OpportunityContactRole> objectsToInsert { get; set; } 
    public Integer numberOfRowToRemove { get; set; }
    public Opportunity opp { get; set; }

    public test1()
    {
        objectsToInsert = new List<OpportunityContactRole>();
        opp = [ Select Id From Opportunity Limit 1 ];
    }

    // The method to add a new item to the list
    public PageReference addNewObject(){

        OpportunityContactRole newObject = new OpportunityContactRole(OpportunityId = opp.id);
        objectsToInsert.add(newObject);

        return null;
    }

    // The method to remove an item from the list
    public PageReference removeNewObject(){

        objectsToInsert.remove(numberOfRowToRemove);  

        return null;
    }
}

Page:

<apex:page controller="test1">
<apex:form>

<apex:pageBlock>
<apex:variable value="{!0}" var="rowNumber" />

<!-- A main button to add a new item -->
<apex:commandButton value="Add" action="{!addNewObject}" reRender="newItems,panelWithVar" immediate="true"/>

<!-- Here we will use an extra variable to define a row number -->
<apex:outputPanel id="panelWithVar">
    <apex:variable value="{!0}" var="rowNumber" />
</apex:outputPanel>

<!-- A list with new items -->
<apex:pageBlockTable value="{!objectsToInsert}" var="item" id="newItems">
    <!-- A button to remove individual entry. 
         We must to pass the line number to define a list entry number to remove -->
    <apex:column width="5%">
        <apex:commandButton action="{!removeNewObject}" value=" X " reRender="newItems,panelWithVar">
            <apex:param name="p1" value="{!rowNumber}" assignTo="{!numberOfRowToRemove}"/>
        </apex:commandButton>
    </apex:column>

    <!-- Moreover here we incrementing the row number variable -->
    <apex:column headerValue="{!$ObjectType.OpportunityContactRole.fields.Role.label}">
        <apex:inputField value="{!item.Role}"/>
        <apex:variable var="rowNumber" value="{!rowNumber + 1}" />
    </apex:column>

</apex:pageBlockTable>

</apex:pageBlock>

</apex:form>
</apex:page>

[SalesForce] Adding rows to apex pageblocktable with javascript

For sure there is no official way of adding rows to the controller state. I agree with you that technically it would involve changing the view state, which is encoded in some mysterious way and not documented at all. While I have no clue how difficult would be the trick, I would rather ask a question, if it's good to do any undocumented, unsupported officially acrobatics just to achieve better user experience. Perfect is the enemy of good.

Michael and sfdc_ninja actually pointed the options of implementing user interface in Salesforce. Let me sum up the approaches:

Stateful where every change in view is reflected in controller and vice versa. In Salesforce it's implemented by Visualforce and the default choice - usually most convenient for developers, and absolutely sufficient from users' perspective. It involves however many round-trips from web browser to server resulting in well-known delays.

Stateless where server-side controller doesn't know what happens in a web browser, but provides a set of services that can be called on demand. In Salesforce this approach is implemented by JavaScript Remoting, letting to control when the server should be contacted for resources or persisting data changes. It gives best flexibility and user experience, but in Salesforce requires JavaScript coding for even simplest actions (saving a form to mention).

Mixing the 2 approaches doesn't seem to be a good idea.

Best Answer

Related Solutions

[SalesForce] Removing rows separately from the Visualforce pageBlockTable list

[SalesForce] Adding rows to apex pageblocktable with javascript

Related Topic