HTML Template - Expression IF/ENDIF vs Google temp...

neemias · 06-19-2022 05:17 PM

I'm trying to use expression IF/ENDIF in HTML template as i did in google docs template... to show only

pages that column was filled... but when i run the task, the message "Error 1 : '<', hexadecimal value 0x3C, is an invalid attribute character. Line 1, position 1109." is showed. I need a help, please!

Google docs template

<<If: ISNOTBLANK([6.1 Visão panorâmica.])>>

page content

<<EndIf>>

HTML template

page content

TeeSee1

Not sure but the error message sounds like there is a '<' someplace not converted to '< '.

neemias

@TeeSee1 Yes, but there isn't a '>' character not converted...

neemias

Follow the code...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Relatório Fotográfico</title>
<style>
.logo {
width: 160px;
height: 90px;
}
.image {
width: 700px;
height: 400px;
}
hr {
width: 90%;
align: center;
}
body {
width: 210mm;
height: 297mm;
margin-top: 25px;
margin-bottom: 25px;
margin-right: 25px;
margin-left: 25px;
}
td {
width: 20%;
}
</style>
</head>
<body>
<p><<If:ISNOTBLANK([1])>></p>

<table style="width:90%" align="center">
<tr>
<td rowspan="3"><img src="https://drive.google.com/file/d/1D41B96YmUfoBpcZB0j2qiaWfNKNOt5tM/view?usp=sharing" class="logo"></td>
<td align="center">Empresa:</td>
<td align="center">Periseg</td>
<td align="center">Regulador:</td>
<td align="center"><<[Perito]>></td>
</tr>
<tr>
<td align="center">Email:</td>
<td align="center">neemias@periseg.com.br</td>
<td align="center">Fone:</td>
<td align="center">(51) 980259832</td>
</tr>
<tr>
<td align="center">Segurado:</td>
<td align="center"><<[Nome do segurado]>></td>
<td align="center">Sinistro:</td>
<td align="center"><<[Número do sinistro]>></td>
</tr>
</table>
<hr>
<h3 align="center">Item</h3>
<table style="width:100%">
<tr>
<td align="center"><img src="<<[1]>>" class="image"></td>
</tr>
<tr>
<td align="left">   <<[1001]>></td>
</tr>
<tr>
<td align="center"><img src="<<[2]>>" class="image"></td>
</tr>
<tr>
<td align="left">   <<[1002]>></td>
</tr>
</table>
<hr>
<footer>
<p align="center">Emitido em <<_TODAY>></p>
</footer>
<p><<EndIf>></p>

<p><<If:ISNOTBLANK([3])>></p>
<table style="width:90%" align="center">
<tr>
<td rowspan="3"><img src="https://drive.google.com/file/d/1D41B96YmUfoBpcZB0j2qiaWfNKNOt5tM/view?usp=sharing" class="logo"></td>
<td align="center">Empresa:</td>
<td align="center">Periseg</td>
<td align="center">Regulador:</td>
<td align="center"><<[Perito]>></td>
</tr>
<tr>
<td align="center">Email:</td>
<td align="center">neemias@periseg.com.br</td>
<td align="center">Fone:</td>
<td align="center">(51) 980259832</td>
</tr>
<tr>
<td align="center">Segurado:</td>
<td align="center"><<[Nome do segurado]>></td>
<td align="center">Sinistro:</td>
<td align="center"><<[Número do sinistro]>></td>
</tr>
</table>
<hr>
<h3 align="center">Item</h3>
<table style="width:100%">
<tr>
<td align="center"><img src="<<[3]>>" class="image"></td>
</tr>
<tr>
<td align="left">   <<[1003]>></td>
</tr>
<tr>
<td align="center"><img src="<<[4]>>" class="image"></td>
</tr>
<tr>
<td align="left">   <<[1004]>></td>
</tr>
</table>
<hr>
<footer>
<p align="center">Emitido em <<_TODAY>></p>
</footer>
<p><<EndIf>></p>
</body>
</html>

SkrOYC

Apart from the non-public URLs you are using on your IMG tags, I don't see the problem at first glance.

Are you using a .html file as the template or you pasted the code inside the editor? Because is almost impossible for us to know exactly where the error is if you send us the code on a different format.

Here is the code for anyone to check in case the previous comment is a little bit messy:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Relatório Fotográfico</title>
    <style>
      .logo {
        width: 160px;
        height: 90px;
      }
      .image {
        width: 700px;
        height: 400px;
      }
      hr {
        width: 90%;
        align: center;
      }
      body {
        width: 210mm;
        height: 297mm;
        margin-top: 25px;
        margin-bottom: 25px;
        margin-right: 25px;
        margin-left: 25px;
      }
      td {
        width: 20%;
      }
    </style>
  </head>
  <body>
    <p>&lt;&lt;If:ISNOTBLANK([1])&gt;&gt;</p>

    <table style="width: 90%" align="center">
      <tr>
        <td rowspan="3">
          <img
            src="https://drive.google.com/file/d/1D41B96YmUfoBpcZB0j2qiaWfNKNOt5tM/view?usp=sharing"
            class="logo"
          />
        </td>
        <td align="center">Empresa:</td>
        <td align="center">Periseg</td>
        <td align="center">Regulador:</td>
        <td align="center">&lt;&lt;[Perito]&gt;&gt;</td>
      </tr>
      <tr>
        <td align="center">Email:</td>
        <td align="center">neemias@periseg.com.br</td>
        <td align="center">Fone:</td>
        <td align="center">(51) 980259832</td>
      </tr>
      <tr>
        <td align="center">Segurado:</td>
        <td align="center">&lt;&lt;[Nome do segurado]&gt;&gt;</td>
        <td align="center">Sinistro:</td>
        <td align="center">&lt;&lt;[Número do sinistro]&gt;&gt;</td>
      </tr>
    </table>
    <hr />
    <h3 align="center">Item</h3>
    <table style="width: 100%">
      <tr>
        <td align="center"><img src="&lt;&lt;[1]&gt;&gt;" class="image" /></td>
      </tr>
      <tr>
        <td align="left">&nbsp;&nbsp;&nbsp;&lt;&lt;[1001]&gt;&gt;</td>
      </tr>
      <tr>
        <td align="center"><img src="&lt;&lt;[2]&gt;&gt;" class="image" /></td>
      </tr>
      <tr>
        <td align="left">&nbsp;&nbsp;&nbsp;&lt;&lt;[1002]&gt;&gt;</td>
      </tr>
    </table>
    <hr />
    <footer>
      <p align="center">Emitido em &lt;&lt;_TODAY&gt;&gt;</p>
    </footer>
    <p>&lt;&lt;EndIf&gt;&gt;</p>
    <!--COMENTÁRIO-->
    <p>&lt;&lt;If:ISNOTBLANK([3])&gt;&gt;</p>
    <table style="width: 90%" align="center">
      <tr>
        <td rowspan="3">
          <img
            src="https://drive.google.com/file/d/1D41B96YmUfoBpcZB0j2qiaWfNKNOt5tM/view?usp=sharing"
            class="logo"
          />
        </td>
        <td align="center">Empresa:</td>
        <td align="center">Periseg</td>
        <td align="center">Regulador:</td>
        <td align="center">&lt;&lt;[Perito]&gt;&gt;</td>
      </tr>
      <tr>
        <td align="center">Email:</td>
        <td align="center">neemias@periseg.com.br</td>
        <td align="center">Fone:</td>
        <td align="center">(51) 980259832</td>
      </tr>
      <tr>
        <td align="center">Segurado:</td>
        <td align="center">&lt;&lt;[Nome do segurado]&gt;&gt;</td>
        <td align="center">Sinistro:</td>
        <td align="center">&lt;&lt;[Número do sinistro]&gt;&gt;</td>
      </tr>
    </table>
    <hr />
    <h3 align="center">Item</h3>
    <table style="width: 100%">
      <tr>
        <td align="center"><img src="&lt;&lt;[3]&gt;&gt;" class="image" /></td>
      </tr>
      <tr>
        <td align="left">&nbsp;&nbsp;&nbsp;&lt;&lt;[1003]&gt;&gt;</td>
      </tr>
      <tr>
        <td align="center"><img src="&lt;&lt;[4]&gt;&gt;" class="image" /></td>
      </tr>
      <tr>
        <td align="left">&nbsp;&nbsp;&nbsp;&lt;&lt;[1004]&gt;&gt;</td>
      </tr>
    </table>
    <hr />
    <footer>
      <p align="center">Emitido em &lt;&lt;_TODAY&gt;&gt;</p>
    </footer>
    <p>&lt;&lt;EndIf&gt;&gt;</p>
  </body>
</html>

neemias

Hi, @SkrOYC. the problem persists... when i run the task, the message "Error 1 : '<', hexadecimal value 0x3C, is an invalid attribute character. Line 1, position 1109." is showed, but there isn't a '>' character not converted, as i said... Error occurs when i use...

    <p>&lt;&lt;If:ISNOTBLANK([1])&gt;&gt;</p>

    <p>&lt;&lt;EndIf&gt;&gt;</p>

SkrOYC

There ain't no "Line 1, position 1109" for us.

Place the code inside an actual .html and use that as the template, then see the line and position where the error actually is

neemias

@SkrOYCim using a .html template... the error follow without a resolution... The same message is showed.

SkrOYC

Exactly the same? There should be a new line and position.

Please share both the new line and a zip file with the .html inside

neemias

@SkrOYC Follow the .html file and thx for your help!

.html template in use currently and message post test bellow.

Run task "Task1_reportappsheet"

Error 1 : '<', hexadecimal value 0x3C, is an invalid attribute character. Line 1, position 1109.

neemias

Hi, @SkrOYC. Did you test the last code that i post here (no significant changes)? Some idea of the what is causing the error?

SkrOYC

I couldn't troubleshoot because either AppSheet is throwing an unaccurate error or you are not using exactly the same file you show here.

Maybe @Phil can help

neemias

Sorry, here is the link to file in use by appsheet, the same that generate the error. file.html in use by appsheet

SkrOYC

I can't tell the problem but can you try removing your links from the img tags?

neemias

I need use links into img tags to apply the css settings to images... basically, i'm resizing the images as bellow. It's the main objective of the .html template to me.

.image {
width: 700px;
height: 400px;
}

neemias

I will try remove the links, but what cause this error is...

html code...

If i remove that conditional, the template works. The problem is that i need generate a .pdf file containing only pages related to populated columns, according to conditional test.

neemias

Hello, @SkrOYC!

I did test the code without <img> tag and it works! Whats is the problem?! I intend use <img? tag with css code to resize the images like showed bellow. What is does not work? Is there any thing to do to use this tag in the template? Any idea to resize images to 700px by 400 px?

.image {
width: 700px;
height: 400px;
}

<img src="<<[1]>>" class="image">

SkrOYC

I'm sorry, I forgot about this post!

Try encoding your URL inside the IMG tag.
Also, the img size is modified directly using the width and height properties of the img tag, not by CSs

mateo

Hi @neemias,
Did you resolve this issue? I encountered a similar problem and could not find a way to get around it. I hope you finally found the solution.
Cheers

SkrOYC

I solved this kind of issues using a JS that replaces all "&" with just "&" since AppSheet URLs for images/files has parameters in it and, for some reason, it shows up as HTML Entities

<script>
  var r = document.querySelector(":root");
  function getVarValue() {
    var root_all = getComputedStyle(root);
  }
  document.addEventListener("DOMContentLoaded", function setVarValue() {
    var LogoURL = "&lt;&lt;THE_EXPRESSION_FOR_THE_LOGO&gt;&gt;";
    var newUrl =
      'url("' +
      LogoURL.replace(/amp;/g, "") +
      '")';
    r.style.setProperty("--logo", newUrl);
  });
</script>

Instead of calling the URL directly into the <IMG> tag, I'm using a variavle inside the :root so that I can change it once for all <IMG>. I suggest the same idea

mateo

I have been thinking of JS as well but thought that maybe it is not necessary. Your suggestion seems to be the appropriate solution. Some kind of global setting. Nice! Thanks for that 🙂

neemias

@SkrOYC., good afternoon

It's an interesting way to solve the problem. Thanks!

Yours sincerely,

HTML Template - Expression IF/ENDIF vs Google template