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.

The default OutSystems themes are an integral part of from OutSystems Mobile UI Framework and OutSystems Web UI Framework. The frameworks enable quick development and implementation of best practices. Both frameworks have many 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 UI frameworks are optimized for performance, which is particularly important in mobile development.

New applications inherit some of the CSS from the base theme. The easiest way to edit the theme theme is to generate new CSS by visiting Theme Customizer.

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.