Enhance Plumsail Orgchart Menu for users?

Org Chart
1

is there a possibility of having the action of this Home Button within the orgchart to go to actual SharePoint Site Home Page?

image

is there also a possibility of providing a new icon to users to select an office and after clicking it, the user navigates to other SharePoint pages that contain other OrgChart pages? something like the example below?

image
image189×175 1.83 KB

2

Hi @Jeniffer_Rivera,

You can use the following script to change the URL of the Home button:

api.onLoadingFinished(() => {
    let homeBtn = $('a[title="Home"]');
    homeBtn[0].href = "https://www.abc.com/";
});

Replace https://www.abc.com/ with your link.

As for adding a button to switch between offices, see a similar solution below:

3

@a.cox I am trying to piece together the step for the second part, but I do not want to filter what its being displayed in the OrgChart. I just want to provide the users a new button that when clicked display a menu with the names of the Offices and when any office is clicked it will direct the user to a new SharePoint Page.

4

Hi @Jeniffer_Rivera,

The code should be modified as follows:

//Creating the office button object
let officeBtn = {};

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

//Listing URL variables
let pageUrl = new URL(location.href);
let htmlUrl = "https://tenant.sharepoint.com/sites/YourSite/SiteAssets/OrgChart/officeButton.html";

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

    //Get the HTML content of the office 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(officeBtn.selector.button).length) {
                $(officeBtn.selector.button).removeClass("is-active");
                removeClickListener();
            }
        }
        
        const removeClickListener = () => {
            document.body.removeEventListener('mousedown', outsideClickListener);
        }
        
        //Show or hide the menu on click
        $(officeBtn.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
        $(officeBtn.selector.item).has(officeBtn.selector.label).click(function () {
            window.location.href = pageUrl;
        });
    });
});

officeButton.html (1.4 KB)

Upload the attached file to SiteAssets → OrgChart on the site where you have your Org Chart. Replace the value of htmlUrl with a URL to the file.

You can add the offices and URLs in the officeButtons.html file by copying and pasting the <a> tag:

<a href="https://tenant.sharepoint.com/sites/Office1/" target="_self" class="poch-dropdown-action-item dropdown-item is-size-4">
    <span class="poch-expanding-departments-item__label">Office 1</span>
</a>

Replace "https://tenant.sharepoint.com/sites/Office1/" with the actual URL and "Office1" with your preferred name for the office.

1 Like
5

@a.cox this is perfect! thank you so much!

1 Like