Design layouts to create screens with the same look and feel across an application. When a screen is created based on a layout, simply design the content that is particular to that screen.

Layouts are designed with Web Blocks.

Designing a Layout Web Block

The web block with the layout of a screen is designed with two types of content:

Reserved Names for Placeholders

By giving special names to placeholders, it allows OutSystems Platform to automatic fill their content when:

The next table contains the placeholders and the content they are filled.

Placeholder

Content

Title

Filled with a title inferred from the name of the screen.

MainContent

Filled with the main content of the screen:

  • List Screen: a widget to list records, and widgets to search;
  • Show Screen: a widget to show a record;
  • Edit Screen: widgets to edit a record, a Save button, and a Cancel link.

Actions

Filled with actions to be executed in context:

  • List Screen: an action to create a new record (if there is an Edit Screen);
  • Show Screen: an action to edit a record (if there is an Edit Screen).

Header

Filled with the web block defined in the Header property of the Theme.

Menu

Filled with the web block defined in the Menu property of the Theme.

A new option is added to the menu for each newly created screen (List Screens only).

Footer

Filled with the web block defined in the Footer property of the Theme.

Designing Menus

To use a menu layout on screens do the following:

  1. Design a Web Block with the layout of the menu and set it in the Menu property of the theme;
  2. Edit the web block set in the Layout property of the theme and design a Placeholder called Menu.

When a screen is created, the Menu placeholder is automatically filled with the web block set in the Menu property of the theme.

The design of the web block with the menu layout must follow some rules:

Once the screen is created with a menu, you may add menu entries.

Designing Headers and Footers

To use a header layout on screens do the following:

  1. Design a Web Block with the layout of the header and set it in the Header property of the theme;
  2. Edit the web block set in the Layout property of the theme and design a Placeholder called Header.

When a screen is created, the Header placeholder is automatically filled with the web block set in the Header property of the theme.

To use a footer layout on screens do the following:

  1. Design a Web Block with the layout of the footer and set it in the Footer property of the theme;
  2. Edit the web block set in the Layout property of the theme and design a Placeholder called Footer.

When a screen is created, the Footer placeholder is automatically filled with the web block set in the Footer property of the theme.

Placeholders Required on Screen Layouts

Each type of created screen uses different named placeholders. Take this into account when designing screen layouts.

Type of Screen

Placeholder

Title

MainContent

Actions

Header

Menu

Footer

Blank Screen

 

Required

 

Optional

Optional

Optional

List Screen

Required

Required

Optional

Optional

Optional

Optional

Show Screen

Required

Required

Optional

Optional

Optional

Optional

Edit Screen

Required

Required

Optional

Optional

Optional

Optional

Info Balloon

 

Required

       

Pop-up Editor

 

Required

       

Email

Optional

Required

       

Legend:

Required: screen layout must have the placeholder to be filled with content;

Optional: if the screen layout has the placeholder, it is filled with content;

Empty: the placeholder is ignored, even if it exists in the screen layout.

Learn how to create each kind of screen in the following topics:

Blank Screen: learn more in Create Web Screens;

List Screen: learn more in Creating List Screens;

Detail Screens: learn more in Creating Detail Screens;

Info Balloon: learn more in Creating Pop-up Info Balloons;

Pop-up Editor: learn more in Creating Pop-up Editors;

Email: learn more in Creating Emails.

See Also

About Themes | Create a Theme | Create Screens Based on a Layout | Change the Layout of Multiple Screens | Theme Properties