Skip to main content

Developing an Application

 

OutSystems

Themes

A theme contains the details for visual presentation of your application. Changing a theme changes how your application looks. A theme can be applied to an entire application or to a UI Flow.

OutSystems themes are based on Silk UI, a framework for quick development and implementation of best practices. The Silk themes have numerous patterns, such as Carousel, ChatMessage, AnimatedLabel, Wizard, Columns4 and many more. The themes work well with the scaffolding, so you can quickly create CRUD interfaces, insert screens by dragging entities to UI Flows and use other accelerators. The Silk themes are optimized for performance, which is particularly important in mobile development. All applications that you select from the new applications templates such as Dublin, Lisbon, Vanilla, Phone, Tablet, Universal are based on the Silk framework. However, the template Web Application in Web App will create a web application based on the London Theme, which is not part of the Silk framework.

New applications inherit some of the CSS from the base theme. The easiest way to edit the theme is to generate new CSS by visiting Silk Theme Customizer for mobile platforms or Theme Customizer for web applications. Use the London Theme customizer to edit this theme. The CSS can be used to style the individual screens and elements.

The structure of a theme

The themes in the Silk framework follow a structure which is based on the platform screen requirements. Each theme has a list of blocks (for example, a header block) and each block consists of one or more placeholders (header title, header search...).

What follows is a simplified graph showing how a new theme inherits the layout from the base theme, and how the platform uses the blocks and placeholders to generate a page. The main layout has placeholders whose content are blocks (the Header placeholder will be replaced by the content generated in the Header block). The CSS is also inherited from the base theme, but can be overridden by the application CSS.

Blocks

Different types of the screen will require different blocks to function correctly within the platform. Here is the table which specifies the required blocks for screens in web applications:

Type of Screen Web Block
Layout Info Balloon Pop-up Editor Email Header Menu Footer
Blank Screen Required Required Required Required
List Screen Required Required Required Required
Show Screen Required Required Required Required
Edit Screen Required Required Required Required
Info Balloon Required
Pop-up Editor Required
Email Required

The table can be interpreted like this:

  • When creating or editing a blank screen in a web application, there should be web blocks for the layout, header, menu and footer, or:
  • When creating or editing an Email web application, there is only one block required.

The main content of the screens is placed in the block named Layout. Depending on the platform for which the theme is developed, the layout can consist of different placeholders. For example, the layout in web application must have a placeholder that will show content (MainContent), but the breadcrumbs placeholder is optional.

This is the list of reserved names for the Layout placeholders in the web themes.

  • Title
  • MainContent
  • Breadcrumbs
  • Actions
  • Header
  • Menu
  • Footer

A mobile theme can have these placeholders in the layout block:

  • HeaderLeft
  • Title
  • HeaderRight
  • HeaderContent
  • Content
  • Bottom

The mobile themes have the block-specific events and actions, which are later compiled into JavaScript/React event listeners and functions. Do not delete default events and actions relevant for the screen purpose.

Placeholders

What placeholders to use depends on the type of screen. Here is an overview for the web applications:

Type of Screen / Placeholder Title MainContent Actions Header Menu Footer
Blank Screen Required Optional Optional Optional
List 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

Some examples:

  • If, in the theme properties, a web application has a web block assigned for Blank Screen, the only required placeholder for that web block is MainContent, or:
  • If, in the theme properties, a web application has a web block assigned for Email, the only required placeholder for that web block is Title, while MainContent is optional.

Menu items in web can be created automatically by drag and drop. If you want to keep the same functionality in your themes, create a menu web block with the required input parameters and the entities. Refer to the existing themes for input parameters and entities.

Here is an example of blocks for a web theme and their placeholders:

Creating a theme from a base theme

When you create a new app it already contains a copy of the CSS which you can edit. You can create new, additional, themes manually.

  1. In the Interface tab right-click Themes and select Add Theme.
  2. Enter the name of your new theme.
  3. Optionally, change the Base Theme. If you do not see the theme you want in the list, add a reference to it.
  4. With your theme selected in the Properties Pane, click on Style Sheet.
  5. Enter your styles in the first tab of the CSS editor. You cannot edit the the original theme, but you can create new styles with the same class names and override the original styles.
  • Was this article helpful?