How create a list on the left of the org chart, and click it to go to specific department?

Org Chart SharePoint 2013/2016 version
21

yes, I want to do this

22

Hello @fricotoho,

You can use the following custom JS to do that:

//Create a global object with custom data
window.filter = {};

//Listing variables for the GET request in the URL
filter.getParam = {};
filter.getParam.key = "dep";
filter.getParam.any = "any";
filter.getParam.mkt = "mkt";
filter.getParam.fin = "fin";

//Listing Org Chart URL variables for each department
filter.chartURL = {};
filter.chartURL.any = "https://YOUR_TENANT.sharepoint.com/sites/OrgChart";
filter.chartURL.mkt = "https://YOUR_TENANT.sharepoint.com/sites/OrgChart-Marketing";
filter.chartURL.fin = "https://YOUR_TENANT.sharepoint.com/sites/OrgChart-Financial";

//jQuery selectors for further usage
filter.selector = {};
filter.selector.button = ".poch-expanding-departments-item > .poch-dropdown";
filter.selector.item = ".poch-dropdown-action-item";
filter.selector.label = ".poch-expanding-departments-item__label";

//URL to find filterButton.html
let htmlUrl = "https://YOUR_TENANT.sharepoint.com/sites/YOUR_SITE/SiteAssets/OrgChart/filterButton.html";

api.onInitialLoadingFinished(() => {
    //Show the loading wheel
    api.showLoadingPanel();

    //Get the HTML content of the filter button
    $.get(htmlUrl, function (data) {
        //Add the HTML content to the right-zone menu    
        $(".poch-control-menu").prepend(data);

        //Hide the loading wheel
        api.hideLoadingPanel();

        const outsideClickListener = (event) => {
            const $target = $(event.target);
            if (!$target.closest(filter.selector.button).length) {
                $(filter.selector.button).removeClass("is-active");
                removeClickListener();
            }
        }
        
        const removeClickListener = () => {
            document.body.removeEventListener('mousedown', outsideClickListener);
        }
        
        //Show or hide the menu on click
        $(filter.selector.button).click(function () {
            if ($(this).hasClass("is-active")) {
                $(this).removeClass("is-active");
                removeClickListener();
            } else {
                $(this).addClass("is-active");
                document.body.addEventListener('mousedown', outsideClickListener);
            }
        });

      //Function to switch between departments
      $(filter.selector.item).has(filter.selector.label).click(function () {
          if ($(this).hasClass('dep-mkt')) {
              window.location.href = filter.chartURL.mkt;
          } else if ($(this).hasClass('dep-fin')) {
              window.location.href = filter.chartURL.fin;
          } else {
              window.location.href = filter.chartURL.any;
          }
      });
    });
});

You can add URLs to the filter.chartURL object:
filter.chartURL.fin = "https://YOUR_TENANT.sharepoint.com/sites/OrgChart-Financial";

When you do that, make sure to also add a new department to the filter.getParam object:
filter.getParam.fin = "fin";

and add a condition for it in the department switching function:

//Function to switch between departments
$(filter.selector.item).has(filter.selector.label).click(function () {
    if ($(this).hasClass('dep-mkt')) {
        window.location.href = filter.chartURL.mkt;
    } else if ($(this).hasClass('dep-fin')) {
        window.location.href = filter.chartURL.fin;  // Like so
    } else {
        window.location.href = filter.chartURL.any;
    }
});

Also, add the following custom CSS:

.poch-application-container .poch-expanding-departments-item__label {
    margin-left: 18px;
}

.poch-application-container .poch-expanding-departments-item__icon {
    position: absolute;
    color: #038387;
}

.poch-application-container .poch-expanding-departments-item__default-label {
    margin-left: 3px;
    font-size: 12px;
    color: #616161;
}

.poch-dropdown-action-item > .poch-expanding-departments-item__icon {
    display: none;
}