Watermark and logo in pdf template

Hi everyone
I’m trying to create a template report for my answers, but when I try to insert the company logo (image that can move) or a watermark (fixed in the background of the sheet), they disappear or change the appearance of the template.
how do i go about having one or both?
thanks a lot for the help, I’m really in great difficulty!

3 24 2,397
24 REPLIES 24

Hello,
Did you manage to fix it?

Appsheet templates cannot handle background images.

IS IT POSSIBLE IN NEAR FUTURE?

I am not aware of any plans to change the existing behavior.

Today I found a new option in google docs: Watermark.


I did a quick testing: In PDF will contain the image. But not in the background as a watermark, but in the front and in the beginning of the document.

Template

PDF

Please update this feature

SkrOYC
Participant V

You can by using an HTML template.
I tested and worked if the URL has no & in it, which means that you cannot add a watermark from an image column of your app dynamically but you can hardcode any image you want.

    Edit: Unless you know a little Javascript... check my Part 3 for info

This is a sneak peak of one of the templates of Part 3 where I added the watermark just to demonstrate:

SkrOYC_0-1661532402138.png

The image used is from Open Source Chart Image API | QuickChart

The basics are these:

 

body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://quickchart.io/chart?c={type:'bar',data:{labels:['Q1','Q2','Q3','Q4'], datasets:[{label:'Users',data:[50,60,70,180]},{label:'Revenue',data:[100,200,300,400]}]}}");
  background-size: 500px;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  opacity: .3;
  z-index: -2;
}

 

Hi @SkrOYC may you please elaborate a bit how to do it ?

I've a Google Doc template ... then ? 

Nice  and impressive @SkrOYC 

Thanks @Suvrutt_Gurjar 🙂

SkrOYC
Participant V

@SkrOYC wrote:

Unless you know a little Javascript... check my Part 3 for info


Part 3: Pixel perfect reports with Skia (AppSheet'... - Google Cloud Community

Harriswe
Participant V

I would like to see this added as a feature too. In the legal world there are complex layout templates that need completing on a regular basis. The inability to handle a watermark image in the PDF template means this task cannot be automated using AppSheet, which is  frustrating. @SkrOYC example is a 'possible' work-around but it is a lot of work for a template you do not OWN and is therefore likely to change.  The ability to use a watermark  template offers a simple solution by overlaying the fields on-top. See screenshot, where I have left the outline of the table visible.

 

Screenshot 2022-11-18 at 09.58.59.png

Even trying this as an image and not a watermark results in the picture being shown first then all the text on the 2nd page. There are dozens of these templates in the legal world, which is no doubt the same in many jurisdictions for which AppSheet cannot assist with. Hence the feature request.

 

 

 

SkrOYC
Participant V

@Harriswe wrote:

for a template you do not OWN and is therefore likely to change


@SkrOYC  yes, these are templates in the public-domain published by regulators, government bodies (think tax-return as a example) , department of justice for legal / court forms.... to name just a few.

I understand.
Well, sometimes some thing can take time, like mastering AppSheet, but the possibilities that arise after that period are almost endless

For sure I agree. However manually positioning each field is big maintenance overhead. The ability to have a simple watermark in the template representing the form-layout drastically reduces the maintenance overhead. 

FaCe
Participant V

Hi, any update on that ? No way for AppSheet to support Watermark inside Templates (Google Doc) ?

SkrOYC
Participant V

@FaCe wrote:

I've a Google Doc template ... then ? 


Throw it away and start with HTML/CSS.

I know it sounds like a nightmare if you don't know about HTML/CSS, but that's the best path.

The fastest would be to save your GDoc as HTML and work with it, but I cannot guarantee anything about the format you get doing so. You could try adding the watermark to it after this conversion and see what happens


@SkrOYC wrote:

 

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("ImageURLHere");
  background-size: 500px;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  z-index: -2;
}

 


Just adding the code above should be enough

I've inserted your code but the result it's that at the end of html page appears the code inserted and not the image ... how can i solve it ?

here's the code (last lines of my html taken from my Template exported from Google Doc in html + your code)

...

>www.mywebsite.it</a></span></p></td></tr></table><p class="c40 c8 c22"><span class="c20"></span></p></div></body></html>
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-image: url('mypic');
background-size: 500px;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
opacity: 0.3;
z-index: -2;
}

My code is CSS and it should be inserted inside a style HTML Tag

Any hints ? I'm trying to understand how to insert it into a style HTML Tag with no success ... 

Thank you @SkrOYC for the tutorial steps, although I cannot help feeling it is a lot of effort to get around a problem where AppSheet does not support watermarks in templates. Certainly not a ‘no-code’ solution as delving into CSS as HTML tags starts to get technical. I wonder how sustainable this solution is when having to deal with different template designs, which is the norm when considering formal returns etc. 🤔

Well, I cannot take a position where I say that HTML/CSS is perfect for everyone, but if you are able to use it, it's the best option out there.


@Harriswe wrote:

I wonder how sustainable this solution is when having to deal with different template designs


My part 3 touches on that regard, and actually CSS is the most modular way to have either a shared style among different templates or different styles on the same template, it's crazy.

If you use HTML/CSS, since it's code, you can reuse it wherever you want, like my JS to add a QR code to itself

Top Labels in this Space