Drill Down to manager after opening search result

Org Chart
1

Hey Guys,

what we want to achieve: If we search for persons who have no people under them in the hierarchy we want to drill down to their manager. This will show the team and not only one person. I saw the article for drilling down to the current users manager on initial load but I don’t get it working for this use case.

Is such behaviour possible?

2

This is a solution for Org Chart 3. Check the reply for Org Chart 4 below.

Hi @JoshMohr,

Please open the configuration wizard, navigate to the "Custom JavaScript tab and paste this script:

renderer.searchManager._searchResultClickedAction = function (itemId) {
    renderer.dataProvider.getBoxGroupItemDataById(itemId, function (item) {

        if (item.DirectReports.length === 0 && item.ParentId) {
            renderer.drillDown(item.ParentId);
        } else {
            renderer.drillDown(itemId);
        }

    })
}

Note: This script uses internal Org Chart parameter "_searchResultClickedAction". Thus, I can't guarantee that this will not break after some of the future org Chart updates.

Our paid support can expose this parameter to the public API. In this case, you may need to drop a message to [email protected].

3

Hey @antonkhrit,

Thanks your script works like a charm! I guess it won’t be a huge problem if this will stop working :slight_smile:

1 Like
4

You are welcome @JoshMohr!

5

@antonkhrit How do I get one level up with manager and one level down for subordinates in search result?
Currently the script mentioned in this page goes only one level up.

6

@antonkhrit im trying to use this code in our environment SP- 2013, and reading from a SP list. What values must be changed to match our own fields, if any? As copying it direct does not work.

Thanks

7

Hello! I will consult with developers regarding this and will reply to you soon.

8

Hello! Please try this code:

renderer.searchResultClickedAction = function (itemId) {
    renderer.dataProvider.getBoxGroupItemDataById(itemId, function (item) {
        if (item.DirectReports.length === 0 && item.ParentId) {
            renderer.drillDown(item.ParentId);
        } else {
            renderer.drillDown(itemId);
        }

    })
}
9

Thank you for this! This worked perfect.
I was also wondering if it be possible to change the background colour of the person originally searched on the search results rendering. So you could easily see that person in the structure. Thanks

10

This is a solution for Org Chart 3. Check the reply for Org Chart 4 below.

Please try this code:

//Create a variable to store the ID of the clicked item
var clickedItem;

renderer.searchResultClickedAction = function (itemId) {
    renderer.dataProvider.getBoxGroupItemDataById(itemId, function (item) {
        //Assign the ID of the clicked item
        clickedItem = itemId;
        if (item.DirectReports.length === 0 && item.ParentId) {
            renderer.drillDown(item.ParentId);
        } else {
            renderer.drillDown(itemId);
        }

    })
}

renderer.onBoxRendered(function (event, box, itemData) {
    //Box rendered event
    //Check whether the current item was clicked
    if (clickedItem == itemData.ID) {
        //Assign it a class
        box.$elem.addClass("clicked-item");
    }
});

Also, use this custom style on the "Custom CSS" tab:

.clicked-item {
  background-color: green !important;
}
11

Update for Org Chart 4.

The code snippet for the Custom JavaScript step in configuration:

//Create a variable to store the ID of the clicked item
let clickedItem;

api.searchResultClickedAction = function (itemId) {
    api.dataProvider.getBoxGroupItemDataById(itemId, function (item) {
        //Assign the ID of the clicked item
        clickedItem = itemId;
        if (item.directReportIds.length === 0 && item.parentId) {
            api.drillDown(item.parentId);
        } else {
            api.drillDown(itemId);
        }

    })
}

api.onBoxRendered((box, itemData) => {
    //Box rendered event
    //Check whether the current item was clicked
    if (clickedItem == itemData.ID) {
        //Assign it a class
        $(box.elem).addClass("clicked-item");
    }
});

The style for the Custom CSS step; it is for the Modern skin, for others you may need to modify the selector:

.clicked-item .poch-group-item__card {
  background-color: green !important;
}