HTML in Calculation fields

[Jason]

Hi all I wonder if someone can help me, I am having ongoing issues with HTML displaying in calculation fields how I want, some examples:
If I get some HTML in on a payload and I want to show it on a record via a calculation field then I save it to a Multiple line text field however that doesn’t really work as it gets messed up and most of the time I just end up showing the HTML code.
So I base64 encode it put the encoded string in the text field and the bring it into the calculation decode it and display:

const html = Buffer.from(@v_messageBody, 'base64').toString('utf8');

`
${html}
`

this works to a point but it is still messed up:

Now if I take the base64 string decode it on my local machine:

let encodedString = 'My Encoded String';
let decodedString = Buffer.from(encodedString, 'base64').toString('utf8');
console.log(decodedString);

and then paste the resulting HTML into a calculation field directly, I get a better result:

Just for reference if I paste the same HTML into a live preview HTML editor then I get:

I don’t mind that it doesn’t look exactly the same in Tape as it does in the HTML editor however I would expect the Tape-decoded HTML to look the same as my local machine-decoded version.

I have also tried striptags on the encoded coming in from the Multiline Text before decoding and it makes no difference

So the question is what am I doing wrong?

[Luis]

Hey @Jason.

If I understood correctly, are you getting the HTML code from a payload? What I usually do when I want the HTML code to show exactly as it is supposed on Tape is the following:

1. Add a Link field (let’s call it “HTML link”)
2. Add a Calculation field with the following code:

const file_url = @HTML Link;
`<iframe src="${file_url}" width="100%" height="600px"></iframe>`

3. Create a “When a web link is clicked” automation with the following:

4. Then make another automation that creates the link

5. And then the HTML renders exactly like it is supposed to in the record

Another approach

If you want, you can paste the HTML code to a multiline text field and make the following changes:

1. Create a Multi-line text field (let’s call it RAW HTML) and paste the raw HTML code.
2. Go to the “When a web link is clicked” automation and change the variable to the following:

3. Now, you can manipulate the HTML code directly from the multi-line text field and refresh the page to update. The HTML layout will render exactly how it is supposed to look.

BONUS

The greatest thing about using this approach is that you can embed the link in Tape dashboards.

[Jason]

Hi @Luis, thanks for that, a web link page does display the HTML very nicely and that is retained when embedding it into a calculation field, I may well go this route however I feel that there are some security implications with this solution not to mention the additional overhead.

[dirk_s]

Looks like the Multiline field is not the best way to achieve what you want. Also this might be the reason your HTML is broken in the field:

[DONE] Field to store data will alter its content

We have an automation, that pulls data from a source. It should store it as is. We currently use a multi line field for it. Unfortunately it seems to alter the content. There seems to be no other field type, where we can save data without tape filtering / chaging it? That prevents many useful usecases. Something like a “raw” field seems to be needed. We found out by comparing the content of the field with the console output in the log - which is complete - but as soon as its stored in a field,…

(I don’t think its fixed yet?)

Before we try to fix an “xy-problem” - what do you want to achieve? Looks to me like an HTML Mail to be send afterwards?

How about only having the field with the area to be edited and show the result in the calculation field? Also using this for being sent afterwards?

I currently have emails, which are plain status messages without fancy styling. I pre-populate the field via automation with greeting and footer (can be edited), but add the legal footer later from the automation. All the parts of this mail are in a settings app, which can be edited by the admin of this organisation.