Skip to main content









Managing Emails

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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:

    1. Ensure you have a UI Flow with a blank Theme in your module. See Creating UI Flow without styles for instructions.

      UI Flow with the Theme property

      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.

    2. Right-click your Emails UI Flow and select Add Email. Service Studio adds a new Email element under the UI Flow.

      UI Flow and the new Email menu

    3. 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

      Email properties

    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:

    1. 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.

      Email for editing

      If you don't have Emails in your module, add one by following the instructions in Creating a new Email.

    2. Drag the Text widget to the Email and enter some text.

      Text in Email

      To learn more about what elements you can use in Emails, see Widgets available in Emails.

    3. (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:

    1. Add an Email to your module and optionally add some text.

    2. Right-click the Email in the Interface tab and select Add Input Parameter from the menu. Service Studio adds an Input Parameter.

      Input parameter for Email

    3. Set the following Input Parameter properties:

      • Name - enter Handle
      • Data Type - select Text
      • Is Mandatory - Select Yes to make the Handle a required value in the Email

      Input parameters for Email

    4. Double-click the Email in the Interface tab to open it for editing.

    5. Drag an Expression widget to the Email. The expression editor opens.

    6. Enter "Hello, " + Handle + "!" and click Done.

      Email preview

    When you open this email in the email client, the expression displays "Hello, John!" when the value of Handle is "John".

    Follow security best practices when designing emails that have user inputs.

    Widgets available in Emails

    You can use the following widgets in Emails:

    Widget Description Notes
    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.

    • Was this article helpful?