Creating Screen Templates

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

  

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

  

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

• Click Open a Clone.

  

  Service Studio takes a few seconds to clone the module.

• Click Close.

  

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

  

  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.

  

  

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

  

  

  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.

   

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.

   

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

   

4. Go to the UI Flows folder, expand the Common folder, and drag the Layout block onto the 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 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:

• OutSystems UI Style Guide — a Theme and starter Application Template based on OutSystems UI
• OutSystems UI Style Guide Preview — a preview of all OutSystems UI Styles, UI patterns, Widgets, 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.