Skip to Content (Press Enter)
UserImage.jpg
nisaar isaacs
104Views
11Comments
Solved
[Hierarchical Organizational Chart] [Hierarchical Organizational Chart] How can you add a collapse and expand button
Question
Reactive
Forge
hierarchical-organizational-chart
Reactive icon
Hierarchical Organizational Chart (O11)
Forge asset 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

0
0
07 Apr 2022
Copy Link
2019-11-04 15-29-58
Sylvain Billot
Solution

Replying to nisaar isaacs' comment on 19 Apr 2022 06:07:41

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

See solution in context
1
0
25 Apr 2022
Copy Link
2019-11-04 15-29-58
Sylvain Billot

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

1
0
12 Apr 2022
Copy Link
UserImage.jpg
nisaar isaacs

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

0
0
13 Apr 2022
Copy Link
UserImage.jpg
nisaar isaacs

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


0
0
14 Apr 2022
Copy Link
2019-11-04 15-29-58
Sylvain Billot

Hi Nisaar,

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

Regards
Sylvain

1
0
14 Apr 2022
Copy Link
UserImage.jpg
nisaar isaacs

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

0
0
14 Apr 2022
Copy Link
UserImage.jpg
nisaar isaacs

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.

0
0
14 Apr 2022
Copy Link
2019-11-04 15-29-58
Sylvain Billot

Replying to nisaar isaacs' comment on 14 Apr 2022 14:03:07


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

0
0
19 Apr 2022
Copy Link
2019-11-04 15-29-58
Sylvain Billot
Solution

Replying to nisaar isaacs' comment on 19 Apr 2022 06:07:41

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

1
0
25 Apr 2022
Copy Link
UserImage.jpg
nisaar isaacs

Replying to Sylvain Billot's comment on 25 Apr 2022 05:22:26

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 

0
0
28 Apr 2022
Copy Link
2021-04-17 09-53-48
José Gonçalves

Hi @Sylvain Billot ,

would be possible to have that demo project so I can understand how it was configured?

Regards

0
0
25 Nov 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.