HTML Templates and CSS Files - Is this an approach... - Page 2

matthewmoran · 09-17-2024 07:34 AM

Are there any unforeseen issues with this approach?

I've been switching most of my Google doc templates to HTML. Initially, I was adding CSS in a style section. I tried using a link element but struggled to make that work. This makes sense as the reference to the CSS file is in the appsheet folder structure which is not available to the client that receives the email.

However, I wanted a centrally available list of styles so I can control format changes globally. Here is what I did.

I created a table (sheet) named: cssStyles with two fields:
-cssID
-cssStyles

I create a single record/row with an ID number "c0001" and I put the CSS into the cssStyles field.

Here is the cssStyles table/sheet.

Then, in my template I include, at the top:

<style>
<<Start: FILTER("cssStyles",[cssID]='c0001')>>
    <<[cssStyles]>>
<<End>>
</style>

This seems to work great!

Also, avoiding the < and >

As an aside, I find needing to use: <<[Fieldname]>> to be intolerable.

To avoid that, in your HTML template, remove the <HTML> and </HTML> tags at the start and end. They aren't needed.

For example: Here is a simple, if not brutally ugly, example template using the CSS data table above.

<style>
<<Start: FILTER("cssStyles",[cssID]='c0001')>>
    <<[cssStyles]>>
<<End>>
</style>
<body>
<table id="firstTable">
<<Start: ORDERBY(FILTER("Requests", ISNOTBLANK([TaskNumber])), [TaskNumber])>>
    <tr>
        <td class="col01"><<[TaskNumber]>></td>
        <td class="col02"><<[RequestName]>></td>
    </tr>
<<If: ([RequestDate]<"4/1/2024")>>
    <tr class="extra">
        <td class="col01"><<[RequestDate]>></td>
        <td class="col02"><<[RequesterName]>></td>
    </tr>
<<EndIf>>
<<End>>
</table>
</body>

Thoughts?

HTML Templates and CSS Files - Is this an approach?

Here is the cssStyles table/sheet.

Also, avoiding the &lt; and &gt;

Also, avoiding the < and >