Passing values from Controller to VF Page

I have a requirement to display Account and its child Accounts using Gantt Chart. Here is my Logic:

Controller:

public with Sharing class Account_Gantt {
    public Account ParentRecord{get; set;}
    public Account ChildRecord{get; set;}
    public Account_Gantt() {
        ParentRecord = [SELECT Id, Name,start_date__c, end_date__c FROM Account  WHERE name = 'Test Parent Account'];
    }
    public Account_Gantt(Account_Gantt Controller){
         ChildRecord = [SELECT ID, Name, start_date__c, end_date__c from Account where parent_account__r.name = 'Test Parent Account'];
    }
}

VF Page:

<apex:page controller="Account_Gantt"  extensions="Account_Gantt" standardStylesheets="false" showHeader="false">
    <head>
       <apex:stylesheet value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.js')}"/>
        <style type="text/css" media="screen">
            html, body { margin:0px; padding:0px; height:100%; overflow:hidden; }
        </style>
    </head>
    <body>
        <div id="gantt_here" style='width:100%; height:100%;'></div>
        <script type="text/javascript">
            let ganttDataArr = [];
            for(let newParntObj=1; newParntObj <=1; newParntObj++ ) {
                let ganttDataObj = {};
                ganttDataObj["id"] = newParntObj;
                ganttDataObj["text"] = "{!ParentRecord.Name}";
                ganttDataObj["start_date"] = new Date("{!ParentRecord.start_date__c}");
                ganttDataObj["duration"] = 18;
                //ganttDataObj["order"] = "10";
                ganttDataObj["progress"] = "0.6";
                ganttDataObj["open"] = true;
                ganttDataArr.push(ganttDataObj);
            }
        
            for(let newObj = ganttDataArr.length+1; newObj <= 15; ++newObj ) {
                let ganttDataObj = {};
                ganttDataObj["id"] = newObj;
                ganttDataObj["text"] = "{!ChildRecord.Name}";
                ganttDataObj["start_date"] = new Date("{!ParentRecord.start_date__c}");
                ganttDataObj["duration"] = newObj*2;
                ganttDataObj["order"] = '10';
                ganttDataObj["progress"] = newObj%2;
                ganttDataObj["parent"] = '1';
                ganttDataArr.push(ganttDataObj);
            }

            let tasks =  {
                data: ganttDataArr,
                links:[
                    { id:1, source:1, target:2, type:"1"},
                    { id:2, source:2, target:3, type:"0"},
                    { id:3, source:3, target:4, type:"0"},
                    { id:4, source:2, target:5, type:"2"},
                ]
            };
                    
            gantt.init("gantt_here");
            gantt.parse(tasks);
                    
        </script>        
    </body>
</apex:page>

Under the Parent Account, I have 15 child Accounts. The issue here is that I could able to see Parent Account Name in the chart but not Child Accounts. I am seeing only the blank values instead of proper account names. The screenshot is as follows:

Gantt

Can anyone please let me know how to display all the 15 child account names under the parent account in the chart?

Answers 1

  • @SFDCUser the below is a generic code which should solve your problem. Let me know if it helps!

    Visualforce Page:

    <apex:page controller="Account_Gantt" standardStylesheets="false" showHeader="false">
        <head>
            <apex:stylesheet value="{!URLFOR($Resource.Timeline, 'gantt/codebase/dhtmlxgantt.css')}"/>
            <apex:includeScript value="{!URLFOR($Resource.Timeline, 'gantt/codebase/dhtmlxgantt.js')}"/>
            <style type="text/css" media="screen">
                html, body { margin:0px; padding:0px; height:100%; overflow:hidden; }
            </style>
        </head>
        <body>
            <div id="gantt_here" style='width:100%; height:100%;'></div>
            <script type="text/javascript">
                let ganttDataArr = [];
                let acctResultJSON = {!strJSON}; // store the apex variable that we serialized.
                
                // iterate over all accounts that are returned by apex
                for (let key of Object.keys(acctResultJSON)) {
                    let ganttDataObj = {};
                    ganttDataObj["id"] = acctResultJSON[key]["Id"];
                    ganttDataObj["text"] = acctResultJSON[key]["Name"];
                    if (acctResultJSON[key]["Start_Date__c"] != null) {
                        ganttDataObj["start_date"] = new Date(acctResultJSON[key]["Start_Date__c"]);
                    } else {
                        ganttDataObj["start_date"] = new Date();
                    }
                    ganttDataObj["duration"] = 18;
                    ganttDataObj["progress"] = "0.6";
                    ganttDataObj["open"] = true;
                    
                    if( acctResultJSON[key]["ChildAccounts"].totalSize > 0 ) {
                        for (let childKey = 0; childKey < acctResultJSON[key]["ChildAccounts"].totalSize; childKey++) {
                            let ganttChildDataObj = {};
                            ganttChildDataObj["id"] = acctResultJSON[key]["ChildAccounts"]["records"][childKey]["Id"];
                            ganttChildDataObj["text"] = acctResultJSON[key]["ChildAccounts"]["records"][childKey]["Name"];
                            if (acctResultJSON[key]["ChildAccounts"]["records"][childKey]["Start_Date__c"] != null) {
                                ganttChildDataObj["start_date"] = new Date(acctResultJSON[key]["ChildAccounts"]["records"][childKey]["Start_Date__c"]);
                            } else {
                                ganttChildDataObj["start_date"] = new Date();
                            }
                            ganttChildDataObj["duration"] = 18/acctResultJSON[key]["ChildAccounts"].totalSize;
                            ganttChildDataObj["order"] = '10';
                            ganttChildDataObj["progress"] = "0.6";
                            ganttChildDataObj["parent"] = acctResultJSON[key]["Id"];
                            ganttDataArr.push(ganttChildDataObj);
                        }
                    }
                    
                    ganttDataArr.push(ganttDataObj);
                }
            
                let tasks =  {
                    data: ganttDataArr,
                    links:[
                        { id:1, source:1, target:2, type:"1"},
                        { id:2, source:2, target:3, type:"0"},
                        { id:3, source:3, target:4, type:"0"},
                        { id:4, source:2, target:5, type:"2"},
                    ]
                };
                        
                gantt.init("gantt_here");
                gantt.parse(tasks);
                        
            </script>        
        </body>
    </apex:page>
    

    Apex controller:

    public with sharing class Account_Gantt {
        public List<SObject> accountRecordsList {get; set;}
        public String strJSON {get; set;}
        public Account_Gantt() {
            AggregateResult[] accountWithChildren = [SELECT COUNT(Id) countChildren, ParentId FROM Account GROUP BY ParentId];
            Set<Id> accountIds = new Set<Id>();
            for (AggregateResult ar : accountWithChildren) {
                if( ar.get('ParentId') != null ) {
                    accountIds.add( (Id)ar.get('ParentId') );
                }
            }
            accountRecordsList = [SELECT Id, Name, start_date__c, end_date__c, ParentId, (SELECT Id, Name FROM ChildAccounts) FROM Account WHERE Id IN: accountIds];
            strJSON = JSON.serialize(accountRecordsList);
        }
    }
    

    enter image description here


Related Questions