Styles + fonts and Email + Pictures

Styles + fonts and Email + Pictures

Having been experimenting with Agile Platform a lot the last few days I have some questions on some things that strike me as bugs but might not be.

1. Styles and fonts in recordlist table. I wanted to add a Barcode (though this probably goes for fonts in general) to a table list. Let's leave the why out of the debate :).  So I did a search on this forum and found what looked to be a simple solution. Download a barcode font (Z: 3of 9 BarCode) and add a '.Barcode' style to the stylesheet. So I did. After correcting a few errors here and there (misspelled barcode font name in the stylesheet and what not) it worked as I expected. As soon as I went to preview mode in the Service Studio the record table had a barcode in it.

However to my surprise as soon as I published it and ran it in a browser ... no more barcode. Looking at the source for the table I don't even see any mention of the font at all. Is this something I did wrong ? In the end the only way I could get it to work is the set the x.y expression to 'no escaping' and adding (more like hardcoding) a '<FONT FACE=""Z: 3of 9 BarCode"">xxxx</FONT>' type tag to it. Not really what I call clean even if it works.

Incidentally I tried other Fonts too. Same deal, somewhere along the line the font specification doesn't make it to the end product.

2. Pictures and more specifically those in emails seem also to have a small glitch (come to think of it, this could be outlook too). Wat I did was change the logo in the Header_Title page in common. I replace it with a picture that was a fair bit bigger resolution wise but to scale it down I set the width and heigth value (to 40 to be exact) in the picture properties. This works as expected in web pages and even while designing an email (which also by default adds the Header_Title at the top of a new email.

However as soon as you send the email, the width and height settings seem to go missing (or at least it looks like that in my outlook client). When the email arrives the logo is back to full size.

Before asking Outsystems if these are things I should report as bugs, I thought I would sound out the Community on their opinion and experience.

Hi Hans, and thank you very much for your questions!

Let me try to answer your questions to the best of my knowledge and gut feeling :)

1 - The way I would imaging this working is to create a stylesheet style

.Barcode {
  font-family: YOURFONTFAMILY;

and then set this style to the expression where you want to use it. If that's not working, can you get us a copy of your eSpace, or a small eSpace where that happens?

Also, have you used Firefox and Firebug, to check if by chance there isn't another CSS style overriding your font?

If that's the case, try setting it as !important . Read more about it here. Have you tried this in other browsers?

2 - This could indeed be a bug, but I'd like to get a bit more context on it.

Double click the e-mail in Outlook, and then click "Other Actions" and "View in Browser". Does it still show full size? If not, then it's Outlook.

Click "Other Actions" and select "View Source". Is the width and height set in the image?

I hope these help you troubleshoot these issues :) Let us know how it goes.


Paulo Tavares
1. Adding that style entry is exactly what I did, alas it only worked in the preview. Not the final published app.

2. Yeah looks good on the Browser (didn't remember you could do that view in browser thing). Must be outlook that is ignoring it then. Good ole microsoft.

I will try to create small demo app for the problem. The one I have is a little heavy to upload.

edit: I tried the Firebug plugin, it confirmed my font-family was missing from the associated style. There are two other settings in my style sheet and both of those come down through the tree fine, just not the font family. The barcode style is also the last style in the line for this part of the page. Nothing overwrites it down the line.

Hi Hans,

Well, does it work with a different font, though? Say, changing form Arial to Times New Roman?

And what if it's not inside the Table Records?


Paulo Tavares
No I tried that too, with a font that would surely stand out (they all look a lot alike :))

Same deal, tried with Bodoni (which is a fair bit fatter), no go.

Outside of the table, let's see. Yes, same problem. The Web.css firebug gives me shows the font-family entry only for the Body, select, textarea etc ... From my own .Barcode entry it seems to have disappeared.

Odd huh.
...I'm going to venture a guess here: are you, per chance, using an external CSS for that specific eSpace? :)

If not, do send us the eSpace - I'm curious as to what it might be!


Paulo Tavares
Nope no external CSS.

Am almost ashamed to say what it is. The preview feature just threw me for a loop.

All I had to do was enclose the font-family name in quotes. Seems the preview doesn't care but once you publish it and load it on a browser ...

It's days like these when I wonder I am not getting too old for this :)
Think of it this way: the rest of the week can only get better, right? :)

I'm glad you found it out. You're saying that you had to make it

.Barcode {
  font-family: "
Z: 3of 9 BarCode";

is that it?

Let us know, so that the next person who bumps into this at least knows how to get it to work correctly :)

Regards, and good work!

Paulo Tavares
Yes, that's basically it.

if your font name has spaces, special characters or starts with something other than an alphabetic character (just reading it of google here) it needs to be enclosed in either single or double quotes. Note that this is not as easy as it sounds I would hazard a guess. Say for instance 'Arial Black' would work fine. Because the font name is 'Arial' where as the 'Black' refers to a style (is it called a style?).

Just file it all under : what's in a name ...