function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
nununinununi 

Adding parent record and multiple child records in visualforce

Hello evryone,

I am trying to add a parent record (CFAMN2__Society_Onboarding__c) and multiple child records (CFAMN2__Onboarding_GL_Accounts__c) through a single VF page. As soon as the VF page loads it needs to show the related child records as well. The users need to ability to add a row to enter as many child records as they want. I am stuck at a point where I am not able to show the related child records nor am I able to save the related child records. Your help is highly appreciated. Thanks!

Controller:
public class SocietyOnboardingController {

    public string societyName     {get; set;}
    public string currencyCode    {get; set;}
    public string cfaId           {get; set;}
    public string socId           {get; set;}
    public string socUrl          {get; set;}
    public string socEmail        {get; set;}
    public string socPhone        {get; set;}
    public string socAddr         {get; set;}
    public string glDescrp        {get; set;}
    public string glRepCat        {get; set;}
    public string glType          {get; set;}
    public string glDetail        {get; set;}
    public id glSocOnb            {get; set;}
    
    public CFAMN2__Society_Onboarding__c socOnb                  {get; set;}
    public CFAMN2__Onboarding_GL_Accounts__c glAcc               {get; set;}
    public list<CFAMN2__Onboarding_GL_Accounts__c> listglAcc     {get; set;}
    
    private string socOnbId = '';
    
    public SocietyOnboardingController(ApexPages.StandardController Controller) {
    
        List<CFAMN2__Society_Onboarding__c> socOnbList = new List<CFAMN2__Society_Onboarding__c>();
        socOnbId = System.currentPageReference().getParameters().get('Id');
        glSocOnb = System.currentPageReference().getParameters().get('Id');
        socOnbList = [SELECT Id,
                             Name,
                             CurrencyIsoCode,
                             CFAMN2__CFA_Org_ID__c,
                             CFAMN2__CFA_Society_Id__c,
                             CFAMN2__Email__c,
                             CFAMN2__Mailing_Addess__c,
                             CFAMN2__Phone__c,
                             CFAMN2__Society_Homepage_URL__c
                      FROM CFAMN2__Society_Onboarding__c
                      WHERE Id = :socOnbId];
                  
         if(socOnbList.isEmpty() == false) {
             socOnb = socOnbList[0];
             societyName = socOnb.Name;
             currencyCode = socOnb.CurrencyIsoCode;
             socId = socOnb.CFAMN2__CFA_Society_Id__c;
             cfaId = socOnb.CFAMN2__CFA_Org_ID__c;
             socUrl = socOnb.CFAMN2__Society_Homepage_URL__c;
             socEmail = socOnb.CFAMN2__Email__c;
             socPhone = socOnb.CFAMN2__Phone__c;
             socAddr = socOnb.CFAMN2__Mailing_Addess__c;
         } else {
             ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.ERROR, 'This record is invalid or has already been submitted');
             ApexPages.addMessage(msg);
         }
         
         
         List<CFAMN2__Onboarding_GL_Accounts__c> listglAcc = new List<CFAMN2__Onboarding_GL_Accounts__c>();
         listglAcc = [SELECT Id,
                             Name,
                             CFAMN2__Report_Category__c,
                             CFAMN2__Detail__c,
                             CFAMN2__Type__c,
                             CFAMN2__Society_Onboarding__c
                             FROM CFAMN2__Onboarding_GL_Accounts__c
                             WHERE CFAMN2__Society_Onboarding__c = :socOnbId];
                             
         if(listglAcc.isEmpty() == false) {
             glSocOnb = socOnb.Id;
             glDescrp = glAcc.Name;
             glRepCat = glAcc.CFAMN2__Report_Category__c;
             glType = glAcc.CFAMN2__Type__c;
             glDetail = glAcc.CFAMN2__Detail__c;
         } 
         
         
     
     }
     
     public pageReference saveOnly(){
             socOnb.Name = societyName;
             socOnb.CurrencyIsoCode = currencyCode; 
             socOnb.CFAMN2__CFA_Society_Id__c = socId;
             socOnb.CFAMN2__CFA_Org_ID__c = cfaId;
             socOnb.CFAMN2__Society_Homepage_URL__c = socUrl;
             socOnb.CFAMN2__Email__c = socEmail;
             socOnb.CFAMN2__Phone__c = socPhone;
             socOnb.CFAMN2__Mailing_Addess__c = socAddr;
             upsert socOnb;
             glAcc.CFAMN2__Society_Onboarding__c = socOnb.Id;
             glAcc.Name = glDescrp;
             glAcc.CFAMN2__Report_Category__c = glRepCat;
             glAcc.CFAMN2__Type__c = glType;
             glAcc.CFAMN2__Detail__c = glDetail;
             upsert glAcc;
         
     return returnToOrigination();
     }
     
     Public void addAccount() {
        CFAMN2__Onboarding_GL_Accounts__c gl = new CFAMN2__Onboarding_GL_Accounts__c();
        listglAcc.add(gl);
    }
     
     private pageReference returnToOrigination(){
         pageReference page = new pageReference('/a1n');
         page.setRedirect(true);
         return page;
     }
    
}

VF Page:
<apex:page sidebar="false" standardController="Society_Onboarding__c" extensions="SocietyOnboardingController">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <ul id="myTab" class="nav nav-tabs">  
        <li class="active">
            <a href="#tab1" data-toggle="tab">General Information</a>
        </li>
        <li>
            <a href="#tab2" data-toggle="tab">Contact information</a>
        </li>
        <li>
            <a href="#tab3" data-toggle="tab">GL Accounts</a>
        </li>
        <li>
            <a href="#tab4" data-toggle="tab">Payment Terms</a>
        </li>
    </ul>  
    <apex:form id="theForm">
        <div id="myTabContent" class="tab-content">  
            <div class="tab-pane fade in active" id="tab1">
                <p>
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <div class="form-horizontal">                                  
                                <div class="form-group">
                                    <label class="control-label col-xs-3 required-icon true">Society Name</label>
                                    <div class="col-xs-5">
                                        <apex:inputText value="{!societyName}" styleClass="form-control"/>
                                    </div>
                                </div>                         
                                <div class="form-group">
                                    <label class="control-label col-xs-3 required-icon true">Currency</label>
                                    <div class="col-xs-5">
                                        <apex:inputField value="{!Society_Onboarding__c.CurrencyIsoCode}" styleClass="form-control"/> 
                                    </div>
                                </div>                      
                                <div class="form-group">
                                    <label class="control-label col-xs-3 required-icon true">CFA Org Id</label>
                                    <div class="col-xs-5">
                                        <apex:inputText value="{!cfaId}" styleClass="form-control"/>
                                    </div>
                                </div>                     
                                <div class="form-group">
                                    <label class="control-label col-xs-3 required-icon true">CFA Society Id</label>
                                    <div class="col-xs-5">
                                        <apex:inputText value="{!socId}" styleClass="form-control"/>
                                    </div>
                                </div>                        
                                <div class="form-group">
                                    <label class="control-label col-xs-3 required-icon true">Society Homepage URL</label>
                                    <div class="col-xs-5">
                                        <apex:inputText value="{!socUrl}" styleClass="form-control"/>
                                    </div>
                                </div>                
                            </div>
                        </div>
                    </div>
                </p>
            </div>
            <div class="tab-pane fade" id="tab2">
                <p>
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <div class="form-horizontal">                                  
                                <div class="form-group">
                                    <label class="control-label col-xs-3 required-icon true">Email</label>
                                    <div class="col-xs-5">
                                        <apex:inputText value="{!socEmail}" styleClass="form-control"/>
                                    </div>
                                </div>                         
                                <div class="form-group">
                                    <label class="control-label col-xs-3 required-icon true">Phone</label>
                                    <div class="col-xs-5">
                                        <apex:inputText value="{!socPhone}" styleClass="form-control"/>
                                    </div>
                                </div>                      
                                <div class="form-group">
                                    <label class="control-label col-xs-3 required-icon true">Mailing Address</label>
                                    <div class="col-xs-5">
                                        <apex:inputTextArea value="{!socAddr}" styleClass="form-control" rows="4"/>
                                    </div>
                                </div>                                     
                            </div>
                        </div>
                    </div>  
                </p>
            </div>
            <div class="tab-pane fade" id="tab3">
                <p>
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <div class="form-vertical;">                                  
                                <div class="form-group">
                                    <label class="control-label col-xs-1 required-icon true">Description</label>
                                    <div class="col-xs-2">
                                        <apex:inputText value="{!glDescrp}" styleClass="form-control"/>
                                    </div>
                                </div>                         
                                <div class="form-group">
                                    <label class="control-label col-xs-1 required-icon true">Report Category</label>
                                    <div class="col-xs-2">
                                        <apex:inputText value="{!glRepCat}" styleClass="form-control"/>
                                    </div>
                                </div>                      
                                <div class="form-group">
                                    <label class="control-label col-xs-1 required-icon true">Type</label>
                                    <div class="col-xs-2">
                                        <apex:inputText value="{!glType}" styleClass="form-control"/>
                                    </div>
                                </div>  
                                <div class="form-group">
                                    <label class="control-label col-xs-1 required-icon true">Detail</label>
                                    <div class="col-xs-2">
                                        <apex:inputText value="{!glDetail}" styleClass="form-control"/>
                                    </div>
                                </div>  
                                <apex:commandButton value="Add New GL Account" action="{!addAccount}"/>                                   
                            </div>
                        </div>
                    </div>      
                </p>
            </div>
        </div>  
        <div class="text-center">
            <apex:commandButton value=" Save and Continue Later" action="{!SaveOnly}" styleClass="btn btn-primary btn-lg"/>
            <apex:commandButton Value="Submit" action="{!Save}" styleClass="btn btn-primary btn-lg"/> 
            <apex:commandButton value="Cancel" action="{!Cancel}" styleClass="btn btn-primary btn-lg"/> 
        </div>
    </apex:form>
</apex:page>

 
pconpcon
So to show your related children you just need to add an apex:repeat and iterate over all of your child records and output them as you need.  To be able to insert / update a varying amount, that's a bit tougher.  What I would recommend you do is to create a wrapper class around your child that has all of the fields you care about.  Then you create a list of these wrapper classes and store those in your controller.  Then when you want to add a new blank one, you call a method in your controller that inserts a new blank wrapper and re-renders your list.  Then when you do your save method, you unmarshell all of your children back into their sObject form and then upsert those.  It's not an easy thing, but it can be done.