[SalesForce] Adding rows to apex pageblocktable with javascript

I'm not sure if this is possible but I'd like to know if you can add and remove rows from apex pageblocktables in visualforce using javascript alone. At the moment I just call the controller to update the list that the pageblocktable is based on and then rerender it, but I've found that the delay in going to the server and back can sometimes take a couple of seconds, which isn't a great user experience.

In an effort to make the UI quicker I'm already using JS to update the cells in existing rows (by passing the id to the JS function using the {!Component.Id} notation). What I'd like to do is add an entire new row, which would then be sent back to the controller along with the rest of the original list when I save everything. At the moment any new rows I add to the table body element appear on screen fine, but don't go back to the controller.

I assume this is something to with the view state, but that's where my knowledge runs out!

Thanks for any help anyone can provide.

Best Answer

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.

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] Visualforce pageBlockTable – update values in cells on load

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

Best Answer

Related Solutions

[SalesForce] Removing rows separately from the Visualforce pageBlockTable list

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

Related Topic