I am working on a requirement in OutSystems Reactive Web.
I have stored my HTML email template in the database. At runtime, I replace placeholder values dynamically and pass the final HTML as an Input Parameter to the Email Body.
The email is being sent successfully, but the CSS/styles are not reflecting properly in the received email.
Current approach:
Issue:
Thanks
I think the problem is simply how you handle injecting HTML into the email UI.
If you've already sent the HTML, then you can definitely add CSS to the email.
You also need to check if the email has a theme added or not.
my question is how can i handle dynamic html template in Outsystems
Let example end user have to create own template and send email on tha template so no predefined code written
Hey! That’s a super common issue.The problem is that email clients (like Gmail or Outlook) usually strip out regular CSS classes and <style> tags.To fix this, all your CSS needs to be inlined directly into the HTML tags (for example, using <p style="color: red;"> instead of CSS classes).Since your template is dynamic, you have two quick options:Update the template in your database so all the styles are written inline.Grab a CSS Inliner component from the Forge. You can pass your final HTML through it right before sending, and it will automatically convert your classes to inline styles for you.(Also, just double-check that the Expression in your OutSystems email body has Escape Content set to No!)Hope this helps! Let me know if you get stuck.
Can you please share Amal oml in reactive application:
Styled Form
body{
margin:0;
padding:0;
background:#f4f6f9;
font-family:Arial, sans-serif;
}
.form-container{
width:400px;
margin:50px auto;
background:#ffffff;
padding:30px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
.form-title{
text-align:center;
font-size:28px;
color:#1e3a5f;
margin-bottom:25px;
font-weight:bold;
.form-group{
margin-bottom:20px;
label{
display:block;
margin-bottom:8px;
font-size:14px;
color:#333333;
font-weight:600;
input{
width:100%;
padding:12px;
border:1px solid #dcdcdc;
border-radius:8px;
box-sizing:border-box;
transition:0.3s;
input:focus{
border-color:#1e88e5;
outline:none;
box-shadow:0 0 5px rgba(30,136,229,0.3);
.submit-btn{
padding:14px;
background:#1e88e5;
color:#ffffff;
border:none;
font-size:16px;
cursor:pointer;
.submit-btn:hover{
background:#1565c0;
Contact Form
Name
type="text"
name="name"
placeholder="{Name}">
Email
type="email"
name="email"
placeholder="{Email}">
Submit
I don't have OML handy with me right nowBut you can use this componenthttps://www.outsystems.com/forge/component-overview/11841/move-css-inline-o11
Dear,just copy and paste the uploaded HTML file if its works just follow your own style and dynamic content
Dear, I have multiple dynamic templates, and I want to choose one at runtime to send the data. However, in reactive email, there is no option to set escape to false to send the content as HTML. So, I received the email, but the result looks like this:
So requriment is how can we sent the email when css is also reflected in Reactive
Md Mansur
You can use CKEditor componentthis will convert your html css text into formatted text with proper style
The problem is that my email template, which is built in OutSystems, is not fixed. It totally depends on the user selection at runtime.
In OutSystems, when we create an email, the template is usually fixed. So, I created an input parameter in the email and used it as an expression to set the email body dynamically before sending the email.
However, the HTML content is not rendering properly and is being displayed as plain text in the received email. How can I send a dynamic HTML email template correctly in OutSystems?
In Reactive web, OutSystems automatically escapes HTML for security, and there’s no native way to turn it off for emails. Plus, OutSystems generates its own tags behind the scenes, so injecting your full database code creates a broken, nested email.
Here is the best workaround:
Skip the native Email screen: Instead, download a Forge component like Send HTML Email. These provide server actions that let you pass your raw HTML string straight into the email body without OutSystems altering it.
Swap your placeholders: Just use the built-in Replace() function in your logic to swap tags like {{City}} with real data right before sending.
Inline your CSS (Crucial!): Looking at your screenshot, you are using blocks. Email clients like Gmail and Outlook usually delete these! You need to write your CSS directly inside the HTML tags in your database template (e.g., use <div style="background: white; padding: 20px;"> instead of <div class="card">).
When we use the above option and send the HTML directly, the email works fine. However, when we use the SetContent function in CKEditor 5 to modify or insert the data, the CSS is removed from the HTML. I also tried using inline CSS, but I still face the same issue when using the SetContent action in CKEditor 5.
This is a well-known Ck-editor 5 behavior, Don't use it for this scenario.Did you tried above solution using this forge component Send HTML Email.
DB Template → Replace() placeholders → Send HTML Email (Forge)
Dear,Kindly share your one of your HTML template.which component you are using and Email client details please.
Hi @Mann Khan ,
I wanted to share a reliable architecture and workaround I implemented for handling dynamic HTML email templates in OutSystems. Since Reactive Web email blocks handle Expressions differently and lack the classic Escape Content = No property, passing raw HTML directly can cause tags to be escaped and rendered as ugly, plain text in the recipient's inbox.
Here is a step-by-step breakdown of how I resolved this by decoupling the process into a two-app architecture:
1. Storing and Editing Templates (Optional)
Storage: I store the base HTML email templates in a backend Database Entity. Inside the HTML code, I use custom placeholders/tokens wrapped in double curly braces, such as {{EmployeeName}}, {{EmployeeDOB}}, or {{EmployeeAge}}.
Editing: On the Reactive front-end, I load this HTML content into a Rich Text Editor (RTE) Forge component. This allows business users to visually edit the layouts, modify text styles, and update templates dynamically. (Note: If template editing isn't a requirement for your use case, you can skip this step entirely).
Saving: The updated HTML content is saved straight back to the backend database entity.
2. Data Mapping and Token Replacement
Before dispatching the email, the system retrieves the target HTML template string. I use a Server Action with text manipulation functions (such as Replace()) to locate the exact token strings (e.g., {{EmployeeName}}) and swap them out with actual dynamic values fetched from runtime database aggregates.
3. The Email Sending Engine (Traditional Web App)
To ensure the final email renders beautifully as parsed HTML instead of raw code, I decoupled the core email-sending logic into a separate Traditional Web Application:
Reason: OutSystems Traditional Web Email blocks natively support the Escape Content = No property on Expressions.
Execution: The Reactive app triggers a Service Action (or database event) that passes the fully-mapped HTML content string over to the Traditional Web module.
Result: The Traditional Email block displays this HTML string inside an Expression widget with Escape Content explicitly set to No (which instructs the recipient's email client to safely parse and compile the HTML layout).
The email is successfully dispatched to the respective user with all rich text styling, tables, inline styles, and colors perfectly intact.
Note: I have fully tested this approach working fine .ThanksAnanth