I've been putting your product to the test, and so far, it's been working well for me. Currently, our focus is on transitioning to Office M365, but for the time being, I'm using the product with SharePoint 2013, which aligns with our current version.
In our company, which boasts a workforce of over 500 employees, navigating to specific departments, such as the Application Department, has proven to be a bit cumbersome. The current path involves navigating through CEO > Stakeholder Services > IT Director > Application Director > staffs. The resulting diagram expands to the point of being unreadable due to its size (it appears disorganized). I've attached an image for reference:
To streamline this process, I'm looking to implement a list on the left-hand side. When a department is selected, I envision that only the relevant employees would be displayed, with the managers, and If the user wants to see the employees managed by a manager, they only need to click on the manager's box. The image I've attached illustrates this concept
The latter is not just adopted to another version but also a bit optimised. Still, there is much to improve as I am no programmer. The result will look like below:
Still the solution should be modified to start the chart from the top and include several levels of directors above the required department. If you decide to go that way, I can assist you with adopting the provided solution. But I would also suggest you another, more simple way.
You can create several Org Chart pages and configure each one to display a certain department in the way you need (using filtration). On each Org Chart page add a block with links to the rest pages. Thus, clicking the links will navigate users to certain pages with certain departments.
How can I develop the function, when the dropdown shows the all option, that if press any part outside the dropdown, the dropdown will be close, instead to hit the filter button again?
Org Chart 3 has only two available data sources: SharePoint list or user profiles. Active Directory is not an option in the case of SharePoint on-premises. But the latter should be partially synchronized with the SharePoint user profiles. You can find all fields available in the data source by this link:
Of course, you need to adopt the provided solution to your use case: it just gives an idea, structure, and some basic functionality. By the way, the filtration rule contained a typo, I have corrected it.
I will enquire about the function for closing the menu and will get back to you soon.
I tried your solution with the filterig, and it is not filtering well: I left attached how can I get the value from Active User, how can I do it, the error I am gettting, and how I must to show. If you can send this information to the developer I will appreciate it, thanks in advance.
It can be either 'IT Systems Support Manager' or his manager - just start typing their names or titles and select the required option from a drop-down.
The filtering work with the name but not with the title. I prefer use the title than the name because if the manager leave the company, The person with manager title would be in this place, I am using sharepoint 2013. What do you think is happening?
I left the code to close the dropdown when you click outside of the dropdown:
// Function to toggle the visibility of the submenu with fade effect
$(".dep-menu > a").click(function () {
$(".dep-menu").toggleClass("active");
$(".dep-sub-menu").fadeToggle(200); // Adjust fade duration here (milliseconds)
});
// Function to hide the submenu when clicking outside of it
$(document).click(function(event) {
if (!$(event.target).closest('.dep-menu').length) {
$(".dep-menu").removeClass("active");
$(".dep-sub-menu").fadeOut(200); // Adjust fade duration here (milliseconds)
}
});
the final code would be in these way:
var pageUrl = new URL(location.href);
function filterDep() {
//Set a URL parameter
pageUrl.searchParams.append("dep", "any");
//Add a filtration button and selection menu
var filter = $('<div class="poch-expanding-dep-item dep-menu"><a href="#" class="poch-control-panel-link"><i class="ms-Icon ms-Icon--Org poch-fabric-icon"></i></a></div>');
$("#RightControlZone").prepend(filter);
var filterSubMenu = '<div class="poch-sub-menu dep-sub-menu" style="display: none;"></div>';
$(".dep-menu").append(filterSubMenu);
//****************************************************************************
var administration = '<a class="dep-item dep-administration" title="administration">Administration Department</a>';
var hr = '<a class="dep-item dep-hr" title=hr">Human Resources Department</a>';
var it = '<a class="dep-item dep-it" title="it">IT Department</a>';
var itNetwork = '<a class="dep-item dep-itNetwork" title="itNetwork">IT - Network Support</a>';
var itSystems = '<a class="dep-item dep-itSystems" title="itSystems">IT - Systems Support</a>';
var itServiceDesk = '<a class="dep-item dep-itServiceDesk" title="itServiceDesk">IT - Services Desk</a>';
var legal = '<a class="dep-item dep-legal" title="legal">Legal Department</a>';
//******************************************************************************
$(".dep-sub-menu").prepend(
administration +
hr +
it +
itNetwork +
itSystems +
itServiceDesk +
legal
);
//Get the current selected department
var currentDep = ".dep-" + GetUrlKeyValue("dep");
$(currentDep).addClass("dep-active");
//A function to display/hide the department selection menu
$(".dep-menu > a").click(function () {
$(".dep-menu").toggleClass("active");
$(".dep-sub-menu").fadeToggle(200);
});
$(document).click(function(event) {
if (!$(event.target).closest('.dep-menu').length) {
$(".dep-menu").removeClass("active");
$(".dep-sub-menu").fadeOut(200);
}
});
//Functions for navigating to the same page with a new department parameter
$(".dep-administration").click(
function () {
if (!$(".dep-administration").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "administration");
window.location.href = pageUrl;
}
}
);
$(".dep-hr").click(
function () {
if (!$(".dep-hr").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "hr");
window.location.href = pageUrl;
}
}
);
$(".dep-it").click(
function () {
if (!$(".dep-it").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "it");
window.location.href = pageUrl;
}
}
);
$(".dep-itNetwork").click(
function () {
if (!$(".dep-itNetwork").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "itNetwork");
window.location.href = pageUrl;
}
}
);
$(".dep-itSystems").click(
function () {
if (!$(".dep-itSystems").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "itSystems");
window.location.href = pageUrl;
}
}
);
$(".dep-itServiceDesk").click(
function () {
if (!$(".dep-itServiceDesk").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "itServiceDesk");
window.location.href = pageUrl;
}
}
);
$(".dep-legal").click(
function () {
if (!$(".dep-legal").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "legal");
window.location.href = pageUrl;
}
}
);
}
filterDep();
var dep = GetUrlKeyValue("dep");
//Set the root employee according to the current option
if(dep) {
if (dep == "administration")
{
window.location.href = '';
}
if(dep == "hr")
{
window.location.href = '';
}
else if(dep == "it")
{
window.location.href = '';
}
else if(dep == "itNetwork")
{
window.location.href = '';
}
else if(dep == "itSystems")
{
window.location.href = '';
}
else if(dep == "itServiceDesk")
{
window.location.href = '';
}
else if(dep == "legal")
{
window.location.href = '';
}
}
Regarding the filtration issue (name or title), do you mean selecting the root item? Unfortunately, it works only with a specific item from the data source which is always a specific person. Are all employees under the required job title from the same department? If so, filtration may be replaced with drilling down - it is the action that is performed on clicking the button below. Let me know whether you need help with it.
And thank you for sharing your solution for hiding the menu. Developers helped me to update the code in the mentioned topic and now it hides the menu too (on outside click). For the third version, you would need to replace this part:
//A function to display/hide the department selection menu
$(".dep-menu > a").click(
function () {
if ($(".dep-menu").hasClass("active")) {
$(".dep-menu").removeClass("active");
$(".dep-sub-menu").attr("style", "display: none");
} else {
$(".dep-menu").addClass("active");
$(".dep-sub-menu").attr("style", "display: block");
}
}
);
with this one:
const outsideClickListener = (event) => {
const $target = $(event.target);
if (!$target.closest(".dep-menu").length) {
$(".dep-menu").removeClass("active");
$(".dep-sub-menu").attr("style", "display: none");
removeClickListener();
}
}
const removeClickListener = () => {
document.body.removeEventListener('mousedown', outsideClickListener);
}
//A function to display/hide the department selection menu
$(".dep-menu > a").click(
function () {
if ($(".dep-menu").hasClass("active")) {
$(".dep-menu").removeClass("active");
$(".dep-sub-menu").attr("style", "display: none");
removeClickListener();
} else {
$(".dep-menu").addClass("active");
$(".dep-sub-menu").attr("style", "display: block");
document.body.addEventListener('mousedown', outsideClickListener);
}
}
);
I've encountered an issue with the title field in the system. Despite my attempts, it doesn't seem to be functioning as expected. I've attached an image for reference. If you're unable to identify the source of the error, could you please escalate this matter to the development team for further investigation?
It is what I meant in my last reply: you cannot use the job title of the person instead of the person himself. Or do you mean that when you type the job title it does not suggest any options to select? If you enter the account name, does the issue persist?
I understand! Could the developer implement this functionality: allowing users to set a title instead of a name? For example, they could input 'IT Manager' as the title. This way, only individuals with the specified title would be displayed
You can search for the root employee by the job title too:
As regards the rest employees, they can be filtered by the job title and thus only required ones will be displayed - is that not what you are looking for?
In some cases within the company, when a manager leaves the organization, it poses a challenge. Consider the scenario where Derek Clark leaves the company; what happens to the team members under Derek? They may not appear in the organizational chart because their former director has departed, and they now fall under a new director like Sam Smith. Manually updating each department to reflect this change can be quite tedious. Instead, adopting a structure that begins with the Marketing Director, rather than specific names, would be highly beneficial. This way, we are not reliant on individuals but rather on positions. This approach aligns with our Active Directory setup, where titles can be reassigned to other individuals. I am currently implementing this approach to create organizational charts for each department, totaling over 50 pages. If the dev team can help us to develop this functionality it would be great!
Hello Team! I migrate from sharepoint 2013, to sharepoint online M365. I am tried to set this code but I cannot see the button to allow me change to the sites to have the differents organizational charts. I am using this js code, but I dont have the css code (I think this is the problem), can you provide me please?
Thanks in advanced.
var pageUrl = new URL(location.href);
function filterDep() {
//Set a URL parameter
pageUrl.searchParams.append("dep", "any");
//Add a filtration button and selection menu
var filter = $('<div class="poch-expanding-dep-item dep-menu"><a href="#" class="poch-control-panel-link"><i class="ms-Icon ms-Icon--Org poch-fabric-icon"></i></a></div>');
$("#RightControlZone").prepend(filter);
var filterSubMenu = '<div class="poch-sub-menu dep-sub-menu" style="display: none;"></div>';
$(".dep-menu").append(filterSubMenu);
//****************************************************************************
var administration = '<a class="dep-item dep-administration" title="administration">Administration Department</a>';
var hr = '<a class="dep-item dep-hr" title=hr">Human Resources Department</a>';
var it = '<a class="dep-item dep-it" title="it">IT Department</a>';
var itNetwork = '<a class="dep-item dep-itNetwork" title="itNetwork">IT - Network Support</a>';
var itSystems = '<a class="dep-item dep-itSystems" title="itSystems">IT - Systems Support</a>';
var itServiceDesk = '<a class="dep-item dep-itServiceDesk" title="itServiceDesk">IT - Services Desk</a>';
var legal = '<a class="dep-item dep-legal" title="legal">Legal Department</a>';
//******************************************************************************
$(".dep-sub-menu").prepend(
administration +
hr +
it +
itNetwork +
itSystems +
itServiceDesk +
legal
);
//Get the current selected department
var currentDep = ".dep-" + GetUrlKeyValue("dep");
$(currentDep).addClass("dep-active");
//A function to display/hide the department selection menu
$(".dep-menu > a").click(function () {
$(".dep-menu").toggleClass("active");
$(".dep-sub-menu").fadeToggle(200);
});
$(document).click(function(event) {
if (!$(event.target).closest('.dep-menu').length) {
$(".dep-menu").removeClass("active");
$(".dep-sub-menu").fadeOut(200);
}
});
//Functions for navigating to the same page with a new department parameter
$(".dep-administration").click(
function () {
if (!$(".dep-administration").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "administration");
window.location.href = pageUrl;
}
}
);
$(".dep-hr").click(
function () {
if (!$(".dep-hr").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "hr");
window.location.href = pageUrl;
}
}
);
$(".dep-it").click(
function () {
if (!$(".dep-it").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "it");
window.location.href = pageUrl;
}
}
);
$(".dep-itNetwork").click(
function () {
if (!$(".dep-itNetwork").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "itNetwork");
window.location.href = pageUrl;
}
}
);
$(".dep-itSystems").click(
function () {
if (!$(".dep-itSystems").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "itSystems");
window.location.href = pageUrl;
}
}
);
$(".dep-itServiceDesk").click(
function () {
if (!$(".dep-itServiceDesk").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "itServiceDesk");
window.location.href = pageUrl;
}
}
);
$(".dep-legal").click(
function () {
if (!$(".dep-legal").hasClass("dep-active")) {
renderer.dataProvider.clearCache();
pageUrl.searchParams.set("dep", "legal");
window.location.href = pageUrl;
}
}
);
}
filterDep();
var dep = GetUrlKeyValue("dep");
//Set the root employee according to the current option
if(dep) {
if (dep == "administration")
{
window.location.href = '';
}
if(dep == "hr")
{
window.location.href = '';
}
else if(dep == "it")
{
window.location.href = '';
}
else if(dep == "itNetwork")
{
window.location.href = '';
}
else if(dep == "itSystems")
{
window.location.href = '';
}
else if(dep == "itServiceDesk")
{
window.location.href = '';
}
else if(dep == "legal")
{
window.location.href = '';
}
}
Hi instead to go to the filter, I am the code go to a url. For example, if I click in Marketing, the option go to the page that contain the org chart of marketing, instead use the filter. I tried to use the code version I used for sharepoint 2013 but it is not working. Can you help me?
Do I understand correctly that you would like to make it so that when you click on a certain department in the filter menu you are taken to a specific URL, rather than applying a filter rule to your existing chart?
