PDF Creator - header with multiple rows and a background color

[sitestreet]

I’m starting to use the new PDF Creator which is going to save a lot of time (I was previous hard-coding with FPDF) but I’m struggling to design the headers. I’ve created the PDF Header and have an image and some text in it but I want the text to be some info which appears on every page (hence using the header) but is on three lines: name, job title, phone number. I also want to style the header band with a colored background.

I can’t work out how to achieve either of these things.

[famousmag]

PDF Creator Questions

You add the PDF Style as a component under the PDF Creator [image] In the Properties you define a Class Name and configure the style for it. [image] Then on the element where you want to apply the style you add the class name. [image] The style will not be visible on the page and will only apply to the generated PDF.

[sitestreet]

But this doesn’t seem to work for the Header item.

[famousmag]

you mean you don’t see a ui “class” on the Header element?
well, I suppose you can add it by hand brother…
<..... class="myHeaderClass" id="myId" ......>
Can you show the header code?

[sitestreet]

Nope, I added it by hand but it’s not doing anything:

<dmx-pdf-style id="pdfstyle1" name="headingtext" color="#f00" background="#c1fa8c"></dmx-pdf-style>
        <dmx-pdf-header id="pdfheader1" dmx-bind:margin="[40,20,40]" column-gap="50">
            <dmx-pdf-image id="pdfimage1" src="/assets/Logo.png" width="150"></dmx-pdf-image>
            <dmx-pdf-text id="pdftext1" text="Heading Text" alignment="right" dmx-bind:text="'Test Text'" class="headingtext"></dmx-pdf-text>
            <dmx-pdf-text id="pdftext2" text="Heading Text" alignment="right" dmx-bind:text="'Test Text'"></dmx-pdf-text>
            <dmx-pdf-text id="pdftext3" text="Heading Text" alignment="right" dmx-bind:text="'Test Text'"></dmx-pdf-text>
        </dmx-pdf-header>

[famousmag]

Sorry Jon, I don’t have AC2 so I can’t test it…
But are you sure you check on the generated PDF?

@patrick

The style will not be visible on the page and will only apply to the generated PDF.

[sitestreet]

It would be great to have some guidance from the Wappler team on this. I feel like it’s another ‘trial and error’ exercise.

[famousmag]

Hey Jon,

You only have problem aplying dmx-pdf-style on dmx-pdf-header -> childrens (dmx-pdf-text)?
Or it happens and on every other item that you apply the dmx-pdf-style?
*Just an test to understand where the problem come from…
Can you apply the dmx-pdf-style straight on the dmx-pdf-header (not on its dmx-pdf-text child)?
eg

<dmx-pdf-header id="pdfheader1" dmx-bind:margin="[40,20,40]" column-gap="50" class="headingtext">

Will that apply the style on any childern of the dmx-pdf-header ?

[sitestreet]

That doesn’t make any difference. I’ve tried putting the class on every element one by one to see which will have an effect and none of them do.

Can someone at Wappler please advise on this? @George @Teodor @patrick

[sitestreet]

Bump.

[patrick]

On the PDF Creator add the Page Margins and adjust the Top Margin so that it will fit the header.

[sitestreet]

Thanks Patrick. I’ll give that a go. What about setting the background color of the header and footer? Or better still would be to use a background image in the header and footer.