You need to sign in to do that
Don't have an account?
pinkelk3
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?
Hi,
You just need to add an image and dynamically hide/display it as per the event i.e collapse or epand!
Cool_D
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"/> <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...
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.
Because of these <div> tags, I always get the following error message:
How can I get rid of this?
Thanks
Josh :-)
I believe you have to set your VF Page to an API of 15.0 otherwise you get those div syntax errors.
@agum34: Works like a charm! :-) Thank you
Hi
My vf version is 18
Still it shows div tag error
@wishaki - set your vf version to 15
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 ??
Also tried ur solution. There also height & width not adjustable . If you have any solution please advise..
Thanks
Hi Atest,
I am also facing the same problem. Could you please paste the code?
Thanks,
Anil
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
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
Hi Team,
Can anyone developed without changing the version of apex classes to "18.0". Please let me if anyone achieved.
Thanks,
Anil
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
Currently, the whole tree structure is explanded by default.What changes should i make to collapse the account hierarchy by default?
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.
Any suggestions shall be appreciated.