How to print a watermark on multiple pages in SAPUI5, when browser-based printing is used?

[former_member597895]

Hi All,

directly to the issue: is it possible to print a watermark on each page when browser based printing is used in SAPUI5?

in my case it is not known how many pages will be, because pages are created dynamically, based on what comes from oData: it can be few sap.m.input fields and/or sap.m.table elements, etc..

I tried to add some text with CSS as watermark, but it does not work for multiple pages.

I also tried to use some background image with text in sap.m.app and also in sap.m.page, but print function ignores background image for whatever reason.

Any ideas?

Thanks in advance,

Regards, Mindaugas

[former_member597895]

...in addition: all content is wrapped in sap.m.FlexBox, so maybe some text or image could be added as background to this controller..

Regards, Mindaugas

[former_member597895 · Accepted solution]

Hi All,

by experiments I found a solution for my issue - watermark is printed on each page in case it is renderred before the rest content of the page, please find the details below.

My CSS:

***************

/* PRINT STYLES */

@media print {

.watermark {

position: fixed !important;

top: auto;

left: 45%;

z-index: 1; /* watermark has to be on top of other web content */

height: 100%;

width: 100%;

opacity: 0.5;

color: BLACK;

font-size:

xx-large;

overflow: hidden;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

}

}

***************

Below I provide 2 versions of the same piece of my XML view:

a) Watermark will be printed only on last page:

<FlexBox id="idElements" alignItems="Start" justifyContent="Start" width="100%" displayInline="false" direction="Column" renderType="Div" wrap="Wrap" backgroundDesign="Solid">

<items /> <!-- all items created dynamically in controller, they take more than 1 page-->

</FlexBox>

<Title text="Watermark Text"></Title>

b) Watermak will be printed on each page:

<Title text="Watermark Text"></Title>

<FlexBox id="idElements" alignItems="Start" justifyContent="Start" width="100%" displayInline="false" direction="Column" renderType="Div" wrap="Wrap" backgroundDesign="Solid">

<items /> <!-- all items created dynamically in controller, they take more than 1 page-->

</FlexBox>

Maybe this helps for those who face similar issue.

Regards,

Mindaugas