How can I add 'back' and 'next' arrow?

Org Chart Microsoft 365 version
1

Hello Community! I added a button to navigate in the Organizational Chart, but I need to add a left arrow and right arrow to 'go back' and 'next'. When I press in the buttons, I am going to a specify link. Can you help me with this request? I left a reference image, that I want:

image
image1485×636 21.2 KB

2

Hi @fricotoho,

Upload an attached HTML file to SiteAssets > OrgChart on the site with the Org Chart page. It contains HTML content for the arrow buttons.
arrowButtons.html (597 Bytes)

Use the following code on the 'Custom JavaScript' step:

//URL to find filterButton.html
const arrowButtonsHTML = "https://YOUR_TENANT.sharepoint.com/sites/YOUR_SITE/SiteAssets/OrgChart/arrowButtons.html";

const arrowPrevURL = "google.com"; // previous department
const arrowNextURL = "yahoo.com"; // next department

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

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

        //Hide the loading wheel
        api.hideLoadingPanel();
        
        //Navigate to previous department
        $('.prev-department').click(function() {
            window.location.href = arrowPrevURL; 
        });
        
        //Navigate to next department
        $('.next-department').click(function() {
            window.location.href = arrowNextURL; 
        });
    });
});

Change the values of the arrowButtonsHTML, arrowPrevURL and arrowNextURL constants to your own values.