Not sure if this is possible but thought I would try. Is it possible to configure a expand all/collapse all button? With the click of the button, it would expand the entire org chart. Click it again it would collapse.
Thanks in advance
This is a solution for Org Chart 3. Check the reply for Org Chart 4 below.
Hello Eric! I am sorry for the long time you had to wait for a reply. In the case, you still have the issue with it, follow these steps:
-
Open Org Chart configuration wizard, select a "Custom JavaScript" tab.
-
Add the following code. I've tried to make it clear, but if you have any questions, don't hesitate to ask:
renderer.onInitialLoadingFinished(
function(){
//Button to expand/collapse nodes with initial text
var expColButton = $('<a href="#" class="poch-control-panel-link" title="Expand all"><i class="ms-Icon ms-Icon--ChevronUp poch-fabric-icon"></i></a>');
var msIcon = expColButton.find(".ms-Icon");
//Appending the button to the right control zone
$("#RightControlZone").prepend(expColButton);
//Initializing a variable for further switching of code
var isExpanded = false;
//Configuring a function on a button click
expColButton.click(function () {
//If it's not expanded
if (!isExpanded) {
renderer.showLoadingPanel();
//Expanding a specified number of nodes, in this case it's 100 but you can set a greater value
renderer.expandNodeLevels(100, function(){
//Change button text to "Collapse"
msIcon.removeClass("ms-Icon--ChevronUp");
msIcon.addClass("ms-Icon--ChevronDown");
expColButton.attr("title", "Collapse all");
renderer.hideLoadingPanel();
//Setting the variable to "true" to execute another code on next click
isExpanded = true;
});
// If it's expanded
} else {
renderer.showLoadingPanel();
renderer.collapseAllNodes(function () {
//Change button text to "Expand"
msIcon.removeClass("ms-Icon--ChevronDown");
msIcon.addClass("ms-Icon--ChevronUp");
expColButton.attr("title", "Expand all");
renderer.hideLoadingPanel();
//Setting the variable to "false" to execute another code on next click
isExpanded = false;
});
}
});
}
);
-
You will get the following button in the right control zone:
-
Customize its style as you wish.
I used Fluent UI icons for the button. You can use some other icons from the set:
I used ms-Icon--ChevronDown (for expand) and ms-Icon--ChevronUp (for collapse) icons
Hi @Evgeniy , this code works perfectly, but freezing when expand at the rootnode level (CEO level).Department w with few employees work as well.
Hi Moses! Expanding all the levels may take much time if there are many items to render. What is the number in your case and how much time does it take?
Hi @Evgeniy , We have 5 levels ., we have about 260 employees. If we expand L3, L4 and L5.,no issue. For L2 it takes bit time. if I select L1 (at CEO level), it crashes.
Moses, please raise a support ticket by sending a message to support@plumsail.com and refer to this topic. For researching the issue, I will need either of two:
- Provide an external access to the Org Chart page or create a temporary account for me, I will need at least edit permissions on the page. If the data source is a SharePoint list - I will need permissions on it too.
- Take screenshots of each tab in the configuration wizard and copy all the custom code you have in it as text. Reproduce the issue in the private mode of the browser, save and share the console logs (F12 > Console tab > Save as) and network data (F12 > Network tab > Export HAR).
Also, I do not quite understand the issue itself. The code from this topic creates a button for expanding/collapsing all the nodes in the chart. What does it mean that you expand certain levels and it fails only at the first one? Instead of explanations, you can record a screen video and attach it to the ticket.
Update for Org Chart 4.
The code snippet for the Custom JavaScript step:
api.onInitialLoadingFinished(
function () {
//Button to expand/collapse nodes with initial text
var expColButton = $('<div class="poch-control-menu-item"><a href="#" class="poch-control-menu-item__link is-size-1" title="Expand all"><i class="ms-Icon ms-Icon--ChevronUp poch-fabric-icon"></i></a></div>');
var msIcon = expColButton.find(".ms-Icon");
//Appending the button to the right control zone
$(".poch-control-panel__control-menu").prepend(expColButton);
//Initializing a variable for further switching of code
var isExpanded = false;
//Configuring a function on a button click
expColButton.click(function () {
//If it's not expanded
if (!isExpanded) {
api.showLoadingPanel();
//Expanding a specified number of nodes, in this case it's 100 but you can set a greater value
api.expandNodeLevels(100, function () {
//Change button text to "Collapse"
msIcon.removeClass("ms-Icon--ChevronUp");
msIcon.addClass("ms-Icon--ChevronDown");
expColButton.attr("title", "Collapse all");
api.hideLoadingPanel();
//Setting the variable to "true" to execute another code on next click
isExpanded = true;
});
// If it's expanded
} else {
api.showLoadingPanel();
api.collapseAllNodes(function () {
//Change button text to "Expand"
msIcon.removeClass("ms-Icon--ChevronDown");
msIcon.addClass("ms-Icon--ChevronUp");
expColButton.attr("title", "Expand all");
api.hideLoadingPanel();
//Setting the variable to "false" to execute another code on next click
isExpanded = false;
});
}
});
}
);
Styles for the Custom CSS step:
.poch-application-container .poch-application a {
color: #333;
}
.poch-application-container .poch-application a:hover {
color: #333;
}
