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,
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.
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?