Organisation Chart Department Title

Hi,

As a suggested new feature could you please look at including a parameter that allows users to select a title for the Organisation Chart that will also be included in the print to image and pdf functions.

Sandy

Hi @sangel,

Thank you for your feedback.

You can add print headers right now with a bit of JavaScript and CSS. I will show how to do this.

Just open the configuration wizard and navigate to 'Custom JavaScript' step. Paste this code:

Org Chart V3:

var printHeader = "Marketing department";

renderer.onLoadingFinished(function(){
    var $printHeader = renderer.domQueryHelper.querySelector(".poch-print-header");
    
    var printHeaderFound = $printHeader.length !== 0;
    	
    if(!printHeaderFound){
        var $nodeList = renderer.domQueryHelper.getRootNodeList();	
        $nodeList.prepend("<div class='poch-print-header'>" + printHeader + "</div>");
    }
});

Org Chart V4:

let printHeader = "Marketing department";

api.onLoadingFinished(() => {
    let $printHeader = $('.poch-print-header');

    let printHeaderFound = $printHeader.length !== 0;
  
    if (!printHeaderFound) {
        let $nodeList = $('.poch-node_root');	
        $nodeList.prepend("<div class='poch-print-header'>" + printHeader + "</div>");
    }
});

This code adds print header to root node of Org Chart. you can replace text in the first line with your own text:

var printHeader = "Marketing department";

Then navigate to 'Custom CSS' step and paste the following CSS code:

Org Chart V3:

.poch-print-header {  
    display: none;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 18px;
}

.pl-print-mode .poch-print-header {
    display: block;
}

Org Chart V4:

.poch-print-header {  
    display: none;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 18px;
}

.poch-print-mode .poch-print-header {
    display: block;
}

This code sets font size and padding for the header and shows it only while printing. Learn how to apply this to multi-page reports as well in this article.

1 Like

But would there be a way to make this more dynamic, for instance, if I am printing the Org one one person, that print header would be different than another.

Hi @turtlgal,

Sure, you can set header dynamically in JavaScript code. Just set this variable according to your needs:

var printHeader = "Marketing department";

What information do you want to display in header?