Organisation Chart Department Title


#1

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


#2

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:

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>");
  }
      
});

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 this CSS code:

.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;
}

This code sets font size and padding for the header and shows it only while printing. You can find more information about applying CSS only to printing read this article.


#3

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.


#4

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?