Solved: Having a check mark added to the pdf when I select...

CS2

I have been able to do this with an If/ end if statement in the template and an image of the checkmark. What I would like to know if there is a better way. It is so cumbersomer to do this in a template and formatting it without testing each section. I have attached an example of one I am working on converting to appsheet. Currently it is paper copy filled in. Site Inspection checklist .

Suvrutt_Gurjar

Could you post a screenshot of the checklist? community members may not open the links at times. Even I did not open it.

Anyway, based on your description, you could also try to use the symbols available in Word and Google docs

Search in word as follows under Symbol option

Google docs, you will have those under "Insert/Special Characters" option.

You could simply copy paste those into an enum field as follows

In the form, the enum button will look like follows

In the detail view the selection will look like below

In the PDF report it will look like below. The example below show "N" selection.

Yet another option is to use emoji's For example in Google Docs, you will get it as follows

in form it will look like below

In detail view, after selection, it will look like below

Finally in the PDF report , it will look like below

View solution in original post

TeeSee1

Using an HTML template can simplify the code a little bit.

I asked GEMINI and got this reply, applied it and it seems to work well.

1. Using CSS content property with generated content (requires a way to represent the true/false state):

If you can represent the true/false state using a CSS-targetable mechanism (like a data attribute or a specific class), you can use the content property with pseudo-elements (::before or ::after) to insert images.

HTML

<div class="status" data-value="true"></div>
<div class="status" data-value="false"></div>

<style>
.status::before {
  content: ''; /* Required for pseudo-elements */
  display: inline-block; /* To control width and height */
  width: 20px;
  height: 20px;
  background-size: cover;
}

.status[data-value="true"]::before {
  background-image: url('true-icon.png');
}

.status[data-value="false"]::before {
  background-image: url('false-icon.png');
}

/* Optionally hide the original text if it exists */
.status {
  font-size: 0; /* Or use other techniques to hide text */
}
</style>
In this example:

We use a data-value attribute to store the "true" or "false" state.
The ::before pseudo-element is used to insert the image.
Attribute selectors ([data-value="true"], [data-value="false"]) target elements with specific data attribute values.
The content: '' is necessary for the pseudo-element to be generated.
background-image is used to set the image.
We might need to hide the original text content of the div if it's present.

This is the template I tested.

Fields YN1 and YN2 are of interest to you.

<p class="status" data-value="<<[YN1]>>"></p>

<html>
  <head>
    <style>
        .status::before {
          content: ''; /* Required for pseudo-elements */
          display: inline-block; /* To control width and height */
          width: 20px;
          height: 20px;
          background-size: cover;
        }
        
        .status[data-value="Y"]::before {
          background-image: url('https://cdn-icons-png.flaticon.com/128/2618/2618312.png');
        }
        
        .status[data-value="N"]::before {
          background-image: url('https://cdn-icons-png.flaticon.com/128/61/61221.png');
        }
        
        /* Optionally hide the original text if it exists */
        .status {
          font-size: 0; /* Or use other techniques to hide text */
        }
        </style>
  </head>

  <body>
    <h1>New step Task - 5</h1>
    <h2>tb w sp</h2>
    <p>id: &lt;&lt;[id]&gt;&gt;</p>
    <p>a: &lt;&lt;[a]&gt;&gt;</p>
    <p>b: &lt;&lt;[b]&gt;&gt;</p>
    <p>enuml_test: &lt;&lt;[enuml_test]&gt;&gt;</p>
    <p>YN1: &lt;&lt;[YN1]&gt;&gt; <p class="status" data-value="&lt;&lt;[YN1]&gt;&gt;"></p> </p>
    <p>YN2: &lt;&lt;[YN2]&gt;&gt; <p class="status" data-value="&lt;&lt;[YN2]&gt;&gt;"></p> </p>
    <p>SORT COLUMN: &lt;&lt;[SORT COLUMN]&gt;&gt;</p>  
    <br /><br />
  </body>
</html>

This is the result PDF.

Test row used

CS2

Thank you. I will take a look at this . I'm not strong on coding but I thinkl I can figure this out enough to test it.

Suvrutt_Gurjar