Add related attachments to an html

AppSheet AppSheet Q&A
, , , , , , ,
1

Hello Everyone,

I have the following two tables:
Parent Table:
Name: DMG
Columns:
ReportID
more columns
Related DMGAtts Type list / Element type Ref/ has the following formula REF_ROWS(“DMGAtt”, “ReportID”)

Child Table:
Name: DMGAtt
Columns:
ReportID Type Ref , Source Table DMG
AttID type text formula UNIQUEID()
IMG Type IMAGE

What i am trying to achieve is to have the related DMGAtts viewed in one of the sections in the damage reported when generated as an html

when i click test in the automation , i see no errors , but the task Run task “Task for Generate FILE” is in grey with an error Noe executable because validation errors exist.
Only when i add images in the child table it gets greyed out.

Appreciate any help in this.

html template am using:

<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      color: #333;
      background-color: #f4f4f9;
      margin: 0;
      padding: 20px;
    }
    h1 {
      background-color: #2c3e50;
      color: white;
      padding: 10px;
      text-align: center;
      margin-bottom: 30px;
      border-radius: 8px;
    }
    h2 {
      color: #34495e;
      border-bottom: 2px solid #ecf0f1;
      padding-bottom: 5px;
      margin-bottom: 15px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }
    .label {
      font-weight: bold;
      color: #2980b9;
      width: 45%;
    }
    .value {
      color: #2c3e50;
      width: 45%;
    }
    .section {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Damage Report</h1>

    <div class="section">
      <h2>Report Details</h2>
      <div class="row">
        <p><span class="label">Report ID:</span> <span class="value"><<[ReportID]>></span></p>
        <p><span class="label">Generated:</span> <span class="value"><<[DateTime]>></span></p>
      </div>
    </div>

    <div class="section">
      <h2>Damage Information</h2>
      <div class="row">
        <p><span class="label">Flight:</span> <span class="value"><<[Flight]>></span></p>
        <p><span class="label">ULD:</span> <span class="value"><<[ULD]>></span></p>
      </div>
      <div class="row">
        <p><span class="label">MAWB:</span> <span class="value"><<[MAWB]>></span></p>
        <p><span class="label">Big Bags (BB):</span> <span class="value"><<[BB]>></span></p>
      </div>
      <div class="row">
        <p><span class="label">IRR:</span> <span class="value"><<[Cat]>></span></p>
        <p><span class="label">Repacking Required:</span> <span class="value"><<[Repacking]>></span></p>
      </div>
      <div class="row">
        <p><span class="label">Missing Items:</span> <span class="value"><<[Missing]>></span></p>
        <p><span class="label">Count of Missing Items:</span> <span class="value"><<[MissingCount]>></span></p>
      </div>
      <div class="row">
        <p><span class="label">Damaged Parcels:</span> <span class="value"><<[ParcelsDMG]>></span></p>
        <p><span class="label">Count of Damaged Parcels:</span> <span class="value"><<[ParcelsCount]>></span></p>
      </div>
    </div>

    <div class="section">
      <h2>Attachments</h2>

      <!-- START loop through Related DMGAtts -->
      <p><<Start: [Related DMGAtts]>></p>
      <div class="row">
        <p><span class="label">Attachment:</span> 
           <!-- Display the image from the IMG column in the DMGAtt table -->
           <span class="value"><img src="<<[IMG]>>" alt="Attachment" style="max-width: 200px; height: auto;"></span></p>
      </div>
      <p><<End>></p>
      <!-- END loop through Related DMGAtts -->

    </div>

    <div class="section">
      <h2>Final Remarks</h2>
      <div class="row">
        <p><span class="label">Supervisor:</span> <span class="value"><<[Supervisor]>></span></p>
      </div>
      <div class="row">
        <p><span class="label">Remarks:</span> <span class="value"><<[Remarks]>></span></p>
      </div>
      <div class="row">
        <p><span class="label">Signature:</span> <span class="value"><<[Signature]>></span></p>
      </div>
    </div>
  </div>
</body>
</html>
2

Does the following help in place of the current code?

<<[IMG]>&gt

3 Likes
3

I ran into an issue similar to this, from memory I had to update my tags to the below (Replace your app name and table name etc.)

<img src="https://www.appsheet.com/template/getimageurl?appName=YOUR_APP_NAME&tableName=DMGAtt&fileName=<<[IMG]>>" alt="Attachment" style="max-width: 200px; height: auto;">

Let us know if this helps!

2 Likes
4

Thanks a lot this worked great .

<span class="value"><<[IMG]>></span></p>
<p><<End>></p>
2 Likes
5

it gave me syntax error because of the <<>> i guess, but i will try to debug it later. for the moment this worked for me

<span class="value"><<[IMG]>></span></p>
<p><<End>></p>
6

You are welcome.

1 Like