Re: HTML Templates and CSS Files - Is this an appr...

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?

jballester

Hi, Matthew

The process you mention is possible, but in my opinion I don't know if it would be the most appropriate.
.css style sheets have their own technology and the systems are prepared to work with it.
In my opinion, I would not integrate styles into a database to load them directly into the html, what I would do would be to work with the styles as an external .css file through bots that would generate that file.
Html is one technology css is another.

matthewmoran

I would need to host the CSS outside of the appsheet environment, available to anyone who is going to receive an email. This, theoretically, could be individuals outside our corporate environment as well.

For this reason, injecting the CSS into the email directly provided a mechanism that allows us to ensure formatting is provided correctly regardless of recipient without having to host CSS externally.

I'm still playing with nuances to how I set this up but it is working well so far.

And certainly, excluding the HTML tags so that I could include the start expressions opening and closing markers has made templates easier to view.

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 >