[Hierarchical Organizational Chart] [Hierarchical Organizational Chart] How can you add a collapse and expand button
hierarchical-organizational-chart
Reactive icon
Forge component by Sylvain Billot
Application Type
Reactive
Service Studio Version
11.14.11 (Build 59394)
Platform Version
11.14.1 (Build 34445)

Hi All, 

So managed to use the Hierarchical Organizational Chart and I have gotten to a point where I need to add a + and - which would allow me to expand or collapse the displayed data. 

I have no idea how to do this, I have searched high and low and I am still lost. 

Any help would be appreciated!!

Thank you in advance!!

Nisaar

Hi Nisaar,

I have make three examples :

  • Show/Hide all addresses (with a check box on top off the page)
  • Show/Hide only one address
  • Show/Hide Sublevel

https://sylvain-billot.outsystemscloud.com/HierarchicalOrganizationalLiveDemo/

To do that, you need :

Four css classes:

.x-hide {
    display:none !important;
}

.x-display {
    display:flex !important;
}

.leaf > .nodecontent > .diagram-block-content > .x-show-sublevel,
.rootalone > .nodecontent > .diagram-block-content > .x-show-sublevel
{
    display:none !important;
}

Some JS Functions:

function toggleDisplayAddress(id) {
var elem = document.querySelector("#" + id);
if(elem.classList.contains("x-display")) {
elem.classList.add("x-hide");
elem.classList.remove("x-display");
} else {
elem.classList.add("x-display");
elem.classList.remove("x-hide");
}
}


function toggleSubContent(id) {
var elembase = document.querySelector("#" + id);
var elem = elembase.parentNode.parentNode.nextSibling;
if(elem!==null && elem.tagName=="UL"){
if(elem.classList.contains("x-hide")) {
elem.classList.add("x-display");
elem.classList.remove("x-hide");
} else {
elem.classList.add("x-hide");
elem.classList.remove("x-display");
}
}
}

function checkSubContent(id) {
var elembase = document.querySelector("#" + id);
var elem = elembase.parentNode.parentNode.nextSibling;
return elem!==null && elem.tagName=="UL";
}


and something like that in the content of your block :

"<a href='/HierarchicalOrganizationalLiveDemo/EmployeesOrgaChart?StartAtId="+Sample_Employee.Id+"'>"+
"<img src='data:image/gif;base64," + BinaryToBase64(Sample_Employee.Picture) + "'><br>" + 
Sample_Employee.JobPosition + "<br/>" +
"Email: " + Sample_Employee.Email +
"</a><br>"+
"<button type='button' onclick='toggleDisplayAddress(""addr-" + Sample_Employee.Id + """);'>Show/Hide that address</button>" +
If( IsShowAddress,
    "<div id='addr-" + Sample_Employee.Id + "' class='x-display'>",
    "<div id='addr-" + Sample_Employee.Id + "' class='x-hide'>") +
Sample_Employee.Address + "<br>" + Sample_Employee.ZipCode + " " + Sample_Employee.City+
"</div>" +
"<button class='x-show-sublevel' id='mySelf-" + Sample_Employee.Id + "' type='button' onclick='toggleSubContent(""mySelf-" + Sample_Employee.Id + """)'>Show/Hide sub level</button>"


I hope it's can help you !

Regards

Hi Nisaar,

If i have understand, you want to be able to show or hide some sub-content in each block.

If it is in the whole diagram it's very simple. You create a local boolean variable and with the if statment in formula you generate what do you want in each block..
By example : If(ShowDetail,"<div>details i want to see</div>","")

If you want this bevahor in each block you can add in html a + button and a - button that call a little javascript function to display or hide some sub-content.

That little JS function can just change style like "display:block;" or "display:none;" or more nicely change the css class of the sub-content.


Best regards
Sylvain

Hi Sylvain,

Thank you for the reply. 

I am actually trying to hide the entire block. 

I am going to give your suggestion a try and hopefully I can get it to work. 


Regards,

Nisaar

Good Day Sylvain, 

I tried your suggestion. Is it possible to point me in the right direction regarding the below? 

"If you want this bevahor in each block you can add in html a + button and a - button  "

I can't seem to find the HTML for the page. 

Much appreciated!

Regards,

Nisaar


Hi Nisaar,

When you fill the records list, Title and Content attributes support HTML.
I've just modified the documentation with that :

Regards
Sylvain

Thank you Sylvain, I will let you know once I have tested this

Hi Sylvain, 

Thank you so much for your guidance but you solution didn't quite work for me. 

Your solution, adds the + where the node content is displayed and expands and collapses the information. 

I need to expand and collapse the entire levels with a + or -.

Thank you so much for your help thus far.


Hello Nisaar,
I'll try to write some examples this week.

Hi Nisaar,

I have make three examples :

  • Show/Hide all addresses (with a check box on top off the page)
  • Show/Hide only one address
  • Show/Hide Sublevel

https://sylvain-billot.outsystemscloud.com/HierarchicalOrganizationalLiveDemo/

To do that, you need :

Four css classes:

.x-hide {
    display:none !important;
}

.x-display {
    display:flex !important;
}

.leaf > .nodecontent > .diagram-block-content > .x-show-sublevel,
.rootalone > .nodecontent > .diagram-block-content > .x-show-sublevel
{
    display:none !important;
}

Some JS Functions:

function toggleDisplayAddress(id) {
var elem = document.querySelector("#" + id);
if(elem.classList.contains("x-display")) {
elem.classList.add("x-hide");
elem.classList.remove("x-display");
} else {
elem.classList.add("x-display");
elem.classList.remove("x-hide");
}
}


function toggleSubContent(id) {
var elembase = document.querySelector("#" + id);
var elem = elembase.parentNode.parentNode.nextSibling;
if(elem!==null && elem.tagName=="UL"){
if(elem.classList.contains("x-hide")) {
elem.classList.add("x-display");
elem.classList.remove("x-hide");
} else {
elem.classList.add("x-hide");
elem.classList.remove("x-display");
}
}
}

function checkSubContent(id) {
var elembase = document.querySelector("#" + id);
var elem = elembase.parentNode.parentNode.nextSibling;
return elem!==null && elem.tagName=="UL";
}


and something like that in the content of your block :

"<a href='/HierarchicalOrganizationalLiveDemo/EmployeesOrgaChart?StartAtId="+Sample_Employee.Id+"'>"+
"<img src='data:image/gif;base64," + BinaryToBase64(Sample_Employee.Picture) + "'><br>" + 
Sample_Employee.JobPosition + "<br/>" +
"Email: " + Sample_Employee.Email +
"</a><br>"+
"<button type='button' onclick='toggleDisplayAddress(""addr-" + Sample_Employee.Id + """);'>Show/Hide that address</button>" +
If( IsShowAddress,
    "<div id='addr-" + Sample_Employee.Id + "' class='x-display'>",
    "<div id='addr-" + Sample_Employee.Id + "' class='x-hide'>") +
Sample_Employee.Address + "<br>" + Sample_Employee.ZipCode + " " + Sample_Employee.City+
"</div>" +
"<button class='x-show-sublevel' id='mySelf-" + Sample_Employee.Id + "' type='button' onclick='toggleSubContent(""mySelf-" + Sample_Employee.Id + """)'>Show/Hide sub level</button>"


I hope it's can help you !

Regards

You Sir, are a Legend. 

Thank you so much for the awesome component and the extra work you did to accommodate me with the weird request. 

Regards,

Nisaar 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.