[SalesForce] Removing rows separately from the Visualforce pageBlockTable list

I created a visualforce page (with controller) that allows adding multiple records to a custom object (master object is account). I can add new rows and save the new records, I'm also pulling information from the master records.
What I'm missing is the ability to remove each row separately – a custom button or a link. Can someone assist me with this?

Visualforce:

<apex:page controller="multiAddForecast" sidebar="false" id="CExPage" showheader="true" tabstyle="Bill__c">
<script language="JavaScript" type="text/javascript">
function CloseAndRefresh(){
window.parent.location.href="/{!$CurrentPage.parameters.id}"; self.close(); }
</script>
<apex:form >
<apex:pageBlock title="Forecast" >

<apex:pageBlockButtons >
<apex:pagemessages rendered="true" id="msg2" />
<apex:commandButton value="Add New" action="{!add}" rerender="rows" status="outStatus"/>
<apex:commandButton action="{!save}" value="Save and Close" oncomplete="javascript:CloseAndRefresh()" rerender="rows,msg2" status="outStatus"/>
</apex:pageBlockButtons>

<apex:pageBlockTable width="80%" align="center" value="{!cexs}" var="c" id="rows" >

<apex:column width="30%" headerValue="Forecasted Amount"><apex:inputField value="{!c.Forecasted_Number__c}" required="true"/></apex:column>
<apex:column width="30%" headerValue="Current Price"><apex:inputField value="{!c.Price_Per_Month__c}" required="true" /></apex:column>
<apex:column headervalue="Month"><apex:outputField value="{!c.Month__c}" /></apex:column>

</apex:pageBlockTable>       
</apex:pageblock>    
</apex:form>
</apex:page>

Controller:

public class multiAddForecast {

public List <Bill__c> CExList {get; set;}
public Id cID = ApexPages.currentPage().getParameters().get('Id'); //grab the Account ID
public Id getID {get; set;}

public multiAddForecast(){
    CExList = new List<Bill__c>();
    Date lastDate = getStartDateByAccount();
    Decimal Lastcurrency = getCurrentPriceAccount();
    addInternal(1,lastDate, Lastcurrency);
    addInternal(2,lastDate, Lastcurrency);
    addInternal(3,lastDate, Lastcurrency);

}

public List <Bill__c> getCExs() {
 return CExList;}

public void setAccounts(List <Bill__c> cexs) {
   CExList = cexs;}

public PageReference save() {//upsert records on save
upsert CExList;
ApexPages.Message myMsg = new ApexPages.message(ApexPages.Severity.Info, 'Records Saved Successfully'); //show confirmation message on save
ApexPages.addMessage(myMsg);
return null;}


public PageReference add() {

    Date lastDate = getStartDateByAccount();
    Decimal Lastcurrency = getCurrentPriceAccount();
    addInternal(CExList.size()+1,lastDate, Lastcurrency);

    return null;
}


private void addInternal(integer numMonth,Date startMonth, Decimal curr){
    Date lineDate = startMonth.addMonths(numMonth);
    Monthly_Cloud_Bill__c newObj = New Bill__c(Account__c = cID);
    newObj.Billing_Month__c = lineDate;
    newObj.Price_Per_Month__c = curr;
    CExList.add(newObj);
}    

private Date getStartDateByAccount(){
    Account account = [Select Last_Billed__c, Current_Price__c From Account Where Id = :cID];
    return account.Last_Billed__c;

}

private Decimal getCurrentPriceAccount(){
    Account account2 = [Select Current_Price__c From Account Where Id = :cID];
    return account2.Current_Price__c;

}

}

UPDATED Code:
thanks @mast0r, i published below the updated code. one problem: when trying to remove a row, i'm getting the following error: "List index out of bounds: 6
Error is in expression '{!removeNewObject}' in component in page multiaddforecast". Can you assist solving this??

Class:

public class multiAddForecast {

public List <Monthly_Cloud_Bill__c> CExList {get; set;}
public Id cID = ApexPages.currentPage().getParameters().get('Id'); //grab the Account ID
public Id getID {get; set;}
public Integer numberOfRowToRemove { get; set; }




public multiAddForecast(){
    CExList = new List<Monthly_Cloud_Bill__c>();
    Date lastDate = getStartDateByAccount();
    Decimal Lastcurrency = getCurrentPriceAccount();
    addInternal(1,lastDate, Lastcurrency);
    addInternal(2,lastDate, Lastcurrency);
    addInternal(3,lastDate, Lastcurrency);


}

public List <Monthly_Cloud_Bill__c> getCExs() {
 return CExList;}

public void setAccounts(List <Monthly_Cloud_Bill__c> cexs) {
   CExList = cexs;}

public PageReference save() {//upsert records on save
upsert CExList;
ApexPages.Message myMsg = new ApexPages.message(ApexPages.Severity.Info, 'Records Saved Successfully'); //show confirmation message on save
ApexPages.addMessage(myMsg);
return null;}


public PageReference add() {

    Date lastDate = getStartDateByAccount();
    Decimal Lastcurrency = getCurrentPriceAccount();
    addInternal(CExList.size()+1,lastDate, Lastcurrency);

    return null;
}



private void addInternal(integer numMonth,Date startMonth, Decimal curr){
    Date lineDate = startMonth.addMonths(numMonth);
    Monthly_Cloud_Bill__c newObj = New Monthly_Cloud_Bill__c(Account__c = cID);
    newObj.Billing_Month__c = lineDate;
    newObj.Effective_Price_Per_VM_Per_Month__c = curr;
    CExList.add(newObj);
}



private Date getStartDateByAccount(){
    Account account = [Select Last_Cloud_Billed__c, Current_Per_VM_Price__c From Account Where Id = :cID];
    return account.Last_Cloud_Billed__c;

}

private Decimal getCurrentPriceAccount(){
    Account account2 = [Select Current_Per_VM_Price__c From Account Where Id = :cID];
    return account2.Current_Per_VM_Price__c;

}

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

        CExList.remove(numberOfRowToRemove);  

        return null;
    }

}

Visualforce:

<apex:page controller="multiAddForecast" sidebar="false" id="CExPage" showheader="true" tabstyle="Monthly_Cloud_Bill__c">
<script language="JavaScript" type="text/javascript">
function CloseAndRefresh(){
window.parent.location.href="/{!$CurrentPage.parameters.id}"; self.close(); }
</script>
<apex:form >
<apex:pageBlock title="Forecast" >

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

<apex:pageBlockButtons >
<apex:pagemessages rendered="true" id="msg2" />
<apex:commandButton value="Add New" action="{!add}" rerender="rows" status="outStatus"/>
<apex:commandButton action="{!save}" value="Save and Close" oncomplete="javascript:CloseAndRefresh()" rerender="rows,msg2" status="outStatus"/>
</apex:pageBlockButtons>

<!-- 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 width="80%" align="center" value="{!cexs}" var="c" id="rows" >

 <apex:column width="5%">
        <apex:commandButton action="{!removeNewObject}" value=" X " reRender="rows,panelWithVar">
            <apex:param name="p1" value="{!rowNumber}" assignTo="{!numberOfRowToRemove}"/>
        </apex:commandButton>
    </apex:column> 

<apex:column width="30%" headerValue="Forecasted Amount">
    <apex:inputField value="{!c.Forecasted_Number_of_VMs__c}" required="false"/>
</apex:column>
<apex:column width="30%" headerValue="Current Per VM Price">
    <apex:inputField value="{!c.Effective_Price_Per_VM_Per_Month__c}" required="true"/>
</apex:column>
<apex:column headervalue="Billing Month">
    <apex:outputField value="{!c.Billing_Month__c}" />
    <apex:variable var="rowNumber" value="{!rowNumber + 1}" /> 
</apex:column>

</apex:pageBlockTable>

</apex:pageblock>

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

Best Answer

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>

Related Solutions

[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.

[SalesForce] How to display a list of leads in a Visualforce pageBlockTable

I took the Account example from your first link, and changed each Account reference to lead.

EDIT: From the doc page you link above, "This page does not specify a filter in the request, so the page is displayed with the last used filter." In my testing, my last used Lead filter happened to be "All Open Leads". If your last used filter shows no leads (e.g., "My Leads" if you don't own any leads), then the standard controller won't load any records by default. I've updated the code to show a List View dropdown for the standard controller using code from this doc page on using list views with standard controllers.

<apex:page standardController="Account" recordSetVar="accounts" tabstyle="account" sidebar="false">
  <apex:pageBlock >
    <apex:form >
      <apex:panelGrid columns="2">
        <apex:outputLabel value="View:"/>
        <apex:selectList value="{!filterId}" size="1">
          <apex:actionSupport event="onchange" rerender="list"/>
          <apex:selectOptions value="{!listviewoptions}"/>
        </apex:selectList>
      </apex:panelGrid>
      <apex:pageBlockTable value="{!accounts}" var="a" id="list">
        <apex:column value="{!a.name}"/>
      </apex:pageBlockTable>
    </apex:form>
  </apex:pageBlock>
</apex:page>

Note the use of apex:actionSupport to update the list in real time using the rerender param, and the addition of a matching id on the pageBlockTable for the rerender to reference.

Best Answer

Related Solutions

[SalesForce] Adding rows to apex pageblocktable with javascript

[SalesForce] How to display a list of leads in a Visualforce pageBlockTable

Related Topic