Solved: Re: It seems to me that Appsheet has no solution f...

ADEFE_EUROPA · 07-14-2023 04:02 AM

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

<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;
    }
  </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>

See all the details here....

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Error-1-lt-hexadecimal-value-0x3C-is-an-invalid...

SkrOYC

Did you make the format rule for the image columns so that those get returned as Text instead of images?

View solution in original post

WillowMobileSys

Can you describe what you are attempting to do? To my knowledge, HTML Styling is not widely supported within AppSheet - if at all. There is some Rich text formatting that can be applied as a preview feature but my understanding is its limited as far as styling is concerned. However, I am not well versed in this area and there I am surprised by some of the things that are indeed supported...such as SVG images.

ADEFE_EUROPA

Nobody has a solution for this?

WillowMobileSys

You didn't respond so I assume this is a template you are using in an email? Have you created a template in this manner before? Or is this your first time?

I ask because because you have column names embedded in the HTML, which means there needs to be preprocessing of the template string to properly insert the variable data. It is my understanding that this involves using a concatenation function to build up the template HTML string.

For example, this...

...src="&lt;&lt;[URL Fotografia Perfil]&gt;&gt;" alt="Foto" ...

would need to be represented like this...

CONCATENATE(
            "...src='",
            <<[URL Fotografia Perfil]>>,
            "' alt='Foto'..."
)

NOTE: Double quotes in the HTML text are replaced with a single quote. Double quotes are used to identify HTML text string bits that are being concatenated with the column variables.

NOTE 2: Depending on what you have included in the current HTML double quoted strings, some characters may need to escaped.

I hope this helps!

ADEFE_EUROPA

Hello dear @WillowMobileSys this is my first time trying to use the html format to generate an Identity Credential for our NGO employees.
I didn't create it in Google Docs because of the limitation of this option in creating tamplates with images.

The code is functional. But I'm seeing some errors that don't explain much of what's really going on! For example:

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

And when we look at what's on line 76, it's just a curly brace: }

At first I saw the very rare use of the Concatenate function. But I decided to test it, because yes, I have column names embedded in the html code and they are not working.

I'll be back here to say if it worked with Concatenate!

Anyway, thank you very much for your precious time dedicated to our cause.

ADEFE_EUROPA

Dear @WillowMobileSys wrote following your Concatenate instruction

CONCATENATE("<img class='photo' src='",<<[URL Fotografia Perfil]>>, "alt='Photo' />"

...and I also got an error!

Kabuliño

and did you close the parenthesis of the Concatenate()?

ADEFE_EUROPA

Hello dear @Kabuliño thank you very much for your help, I corrected the parentheses. But the error persists!!

See the error and the line it shows: (Precisely the concatenate line)

    CONCATENATE("<img class='photo' src='",<<[URL Fotografia Perfil]>>, "alt='Photo' />")

Erro:

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 79, position 44.
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 79, position 44.

Kabuliño

Do you have an image type column that you convert to a URL so you can use it in your HTML?
or is it a photo to which you applied the format rule?
What type of data does your column [URL Profile Photography] contain?
maybe you would be interested in reading
https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Images-in-HTML-Template/td-p/544948

ADEFE_EUROPA

Yes, thanks.
It really is a URL column! It is already in the table in URL format

I will read Thanks! I'll be back soon to share what I've learned

WillowMobileSys

So now that we know you are attempting to create this HTML in a table column as an URL, let's back up.

This won't work. AppSheet expects the resulting text in the column to be treated like an URL. HTML is not a URL.

As far as I know, the way AppSheet supports any full HTML is in templates only - to be used for email (and document) generation. Templates are presented in two ways:

A property within an email automation step - i.e. a text box to type in the template code.
A document that can be retrieved by the automation.

It is possible to build your HTML string in a column as TEXT and then use that as the template in the automation - i.e. [HTML Template]. This is what I thought you were trying to do. To do so, EVERYTHING must be built out as a TEXT string that results in the desired HTML. Meaning you need a CONCATENATE() as the very first thing and then ALL the HTML code is wrapped in double-quotes and include in the CONCATENATE() to build the string.

Instead, it would be far easier to create a template. In a template AppSheet will handle the preprocessing for you and you don't have to worry about converting all of your quotes in the HTML.

See this article for some additional details:

Use HTML templates

I hope this helps better!!!

ADEFE_EUROPA

Hello friend, I did as you suggest. At least I think so. I used Concatenate for the columns that refer to images like URLs.
This was the result. ERROR.

WillowMobileSys

@ADEFE_EUROPA wrote:

Hello friend, I did as you suggest. At least I think so. I used Concatenate for the columns that refer to images like URLs.

You mis-understood. Please re-read my previous post. The CONCATENATE() cannot be inserted into the middle of the HTML like that. It MUST be the OUTSIDE of the HTML. You MUST build up the HTML string, breaking the html apart at the locations where you need to inject a variable value. Something like this:

CONCATENATE("<html>....other html code...<img class='photo' src='",
            [URL Fotografia Peril],
            "' alt='Foto' /> ....other html code...<span>",
            [Nome Completo],
            "</span> ...all the other html code and variables..."
)

The red text are your column variables.

HOWEVER, I also mentioned that this would be FAR FAR easier if you were to use an HTML template document as I described in the link I provided above.

ADEFE_EUROPA

ERROR:

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

WillowMobileSys

You need to remove the "<" and the ">" occurrences.

ADEFE_EUROPA

Thanks again friend for helping our humanitarian organization. But then I ask: Should I replace it with <<[y]>> ?

WillowMobileSys

No...at least I don't think so based on what details you have supplied in previous comments.

You had mentioned that you are using an URL column. In this case you do not use "<<" or ">>" at all. These are only used in templates to signal that AppSheet pre-processing is needed - e.g. replaces a column indicator with the actual value.

What I am confused about is that the latest error message is implying a template is being applied and has an issue. So, are you using the URL column in a template field somewhere? it is important to know how/where you are using the HTML code to best help you.

WillowMobileSys

@ADEFE_EUROPA wrote:

Template could not be loaded due to exception

This implies you are using a template. Are you? You had implied before that you are not using a template. If you are then the whole CONCATENATE may not have been needed.

ADEFE_EUROPA

sorry. I'm still getting used to the terms terms. But I'm really using a template and editing it my way. But I can try it your way! I ask then, where should I apply this Concatenate expression?

SkrOYC

@WillowMobileSys wrote:

To my knowledge, HTML Styling is not widely supported within AppSheet - if at all.

Slow down buddy 😁

SkrOYC

As I mentioned before, your issue is with the way you are trying to get those images.

You have full URLs that point to images outside AppSheet in your columns and those won't work as expected because AppSheet has issues with HTML entities inside HTML or CSS properties.

The way I fix these is by using Javascript and even then I cannot guarantee that your specific use case (taking images from outside AppSheet) is compatible with that solution

ADEFE_EUROPA

We really need to be able to send this credential to all our employees. help us please

SkrOYC

I come here on a best-effort basis and already offered you my best comment

ADEFE_EUROPA

Really thank you for your attention friend!

ADEFE_EUROPA

Friends, I have columns of Photos [URL Photo Profile] and [Qr-Code] containing external URLs.
This worksheet contains data on employees of our NGO.

The other data that make up this credential are columns of data:

[Full name]
[Email]
[ID Code]
[Submission Date]

I want the Appsheet to be able to deliver an Identification Credential to one of the contributors in HTML format.

Could someone help me with some way to make this possible please?
Our NGO really needs this!

Thanks!

SkrOYC

Did you make the format rule for the image columns so that those get returned as Text instead of images?

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!

It seems to me that Appsheet has no solution for this?