Skip to main content




Service Studio version:

Creating Screen Templates

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Create new Screen Templates and make them available in your environment by adding them to a Custom Screen Templates Module.

    Creating a Custom Screen Templates Module

    To add new Screen Templates to your environment, you first need to clone one of the Screen Template components:

    • Custom Screen Templates Reactive for Reactive Web Apps
    • Custom Screen Templates Mobile for Mobile Apps
    • Custom Screen Templates Traditional Web for Traditional Web Apps

    • In Service Studio, go to the Forge tab and search for Custom Screen Templates. There are three components in the results list: one for Mobile Apps, one for Reactive Apps, and one for Web Apps.

      Forge results for Custom Screen Templates

    • Click one of the components and then click Open Module.

      Forge component details page

      A new tab opens in Service Studio displaying a warning message.

    • Click Open a Clone.

      Open clone confirmation dialog

      Service Studio takes a few seconds to clone the module.

    • Click Close.

      Close clone dialog box

    • This is an optional, but a highly recommended step.

      Go to the Interface tab, click the module title in the element tree, and edit the Name property to, for example, MyCustomScreenTemplatesWeb or MyCustomScreenTemplatesMobile.

      Rename module name

      This makes the names of the cloned modules more meaningful.

    • Publish the module.

      The module is now available on the Development tab, in Independent Modules.

      Independent modules

      Cloned module

    • From Independent Modules, move your Custom Screen Templates Module to the application you want to use it in.

      To do this, click the Move module icon, select the application you want to move the template to, and click Move.

      Move module

      Select application

      The template module is now part of the application you selected.

    Creating new screen templates

    1. Open the Custom Screen Templates Module where you want to add a new Screen Template. If you don't have such a module, follow the instructions for creating it and then return to this section.

    2. On the Interface tab, from the UI Flows folder, right-click your screen template UI flow and select Add Screen.

      Add new screen

    3. In the New Screen window select either a Screen Template with some content to bootstrap your template or choose Empty and click Create Screen.

      In this example, we select Empty.

      Select new screen type

      The new screen opens with a warning message: "You are editing a Screen Template. Check the guidelines."

      Warning message

    4. Go to the UI Flows folder, expand the Common folder, and drag the Layout block onto the screen.

      Drag layout block to screen

      Note: This step only applies if you selected the Empty screen in the previous step.

    5. Set the preview image and enter the metadata for the Screen Template.

    6. Publish the module.

      Your Screen Template is now available to all developers in the environment.

      Editing a Screen Template

    Editing screen templates

    You can edit your Screen Templates in your Custom Screen Templates Module. Republish the module to update the Screen Templates in the environment. Keep in mind that editing an existing Screen Template does not affect screens that were already created from it.

    Creating screen templates with a custom theme

    You can use a different Theme in each Custom Screen Template Module. Screen Templates inherit the styles from the Theme.

    1. Follow the steps for creating a Custom Screen Templates Module.

    2. Edit the module so it uses your Theme. The Custom Screen Templates Modules from Forge use BaseTheme, the default Theme from OutSystems UI.

    3. Follow the steps for creating new Screen Templates.

    OutSystems provides the following Forge components to assist you in creating your own style guide and Screen Templates:

    Articles in this Section

    • How Screen Templates work
      Learn how Screen Templates work.
    • Guidelines for creating Screen Templates
      Follow these guidelines to create stable and useful Screen Templates, with an excellent UX.
    • Metadata reference
      Enter the metadata when creating Screen Templates, to enable the developers to choose the best Screen Template for the Screen they are creating.
    • Sample data
      Screen Templates contain sample data, which you can manage in a back-office. You can view, reset and add your own data.
    • Was this article helpful?