Child templates with own headers/footers

Carl Blanchard

My report requires a custom header/footer for a child template.
For example, My report has the following pages, Cover Page, introduction page, Table of contents, terms and conditions, Then the report pages.
These pages are dynamic and the user can choose from the application if these pages are included or not.
Therefore I wrap the {#child include} in an if statement.

My current requirement for one of the templates is to have its own header/footer which is laid out differently to the rest of the report. I thought that this would be covered but it doesn't appear to work.
I've created a playground example as you can see the child's headers/footers are not rendered at all

https://playground.jsreport.net/w/anon/8h2CkiXY

jan_blaha

Think about child template as string replace.
It recognizes {#child tmpl} tag in string.
It evaluates template.
And it replaces {#child tmpl} with the result in place.
There is no other magic included.
So it can't put headers to your parent template.

Carl Blanchard

Thanks, Jan. That's not very powerful but it is what it is I guess.
Is there a way to programmatically insert header and footer on each page without using PDF Utils?

Carl Blanchard

I've answered my own question.

$( document ).ready(function() {
   
      $('[class]').filter(function() {
          return $(this).css('page-break-before').toLowerCase().indexOf('always') > -1;
        }
        ).append("Put custom header here.");
});

</script>

People can add there own headers footers. I am planning to interrogate a data attribute on all my template called Data-display-header="Custom1" or custom 2 etc. and just do away with the headers/footers in PDF utils as its not powerful enough.

Carl Blanchard

If people want a footer also then use

$( document ).ready(function() {
   
      $('[class]').filter(function() {
          return $(this).css('page-break-before').toLowerCase().indexOf('always') > -1;
        }
        ).before("This is the footer").append("Put custom header here.");
});