I'm trying to create a tree hierarchy in Visualforce using a Visualforce component in order to be able to reuse as much code as I can and make it as dynamic as possible. I'll post my code below, but keep in mind that this is work in progress, I just wanted to create a proof of concept code initially.

My initial idea was to have a wrapper class like this:

public with sharing class OrderLineWrapper {
    public OrderLineWrapper() {
        ChildOrderLines = new Map<Id, OrderLineWrapper>();

    public String ParentServiceOrder {get; set;}
    public String ParentOrderLine {get; set;}
    public Map<Id, OrderLineWrapper> ChildOrderLines {get; set;}
    public Order_Line__c OrderLine {get; set;}

    public OrderLineWrapper get(Id key)
        return ChildOrderLines.get(key);

    public List<OrderLineWrapper> values()
        return ChildOrderLines.values();

A Visualforce page that will host a component and provided it with initial Root Node:

<apex:page showHeader="true" sidebar="true"

    <c:GenericOrderLineHierarchyComponent parentnode="{!OrderLineHierarchy}"></c:GenericOrderLineHierarchyComponent>


And finally I have my recursive component:

<apex:component >
    <apex:attribute name="parentnode" description="Parent node for component"
                    type="OrderLineWrapper" required="true"/>

    <apex:repeat value="{!parentnode.ChildOrderLines}" var="key">
        <c:GenericOrderLineHierarchyComponent parentnode="{!parentnode.ChildOrderLines[key]}"></c:GenericOrderLineHierarchyComponent>

However, my component won't compile because of the following error:

Cyclic page or component references '/apexcomponent/c__genericorderlinehierarchycomponent' are not allowed

Does anybody know any workaround for this? Is there any sample code out there that demonstrates how to build a dynamic hierarchy tree in Visulforce?

  • 1
    I used jQuery treetable for this. where the parent-child relationships are modelled as data attributes in the HTML. The page/code is too big to post here. No nested components in it.
    – Keith C
    Mar 3 '16 at 8:05
  • +1 to Keith comment, except I was using ExtJS and tree grid. But you can also try to use apex dynamic component - developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/…
    – kurunve
    Mar 3 '16 at 8:48
  • Thank you guys for ideas and suggestions that I should look for an alternative approach. I managed to implement this with Angular, using ng-repeat and ng-template.
    – smukov
    Mar 4 '16 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.