Re: Error 1 : '<', hexadecimal value 0x3C, is an i...

ADEFE_EUROPA · 07-03-2023 07:53 PM

Estimados colaboradores de esta comunidad
¡Saludos cordiales!

He leído mucha documentación y algunos problemas informados aquí.

Y estoy enfrentando los mismos problemas con las hojas de cálculo HTML.

Tiempo usando las variables <<[XXXX]>>
Tiempo usando <<[xxxxxxxx]>>

Independientemente de las dos opciones, la hoja de aplicaciones me informa de errores.

Por favor, dígame dónde está el error en este código, que corrige este problema acusado por la Appsheet.

********* ERROR
Error 1: '<', valor hexadecimal 0x3C, es un carácter de atributo no válido. Línea 77, posición 421.
Error 2: '<', valor hexadecimal 0x3C, es un carácter de atributo no válido. Línea 77, puesto 421

________CÓDIGO HTML

<html>
<head>
<title>Carteira de Credencial de Membro</title>
<style>
body {
font-family: Arial, sans-serif;
color de fondo: #f2f2f2;
margen: 0;
relleno: 20px;
}

.card {
imagen-de-fondo: url(" https://www.XXXXXXX.com/wp-content/uploads/2023/06/XXXX-XXXX-DE-XXXXX-XXXX.png ");
tamaño de fondo: portada;
color: #000000;
borde-radio: 5px;
sombra de caja: 0 2px 4px rgba(0, 0, 0, 0.1);
ancho: 53,98 mm;
altura: 85,60 mm;
relleno: 20px;
margen: 0 automático;
pantalla: flexible;
dirección de flexión: columna;
alinear elementos: centro;
}

.logo-contenedor {
pantalla: flexible;
alinear elementos: centro;
margen inferior: 15px;
color: #ffffff;
}

.logo {
ancho: 30px;
altura: 30px;
margen derecho: 0px;
margen superior: -15px;
}

.org-name {
font-weight: negrita;
tamaño de fuente: 10px;
margen superior: -15px;
alineación de texto: centro;
margen derecho: 15px;
}

.título {
tamaño de fuente: 10px;
margen superior: -10px;
alineación de texto: centro;
color: #ffffff;
margen derecho: 0px;
}

.foto {
ancho: 150px;
altura: 155px;
borde-radio: 50%;
margen derecho: -5px;
margen superior: 2px;
}

.member-info {
margen superior: 7px;
tamaño de fuente: 11px;
alineación de texto: centro;
}

.member-info label {
font-weight: bold;
}

.qr-código {
ancho: 50px;
altura: 50px;
margen superior: -1px;
}
</style>
</head>
<body>
<div class="card">
<div class="logo-container">
<img class="logo" src=" https://www.XXXXXX.com/ wp-content/uploads/2017/12/cropped-XXXXX-XXXX-XXXXX-2-1.

<img class="foto" src="<<[URL Fotografia Perfil]>>" alt="Foto" />
<div class="info-miembro">
<label>CERTIDÃO ELETRÔNICA</label>
</div>
<div class="info-miembro">
<label>Nombre:</label>
< span><<[Nombre Completo]>></span>
</div>
<div class="member-info">
<label>E-mail:</label>
<span><<[Email]>>< /span>
</div>
<div class="member-info">
<label>ID:
</label> <span><<[ID Código]>></span>
</div>
<div class="member-info">
<label>Membro desde:</label>
<span><<Date( [Fecha de envío])>></span>
</div>
<img class="qr-code" src="<<[QR-Code]>>" alt="Código QR" />
</div>
</cuerpo>
</html>

ADEFE_EUROPA

I've studied this:

https://support.google.com/appsheet/answer/10107421?hl=en

ADEFE_EUROPA

Another error, when using the spreadsheet (https://texteditor.co/)

Error 1: Task 'SEND ELECTRONIC CERTIFICATE' Attachment model. Template could not be loaded due to exception: name cannot start with character '<', hexadecimal value 0x3C. Line 95, position 14.

Error 2: Task body template 'SEND ELECTRONIC CERTIFICATE'. Template could not be loaded due to exception: name cannot start with character '<', hexadecimal value 0x3C. Line 95, position 14.

SkrOYC

Please post the real HTML code. Some of it was translated for some reason.

Also, try using the codeblock feature on this forum:

ADEFE_EUROPA

Dear @SkrOYC, thank you very much for giving me precious minutes of your attention. Our ONG really needs this service!

Follow the htm code as requested.

<html>
<head>
  <title>Carteira de Credencial de Membro</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 20px;
    }
    
    .card {
      background-image: url("https://www.adefeeuropa.com/wp-content/uploads/2023/06/MODELO-CARTEIRA-DE-MEMBRO-ADEFE.png");
      background-size: cover;
      color: #000000;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      width: 53.98mm;
      height: 85.60mm;
      padding: 20px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .logo-container {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      color: #ffffff;
    }
    
    .logo {
      width: 30px;
      height: 30px;
      margin-right: 0px;
      margin-top: -15px;
    }
    
    .org-name {
      font-weight: bold;
      font-size: 10px;
      margin-top: -15px;
      text-align: center;
      margin-right: 15px;
    }
    
    .title {
      font-size: 10px;
      margin-top: -10px;
      text-align: center;
      color: #ffffff;
      margin-right: 0px;
    }
    
    .photo {
      width: 150px;
      height: 155px;
      border-radius: 50%;
      margin-right: -5px;
      margin-top: 2px;
    }
    
    .member-info {
      margin-top: 7px;
      font-size: 11px;
      text-align: center;
    }
    
    .member-info label {
      font-weight: bold;
    }
    
    .qr-code {
      width: 50px;
      height: 50px;
      margin-top: -1px;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="logo-container">
      <img class="logo" src="https://www.adefeeuropa.com/wp-content/uploads/2017/12/cropped-Logo-ÍCONE-512-2-1.png" alt="Logo" />
     <div class="org-name">Assembleia de Deus<br/>Fogo para Europa</div>
    </div>
    <div class="title">Portugal - Europa | NIPC 592010082</div>
    <img class="photo" src="<<[URL Fotografia Perfil]>>" alt="Foto" />

    <div class="member-info">
      <label>CERTIDÃO ELETRÔNICA</label>
    </div>
    <div class="member-info">
      <label>Nome:</label>
      <span><<[Nome Completo]>></span>
    </div>
    <div class="member-info">
      <label>E-mail:</label>
      <span><<[Email]>></span>
    </div>
    <div class="member-info">
      <label>ID:</label>
      <span><<[ID C&#243;d]>></span>
    </div>
    <div class="member-info">
      <label>Membro desde:</label>
      <span><<Date([Submission Date])>></span>
    </div>
    <img class="qr-code" src=”<<[QR-Code]>>” alt="QR Code" />
  </div>
</body>
</html>

SkrOYC

Change all << with <<
>> with >>

ADEFE_EUROPA

Hello my dear friend, thank you. But I already did that and it gave error too. But I'll redo it and show you here. See you later...

ADEFE_EUROPA

Estoy usando el editor https://texteditor.co/

Ver la foto y el error que está generando cuando lo pruebo en la aplicación.

Error 1 : Task 'ENVIAR CERTIDÃO ELETRÔNICA' Attachment template. Template could not be loaded due to exception: '<', hexadecimal value 0x3C, is an invalid attribute character. Line 89, position 29.
Error 2 : Task 'ENVIAR CERTIDÃO ELETRÔNICA' Body template. Template could not be loaded due to exception: '<', hexadecimal value 0x3C, is an invalid attribute character. Line 89, position 29.

SkrOYC

Check the column type of [URL Fotografia Perfil] as well as make sure you made a Format Rule for it

ADEFE_EUROPA

Dear friend, I did not understand very well. But I wanted to ask if in my case, would I have to change the format of my column to text?

Currently my column is URL type, would I then need to change the type to text and convert the data in my table to text?

ADEFE_EUROPA

Dear friend @SkrOYC
I believe I have done everything correctly now. I created a Rule Format (TEXT) for the two columns [URL Photo Profile] and [QR-Code]. And I made the necessary changes to all << with << >> with >>

Check now, please, if this current error has any coherence?

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

Code redone below:

<html>
<head>
  <title>Carteira de Credencial de Membro</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 20px;
    }
    
    .card {
      background-image: url("https://www.adefeeuropa.com/wp-content/uploads/2023/06/MODELO-CARTEIRA-DE-MEMBRO-ADEFE.png");
      background-size: cover;
      color: #000000;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      width: 53.98mm;
      height: 85.60mm;
      padding: 20px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .logo-container {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      color: #ffffff;
    }
    
    .logo {
      width: 30px;
      height: 30px;
      margin-right: 0px;
      margin-top: -15px;
    }
    
    .org-name {
      font-weight: bold;
      font-size: 10px;
      margin-top: -15px;
      text-align: center;
      margin-right: 15px;
    }
    
    .title {
      font-size: 10px;
      margin-top: -10px;
      text-align: center;
      color: #ffffff;
      margin-right: 0px;
    }
    
    .photo {
      width: 150px;
      height: 155px;
      border-radius: 50%;
      margin-right: -5px;
      margin-top: 2px;
    }
    
    .member-info {
      margin-top: 7px;
      font-size: 11px;
      text-align: center;
    }
    
    .member-info label {
      font-weight: bold;
    }
    
    .qr-code {
      width: 50px;
      height: 50px;
      margin-top: -1px;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="logo-container">
      <img class="logo" src="https://www.adefeeuropa.com/wp-content/uploads/2017/12/cropped-Logo-ÍCONE-512-2-1.png" alt="Logo" />
     <div class="org-name">Assembleia de Deus<br/>Fogo para Europa</div>
    </div>
    <div class="title">Portugal - Europa | NIPC 592010082</div>
    <img class="photo" src="&lt;&lt;[URL Fotografia Perfil]&gt;&gt;" alt="Foto" />

    <div class="member-info">
      <label>CERTIDÃO ELETRÔNICA</label>
    </div>
    <div class="member-info">
      <label>Nome:</label>
      <span>&lt;&lt;[Nome Completo]&gt;&gt;</span>
    </div>
    <div class="member-info">
      <label>E-mail:</label>
      <span>&lt;&lt;[Email]&gt;&gt;</span>
    </div>
    <div class="member-info">
      <label>ID:</label>
      <span>&lt;&lt;[ID C&#243;d]&gt;&gt;</span>
    </div>
    <div class="member-info">
      <label>Membro desde:</label>
      <span>&lt;&lt;Date([Submission Date])&gt;&gt;</span>
    </div>
    <img class="qr-code" src="&lt;&lt;[QR-Code]&gt;&gt;" alt="QR Code" />
  </div>
</body>
</html>

ADEFE_EUROPA

The TEST TASK gave an error;
The Email preview shows the image, but the data is not being brought in as expected!

SkrOYC

@ADEFE_EUROPA wrote:

Currently my column is URL type, would I then need to change the type to text and convert the data in my table to text?

Where do you take your Image from? Since it's URL, I expect to come from another source rather than an image uploaded through the app.

As a second check, your URLs may have & in them and in that case you could use some Javascript to fix it

ADEFE_EUROPA

?? HELP my friend

ADEFE_EUROPA

Dear @SkrOYC good morning!

I've actually already tried all the instructions you gave me, I took care to study your tutorial, by the way, very rich, I read all the Appsheet content that talks about it, but I have no success in this template.

Could your experience help me with this? I earnestly ask!

Thank you very much!

ADEFE_EUROPA

??

ADEFE_EUROPA

Thank you very much dear @SkrOYC

In fact, your logic was right, but not as a format rule. I had to create a text type column containing the image data. That's the only way it worked! But I couldn't have done it without your logic!
I owe you my admiration and prayers that you may be victorious in everything!
Thank you so much!

ADEFE_EUROPA

The photograph is manually added via the Appsheet form. But I also have an external data source coming from Jotform.
With that I have a virtual column to check where the image comes from. If you are from outside, write me directly the url. And if it comes straight from the Appsheet, do a boot to EDIT any data and then, write the URL of the image that is in the google driver

ADEFE_EUROPA

As for the Qr-Code Column, I have the following expression that concatenates the Google Url that generates the Qr code, with the [ID Code] column.

CONCATENATE("https://chart.googleapis.com/chart?chs=180x180&cht=qr&chl=",[ID Code])

ADEFE_EUROPA

?

ADEFE_EUROPA

Nobody has a solution for this?

SkrOYC

I was on vacation last month, so I didn't have time for this.
I strongly suggest you to not use URLs and use relative paths instead when trying to get images or docs

ADEFE_EUROPA

Thank you, but some images arrive in my table from external "Jotform" forms.
And in this case, some are in url format, such as the other column of the Qr-cod that I am using a formula to generate the url https://chart.googleapis.com/chart?chs=180x180&cht=qr&chl=[Cod ID ].
I do not know what to do!!
I was suggested in another post to use Concatenate to solve it.
But I still couldn't do it

Can you help me with that?

SkrOYC

When dealing with & inside HTML templates you have to use Javascript to solve that issue.

ADEFE_EUROPA

Error 1 : 'Process for CERTIDÃO ELETRÔNICA DE MEMBROS' task 'Task for ENVIAR CERTIDÃO ELETRÔNICA' Attachment template. Template could not be loaded due to exception: Data at the root level is invalid. Line 1, position 1.
Error 2 : 'Process for CERTIDÃO ELETRÔNICA DE MEMBROS' task 'Task for ENVIAR CERTIDÃO ELETRÔNICA' Body template. Template could not be loaded due to exception: Data at the root level is invalid. Line 1, position 1.

CONCATENATE(
  "<!DOCTYPE html>",
  "<html>",
  "<head>",
  "<meta content='text/html; charset=UTF-8' http-equiv='content-type' />",
  "<title>Carteira de Credencial de Membro</title>",
  "<style type='text/css'>",
  "body {",
  "font-family: Arial, sans-serif;",
  "background-color: #f2f2f2;",
  "margin: 0;",
  "padding: 20px",
  "}",
  ".card {",
  "background-image: url('https://www.adefeeuropa.com/wp-content/uploads/2023/06/MODELO-CARTEIRA-DE-MEMBRO-ADEFE.png');",
  "background-size: cover;",
  "color: #000000;",
  "border-radius: 5px;",
  "box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);",
  "width: 53.98mm;",
  "height: 85.60mm;",
  "padding: 20px;",
  "margin: 0 auto;",
  "display: flex;",
  "flex-direction: column;",
  "align-items: center",
  "}",
  ".logo-container {",
  "display: flex;",
  "align-items: center;",
  "margin-bottom: 15px;",
  "color: #ffffff",
  "}",
  ".logo {",
  "width: 30px;",
  "height: 30px;",
  "margin-right: 0px;",
  "margin-top: -15px",
  "}",
  ".org-name {",
  "font-weight: bold;",
  "font-size: 10pt;",
  "margin-top: -15px;",
  "text-align: center;",
  "margin-right: 15px",
  "}",
  ".title {",
  "font-size: 9pt;",
  "margin-top: -10px;",
  "text-align: center;",
  "color: #ffffff;",
  "margin-right: 0px",
  "}",
  ".photo {",
  "width: 150px;",
  "height: 155px;",
  "border-radius: 50%;",
  "margin-right: -5px;",
  "margin-top: 2px",
  "}",
  ".member-info {",
  "margin-top: 7px;",
  "font-size: 9pt;",
  "text-align: center",
  "}",
  ".member-info label {",
  "font-weight: bold;",
  "}",
  ".qr-code {",
  "width: 50px;",
  "height: 50px",
  "}",
  "</style>",
  "</head>",
  "<body>",
  "<div class='card'>",
  "<div class='logo-container'>",
  "<img class='logo' src='https://www.adefeeuropa.com/wp-content/uploads/2017/12/cropped-Logo-ÍCONE-512-2-1.png' alt='Logo' />",
  "<div class='org-name'>Assembleia de Deus<br/>Fogo para Europa</div>",
  "</div>",
  "<div class='title'>Portugal - Europa | NIPC 592010082</div>",
  "<img class='photo' src='", &lt;&lt;[URL Fotografia Perfil]&gt;&g;,  "' alt='Photo' />",
  "<div class='member-info'>",
  "<label>CERTIDÃO ELETRÔNICA</label>",
  "</div>",
  "<div class='member-info'>",
  "<label>Nome:</label>",
  "<span>", &lt;&lt;[Nome Completo]&gt;&gt;, "</span>",
  "</div>",
  "<div class='member-info'>",
  "<label>E-mail:</label>",
  "<span>", &lt;&lt;[Email]&gt;&gt;, "</span>",
  "</div>",
  "<div class='member-info'>",
  "<label>ID:</label>",
  "<span>", &lt;&lt;[ID C&#243;d]&gt;&gt;, "</span>",
  "</div>",
  "<div class='member-info'>",
  "<label>Membro desde:</label>",
  "<span> ", &lt;&lt;Date([Submission Date])&gt;&gt;,"</span>",
  "</div>",
  "<img class='qr-code' src='", &lt;&lt;[QR-Code]&gt;&gt;,  "' alt='Qr-Code' />",
  "</div>",
  "</body>",
  "</html>"
)

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