+ Start a Discussion
pinkelk3pinkelk3 

Inline Account Hierarchy when collapsed does not show + sign

The free Inline Account Hierarchy App is very nice, and a good example of how to do clever stuff without nasty code, but when you collapse part of the hierarchy, it doesn't show with a + sign that their are hidden children.

 

Has anyone been able to add this functionality? 

Cool_DevloperCool_Devloper

Hi,

 

You just need to add an image and dynamically hide/display it as per the event i.e collapse or epand!

 

Cool_D

pinkelk3pinkelk3

Not quite that simple; here's the VF which is rendering the tree:

 

<apex:outputText rendered="{!IF(pos.nodeType=='start',true,false)}"> <apex:image id="tree_start" url="/img/tree/minusStart.gif" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}')"/> <apex:image id="Icon_start" url="/img/icon/custom51_100/globe16.png" width="16" height="16" rendered="{!IF(pos.currentNode,false,true)}"/> <apex:image id="Icon_start_current" url="/img/icon/star16.png" width="16" height="16" rendered="{!IF(pos.currentNode,true,false)}"/> </apex:outputText> <apex:outputText rendered="{!IF(OR(pos.nodeType=='parent',pos.nodeType=='parent_end'),true,false)}"> <apex:image id="Tree_parent" url="/img/tree/minus.gif" rendered="{!IF(pos.nodeType=='parent',true,false)}" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}')"/> <apex:image id="Tree_parent_end" url="/img/tree/minusEnd.gif" rendered="{!IF(pos.nodeType=='parent_end',true,false)}" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}')"/> <apex:image id="Icon_parent" url="/img/icon/factory16.png" width="16" height="16" rendered="{!IF(pos.currentNode,false,true)}"/> <apex:image id="Icon_parent_current" url="/img/icon/star16.png" width="16" height="16" rendered="{!IF(pos.currentNode,true,false)}"/> </apex:outputText> <apex:outputText rendered="{!IF(OR(pos.nodeType=='child',pos.nodeType=='child_end'),true,false)}"> <apex:image id="Tree_child" url="/img/tree/node.gif" rendered="{!IF(pos.nodeType=='child',true,false)}" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}')"/> <apex:image id="Tree_child_current" url="/img/tree/nodeEnd.gif" rendered="{!IF(pos.nodeType=='child_end',true,false)}" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}')"/> <apex:image id="Icon_child" url="/img/icon/desk16.png" width="16" height="16" rendered="{!IF(pos.currentNode,false,true)}"/> <apex:image id="Icon_child_current" url="/img/icon/star16.png" width="16" height="16" rendered="{!IF(pos.currentNode,true,false)}"/> </apex:outputText> <apex:outputText rendered="{!IF(pos.nodeType=='end',true,false)}"> <apex:image id="Tree_end" url="/img/tree/nodeEnd.gif" height="16" width="20"/>&nbsp; <apex:image id="Icon_end" url="/img/icon/desk16.png" width="16" height="16" rendered="{!IF(pos.currentNode,false,true)}"/> <apex:image id="Icon_end_current" url="/img/icon/star16.png" width="16" height="16" rendered="{!IF(pos.currentNode,true,false)}"/> </apex:outputText> <apex:outputLink value="/{!pos.contract.id}" style="{!IF(pos.currentNode,'font-weight: bold;','')}" styleClass="columnHeadActiveBlack" target="_blank" >{!pos.contract.name}</apex:outputLink> <apex:outputText style="{!IF(pos.currentNode,'font-weight: bold;','')}" value=", {!pos.contract.Account_Name__c}"/> <apex:outputText style="{!IF(pos.currentNode,'font-weight: bold;','')}" value=", {!pos.contract.Contract_Type__c}"/> <apex:outputText style="{!IF(pos.currentNode,'font-weight: bold;','')}" value=", {!pos.contract.Contract_Start_Date__c}"/> <apex:outputText style="{!IF(pos.currentNode,'font-weight: bold;','')}" value=", {!pos.contract.Contract_Term_Months__c}"/> <div> </div> <apex:outputText rendered="{!IF(OR(pos.nodeType=='child_end',pos.nodeType=='child'),false,true)}"> <div id='{!pos.nodeId}'> </apex:outputText> <apex:outputText rendered="{!IF(OR(pos.nodeType=='child_end',pos.nodeType=='child'),true,false)}"> <div id='{!pos.nodeId}'><apex:image url="/s.gif" alt="" width="1" height="1"/></div> </apex:outputText>

 I have the image, but adding the right "render=" is my challenge...

 

agum34agum34

Here is how you can add + images to the VF Component.  Please note that I have modified this to work with the User object so the images for the child items are not the same but you can use the changeImage method the same way.

            <apex:outputText rendered="{!IF(pos.nodeType=='start',true,false)}">
                <apex:image id="tree_start" url="/img/tree/minusStart.gif" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}');changeImage('{!$Component.tree_start}', 1)"/>
                <apex:image id="Icon_start" url="{!pos.PhotoURL}" width="16" height="16" rendered="{!IF(pos.currentNode,false,true)}"/>
                <apex:image id="Icon_start_current" url="{!pos.PhotoURL}" width="16" height="16" rendered="{!IF(pos.currentNode,true,false)}"/>
            </apex:outputText>
            <apex:outputText rendered="{!IF(OR(pos.nodeType=='parent',pos.nodeType=='parent_end'),true,false)}">
                <apex:image id="Tree_parent" url="/img/tree/minus.gif" rendered="{!IF(pos.nodeType=='parent',true,false)}" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}');changeImage('{!$Component.Tree_parent}', 2)"/>
                <apex:image id="Tree_parent_end" url="/img/tree/minusEnd.gif" rendered="{!IF(pos.nodeType=='parent_end',true,false)}" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}');changeImage('{!$Component.Tree_parent_end}', 3)"/>                
                <apex:image id="Icon_parent" url="{!pos.PhotoURL}" width="16" height="16" rendered="{!IF(pos.currentNode,false,true)}"/>
                <apex:image id="Icon_parent_current" url="{!pos.PhotoURL}" width="16" height="16" rendered="{!IF(pos.currentNode,true,false)}"/>
            </apex:outputText>
            <apex:outputText rendered="{!IF(OR(pos.nodeType=='child',pos.nodeType=='child_end'),true,false)}">
                <apex:image id="Tree_child" url="/img/tree/node.gif" rendered="{!IF(pos.nodeType=='child',true,false)}" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}')"/>
                <apex:image id="Tree_child_current" url="/img/tree/nodeEnd.gif" rendered="{!IF(pos.nodeType=='child_end',true,false)}" height="16" width="20" title="Click to expand/collapse nested items." onClick="TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}')"/>
                <apex:image id="Icon_child" url="{!pos.PhotoURL}" width="16" height="16" rendered="{!IF(pos.currentNode,false,true)}"/>    
                <apex:image id="Icon_child_current" url="{!pos.PhotoURL}" width="16" height="16" rendered="{!IF(pos.currentNode,true,false)}"/>
            </apex:outputText>
            <apex:outputText rendered="{!IF(pos.nodeType=='end',true,false)}">
                <apex:image id="Tree_end" url="/img/tree/nodeEnd.gif" height="16" width="20"/>&nbsp;
                <apex:image id="Icon_end" url="{!pos.PhotoURL}" width="16" height="16" rendered="{!IF(pos.currentNode,false,true)}"/>
                <apex:image id="Icon_end_current" url="{!pos.PhotoURL}" width="16" height="16" rendered="{!IF(pos.currentNode,true,false)}"/>
            </apex:outputText>
<!-- Change Below -->
            <apex:outputLink value="/{!pos.User.id}" style="{!IF(pos.currentNode,'font-weight: bold;','')}" styleClass="columnHeadActiveBlack" target="_top">{!pos.User.name}</apex:outputLink>

<!-- Include the following if you uses sites with accounts -->

            <apex:outputText style="{!IF(pos.currentNode,'font-weight: bold;','')}" value=", {!pos.User.Title}" rendered="{!IF(pos.User.Title != '', true, false)}"/>
<!-- Stop -->
            </span>
            <div> </div>
            <apex:outputText rendered="{!IF(OR(pos.nodeType=='child_end',pos.nodeType=='child'),false,true)}">
                <div id='{!pos.nodeId}'>
            </apex:outputText>
            <apex:outputText rendered="{!IF(OR(pos.nodeType=='child_end',pos.nodeType=='child'),true,false)}">
                <div id='{!pos.nodeId}'><apex:image url="/s.gif" alt="" width="1" height="1"/></div>
            </apex:outputText>
            <apex:repeat value="{!pos.closeFlag}" var="close">
                </div>
            </apex:repeat>            

    </apex:repeat>
    <br/><br/><br/>
    </div>
<script type="text/javascript">
String.prototype.endsWith = function(str){return (this.match(str+"$")==str)}
function changeImage(s, i) {
     imageURL = document.getElementById(s).src;
     if (i == 1) {
         if (imageURL.endsWith("/img/tree/minusStart.gif")) imageURL = "/img/tree/plusStart.gif";
         else if (imageURL.endsWith("/img/tree/plusStart.gif")) imageURL = "/img/tree/minusStart.gif";
     } else if (i == 2) {
         if (imageURL.endsWith("/img/tree/minus.gif")) imageURL = "/img/tree/plus.gif";
         else if (imageURL.endsWith("/img/tree/plus.gif")) imageURL = "/img/tree/minus.gif";
     } else if (i == 3) {
         if (imageURL.endsWith("/img/tree/minusEnd.gif")) imageURL = "/img/tree/plusEnd.gif";
         else if (imageURL.endsWith("/img/tree/plusEnd.gif")) imageURL = "/img/tree/minusEnd.gif";
     } else {
        return;
     }
     document.getElementById(s).src=imageURL;
} 
</script>
</apex:component>

 

 

baller4life7baller4life7
            <apex:outputText rendered="{!IF(OR(pos.nodeType=='child_end',pos.nodeType=='child'),false,true)}">
 <div id='{!pos.nodeId}'>
            </apex:outputText>
            <apex:outputText rendered="{!IF(OR(pos.nodeType=='child_end',pos.nodeType=='child'),true,false)}">
                <div id='{!pos.nodeId}'><apex:image url="/s.gif" alt="" width="1" height="1"/></div>
            </apex:outputText>
            <apex:repeat value="{!pos.closeFlag}" var="close">
 </div>
            </apex:repeat>

 Because of these <div> tags, I always get the following error message:

ErrorError: The element type "div" must be terminated by the matching end-tag "</div>".



How can I get rid of this?

 

Thanks

Josh :-)

agum34agum34

I believe you have to set your VF Page to an API of 15.0 otherwise you get those div syntax errors.

baller4life7baller4life7

@agum34: Works like a charm! :-) Thank you

vvishaklvvishakl

Hi

My vf version is 18

Still it shows div tag error

agum34agum34

@wishaki - set your vf version to 15 

AtestAtest

Hi @agum34 and others,

 

I was working on this component and was able to change the image in diff way .

 

onmouseup function

this.src=new image url.

 

This is working fine but whenever I set the height and width after onclick  TreeNodeElement.prototype.toggle call it reverts back to 16/20 image size ...

did any one got this problem ??

is there a way to change ??

AtestAtest

Also tried ur solution. There also height & width not adjustable . If you have any solution please advise..

 

Thanks

Rocks_SFDCRocks_SFDC

Hi Atest,

 

I am also facing the same problem. Could you please paste the code?

 

Thanks,

Anil

Rocks_SFDCRocks_SFDC

Hi Team,

 

I am also not able to get the  '+' symbol, when we try to hide the account hierarchy. It is showing '-' symbol always.

 

Please let me know if anyone implemented this problem.

 

Thanks,

Anil

Rocks_SFDCRocks_SFDC

Hi Team,

 

I am getting the following Error:

 

Error: Unknown property 'AccountStructure.ObjectStructureMap.PhotoURL'.  

Do we need to do anything in the controller class for PhotoURL?

 

Please suggest the solution.

 

Thanks,

Anil

Rocks_SFDCRocks_SFDC

Hi Team,

 

Can anyone developed without changing the version of apex classes to "18.0". Please let me if anyone achieved.

 

Thanks,

Anil

venkatesh_d041.3888386112928691E12venkatesh_d041.3888386112928691E12
Hi All,

Expand and collapse is not working for me, please let me know if any one have faced same issue or where I have went wrong.
thanks a lot

Best Regards
venkat
Abhijeet Tiwari 14Abhijeet Tiwari 14
Hi.

Currently, the whole tree structure is explanded by default.What changes should i make to collapse the account hierarchy by default?
Benzeen Talha 6Benzeen Talha 6
Q: How the make collapse and expand work with showHeader="false"  on the visualforce page. 

I am trying to use the inline Account Hierarchy on a visualforce page where showHeader="false" and the expand and collapse is not working.
If the showHeader="true" then it works fine. It looks to me that TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}') thorows error: not defined on the page with showHeader being set to false. Now, I am trying to use the toggle function on seperate javaScript function called on the page as follows but that is posing another issue i.e. only the minusStart.gif gets hidden while child below are still showing.
 
function toggle(element, bool) {
    alert(element);
    element = $(element);
    if (typeof bool !== 'boolean')
      bool = !Element.visible(element);
    Element[bool ? 'show' : 'hide'](element);
    
    return element;


​Any suggestions shall be appreciated. 
 
Dibyalisha MaharanaDibyalisha Maharana
TreeNodeElement.prototype.toggle(this,'{!pos.nodeId}') is not working for me, as it it not getting collapsed on click of '-' symbol.If it is working for anyone please let me know. It would be a great help.