In Service Studio, Email is a UI element that lets you design and manage the content of email messages. Like Screens, you can find and create Emails in the UI Flows. However, unlike Screens that usually use the OutSystems UI, Emails require lightweight styles to follow the industry best standards for email sizes.
This content is about a technical preview. See Technical Preview - Emails in Mobile and Reactive Web Apps for more information.
Creating a new Email
To create a new Email in Service Studio, follow these steps:
Ensure you have a UI Flow with a blank Theme in your module. See Creating UI Flow without styles for instructions.
The name of UI Flow for emails in this document is Emails.
If you try adding an Email to a large Theme, Service Studio warns you about possible rendering issues in email clients.
Create Emails based on a Theme without styles or a custom minimal Theme. A minimal CSS ensures low size of emails and discourages email readers from clipping the content. For example, Gmail shows [Message clipped] View entire message for all emails larger than 102KB.
Right-click your Emails UI Flow and select Add Email. Service Studio adds a new Email element under the UI Flow.
Select the new Email under the UI Flow, and enter the following details:
- A name in the Name field
"No subject"as a temporary subject in the Subject field
Adding content to Email
In the technical preview you can use text, images, and links in Emails. To add content to your Emails, follow these steps in Service Studio:
Go to Interface > UI Flows > your Emails UI Flow and double-click the Email you want to edit. The Email opens for editing and the widget list shows the widgets that Emails currently support.
If you don't have Emails in your module, add one by following the instructions in Creating a new Email.
Drag the Text widget to the Email and enter some text.
To learn more about what elements you can use in Emails, see Widgets available in Emails.
(Optional) Go to the Text widget properties and edit the text look and feel in the Styles tab.
Handling inputs in Emails
Customize the content of your Emails by adding custom information to it. Emails support compound data types and can use the data from the client scope of Email.
To add an Input to your Email and show the value in the email body, follow these steps:
Right-click the Email in the Interface tab and select Add Input Parameter from the menu. Service Studio adds an Input Parameter.
Set the following Input Parameter properties:
- Name - enter
- Data Type - select Text
- Is Mandatory - Select Yes to make the Handle a required value in the Email
- Name - enter
Double-click the Email in the Interface tab to open it for editing.
Drag an Expression widget to the Email. The expression editor opens.
"Hello, " + Handle + "!"and click Done.
When you open this email in the email client, the expression displays "Hello, John!" when the value of Handle is
Follow security best practices when designing emails that have user inputs.
Widgets available in Emails
You can use the following widgets in Emails:
|Text||Adds plain text.|
|Container||Adds the HTML div tag.|
|Expressions||Evaluates expressions and displays variable values.|
|Images||Embeds an image.||Local images and external links only.|
|Link||Adds navigational elements.|
You can use the available widgets to emulate new widgets. For example, use the Container widget and style it to look like a Button widget.
Clipped content warning
If the content of an email is too big, some email readers clip the content. For example, Gmail shows [Message clipped] View entire message for all emails larger than 102KB. This can happen if you're generating content in your emails with a Theme that has a lot of CSS not designed for emails.
To reduce the size of the email content, use a UI Flow with a blank Theme. See Creating UI Flow without styles for instructions.