Best way to implement a common header and footer for multiple reports

lukuser

I'm getting into the pdf development now using the chrome-pdf and handlebars. I'd like to develop multiple reports with some common reusable elements, including a common header and footer. A header will have a standard logo and a report title (which would have to be dynamically passed to the header template). After looking at the documentation, there seems to be several ways this can be done:

Using pdf-utils header and footer, implements a separate template but it's integrated within one report. From there I suppose I could replace the default code by component? Then there are also ways to do this programmatically, child templates, sub-templates (https://jsreport.net/learn/jsrender#sub-templates), layouting... Which way would be the best?

admin

A header will have a standard logo and a report title (which would have to be dynamically passed to the header template).

If the header is simple as this. You can use the chrome native header
https://jsreport.net/learn/chrome-pdf#native-headers-and-footers

And a component to reuse the content
https://jsreport.net/learn/components

If the header would be more dynamic, based on the content on particular pages, you would need to use pdf utils.

lukuser

Thanks @admin, to be more precise, the header will have two logos (our and clients) on the left and right extremities, report title, which would have to be dynamically passed in from different report templates, and a color line on top. I already got the pdf-utils to work, except I can't figure out how to pass in the report title. Would you be able to help me with that? Here's my playground:
https://playground.jsreport.net/w/lukuser/rGuxQcvL. In this example the report title is hardcoded as "Report Title Here" but each report would have to pass in the correct title.

lukuser

Hi @admin , please let me know if this is doable.

admin

Where the title comes from? The input data? Then you can use {{@root.somePropInData}}

msageryd

If I understand correctly I have the same need, and a solution.

I have a separate header-footer report which I merge with PDF-utils
I'm "sending" data to the header-footer report via $pdf.pages, i.e. by calling {{{pdfCreatePagesGroup}}}
The header-footer report simply iterates $pdf.pages

Iterating $pdf.pages in the header-footer report. All pages but the first (5=0) gets a pageBreak:


        {{#each $pdf.pages}}
            {{#if 5}}
                <div style="page-break-before: always;"></div>
            {{/if}}

            <main class="main">
                <header class="top">
                    {{#if group.bannerColor}}
                        <div class="top-banner" style="background-color: {{group.bannerColor}}; color: {{group.textColor}};">

...etc

Here is an example calling pdfCreatePagesGroup in my main report:

{{{pdfCreatePagesGroup bannerColor=(getLevelColor @root.controlpointLevelColors levelId 'report') 
   textColor=(getLevelColor @root.controlpointLevelColors levelId 'text') 
   title=(getLevelTitle @root.report.properties.mainControlpointTypeId levelId) 
   subtitle=(getControlpointIdentifierLong ./this) 
   infoText1=../name  
   infoText2=../images.[0].name 
   showAddress=true
}}}

lukuser

Hello, thanks for the replies. @msageryd the example you provided for now is a bit too advanced for me to fully comprehend without a playground example. As you can see in my playground example, my header doesn't seem to require a loop. @admin's solution does seem to work if I include the report header string in the json data. Trouble is it won't come with the data but rather each report has it "hardcoded". As I understand I can append these extra properties to the data at beforeRender, or try to implement global variables and read them in the header maybe. I found a forum article that suggests how global variables can be leveraged: https://forum.jsreport.net/topic/1850/helpers-use-top-level-variables-and-functions/3.

msageryd

Ok, I thought your problem was that the header neded to change based on what happened in the main report. pdfCreatePagesGroup is the way to go if that's the case.

If your header data is static it's much easier. Do you have the data in the dataset you provide for rendering the report? Just access it from your header-report like Jan described above in this thread.

If you don't have the data in your original dataset, you might want to fetch it from a remote place. The fetch would be easies to to in onBeforeRender. When you have the data you can add it to req.data.whatever and then reach it from your header-report as {{@root.whatever}}

lukuser

Thanks @msageryd, yes my header data is static within a given report template, but variable to the pdf-utils header, which is reusable in all reports. Adding the script where I set my repot title and other stuff worked the way you both suggested using BeforeRender. Thank you.