Creating Screen Templates

Creating Custom Screen Templates Module

To be able to add new Screen Templates to your environment, you first need at least one clone of Custom Screen Templates Web or Custom Screen Templates Mobile.

1. Go to the Forge repository tab in Service Studio and search for Custom Screen Templates. There are two components in the results list, one for Mobile Apps and one for Web Apps.

   

2. Select a component to go to the next screen. Click Open Module to continue. A new tab opens in Service Studio.

   

3. Wait for the module to load, and then click Open a clone in the dialog.

   

4. Once a clone of the module is created, click Close to dismiss the confirmation dialog.

5. This is an optional, but a highly recommended step. Go to the Interface tab, click the module title in the tree and edit the Name property to, for example, "MyCustomScreenTemplatesWeb" or "MyCustomScreenTemplatesMobile". This makes the names of the cloned modules more meaningful.

6. Publish the module. The module is now available in Applications > Independent Modules.

7. Go to Independent Modules and move your Custom Screen Templates Module to another application. Move your mouse pointer over the module name to reveal the Move to command, and then click it.

   

Creating new Screen Templates

Follow these steps to create new Screen Templates.

1. Open the Custom Screen Templates Module where you want to add new Screen Templates. If you don't have such module, follow the instructions for creating it and then return to this section.
2. Go to the Interface tab and in the UI Flows folder right-click the ScreenTemplates flow. Select Add Web Screen (or Add Mobile Screen) from the context menu.
3. In the New Screen window select either a Screen Template with some content to bootstrap your template or choose Empty. Click Create Screen. A new Screen shows, with a message "You are editing a Screen Template" at the top.
4. If you selected Empty in the previous step, go to the UI Flows folder, expand the Common folder, drag the Layout block and drop it to the Screen.
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

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 are already created from it.

Creating Screen Templates with custom Theme

You can use a different Theme in each Custom Screen Templates 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.