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

AppSheet AppSheet Q&A
,
1

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

Carteira de Credencial de Membro 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;
}

Foto

CERTIDÃO ELETRÔNICA
Nombre: **< span><>**
E-mail: <>< /span>
ID: <>
Membro desde: <>
Código QR
2

I’ve studied this:

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

3

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.

4

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

Also, try using the codeblock feature on this forum:

SkrOYC_0-1688614642518.png
SkrOYC_0-1688614642518.png672×159 9.8 KB

5

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ó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>
6

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.

texteditor.co.png
texteditor.co.png1872×967 109 KB

ERROR TASK.png
ERROR TASK.png1712×601 60.3 KB

7

Change all << with <<

with >>

8

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…

1 Like
9

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

1 Like
10

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?

URL FOTOGRAFIA.png
URL FOTOGRAFIA.png1712×770 74.9 KB

11

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="<<[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ó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>
12

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

TEST TASK.png
TEST TASK.png1836×487 42.1 KB

Email preview.png
Email preview.png1888×776 64.3 KB

13

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

1 Like
14

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

ADD PHOTO.png
ADD PHOTO.png1815×696 87.4 KB

15

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])

16

?

17

?? HELP my friend

18

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!

19

??

20

Nobody has a solution for this?