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.
The structure of a theme
The themes in the OutSystems UI 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.
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||Header||Menu||Footer|
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.
A mobile theme can have these placeholders in the layout block:
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|
- 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 MainContent, while Title 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.
- In the Interface tab right-click Themes and select Add Theme.
- Enter the name of your new theme.
- Optionally, change the Base Theme. If you do not see the theme you want in the list, add a reference to it.
- With your theme selected in the Properties Pane, click on Style Sheet.
- 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.