Skip to main content
OutSystems

Creating a New Silk UI Application

Choosing the Right Architecture

OutSystems 10 allows you to create two types of applications:

  • New OutSystems applications to be used exclusively for web devices created with one of the Silk UI Web Templates.

  • New mobile applications built to generate a native app created with one of the Silk UI Mobile Templates.

For multichannel applications, consider the following:

  • For the best mobile experience, integration with mobile plugins and to generate a native app, you need two different UI modules: one for the web app, using Silk UI Web, and another one for the mobile app, using Silk UI Mobile. Depending on the application architecture, both UI modules can share services and logic, only switching the UI experience for web and mobile devices.

  • For multichannel applications with faster UI development, easier maintenance, and wider reach — via web browser — create a new Web Responsive application using one of the available Silk UI Web Templates.

Selecting a Template

Silk UI Mobile has three default Templates:

  • Phone: Ideal for mobile applications that focus on small screens and adapt to tablet screens by using guard rails on the side.

  • Tablet: Ideal for bigger form factors but with a fallback for mobile phones. Use Adaptive Blocks for additional control over content for different form factors.

  • Universal: Certain use cases will require different versions of the same screen for phone and tablet, while the rest of the application will use the same screens with Adaptive Blocks. In this case, the Universal Template has the UI flows and logic ready to create these screens.

Silk UI Web has five default Templates:

  • Dublin: Fully responsive web experience with a fluid layout and a prominent left menu.

  • Lisbon: Web responsive theme making full use of screen size, which also adapts to smaller desktops, through a compact header and an optional sidebar.

  • Lisbon Website: An additional Lisbon template to create websites with centered sections and a cover image.

  • Liverpool: Web responsive theme with a fixed and centered layout, intended for simpler applications.

  • Vanilla: For CSS ninjas who want to build their own custom theme, but still using Silk UI's features.

For both mobile and web frameworks, the theme color is the one you select when creating a new application. This color selection generates a module style sheet that you can edit later.

Switching Templates for an existing Application

To change the template for an existing application, carefully follow this set of steps:

1. Remove all references to the current template, layout, theme and common blocks.

2. Add references to the new template and select the correct base theme for your module.

3. Create a new temporary app to hold the same predefined color, because the CSS for color customization will be overridden in the process.

4. Move the new CSS to the right module.

London Theme Compatibility with Silk UI Web

The Silk UI Web pattern is a server-side responsive framework with logic that needs a specific set of elements to run. Namely page layout logic and the device detection engine from Silk, which is not present in London. The Liverpool template is the closest match to the London theme and is fully responsive.

Check the Liverpool Theme.

  • Was this article helpful?