Disable Search Box

Org Chart Microsoft 365 version
1

Hi there

I'm using the org chart web part in a 1/3 column on a modern page to display a department.

Ideally, I would like to disable the search box & replace with words like' Meet the team' in Heading 2 format.

Is this possible?
Thanks

2

Hi @bryandolan,
You can control the OrgChart's interface and behaviour with the additional CSS and JavaScript. Please consider reviewing our JavaScript Framework.

The simplest method to achieve this, I guess, would be replacing the HTML of the search container with your welcoming message. This code will do the trick:

renderer.onLoadingFinished(
function(){       
    var search = $( ".poch-search-container")[0];
    var message = '<h2>Meet the team</h2>';
    search.innerHTML = message;
});

Once the OrgChart is loaded, the code will locate the <div> with the search bar and replace its content with your message in <h2> tag.

Additionally, you'll have to remove the border of the element with a Custom CSS rule:

.poch-search-container {
  border: 0px;
}
3

Updated code for Org Chart 4.x.x.

api.onLoadingFinished(
function(){       
    var search = $( ".poch-control-panel__search-container")[0];
    var message = '<h2>Meet the team</h2>';
    search.innerHTML = message;
});