Table of contents
At the user interface level, the platform provides a rich visual editor that allows web interfaces to be composed by dragging and dropping. Instead of purely writing HTML, developers use visual widgets. These widgets are wrapped and are easy to reuse just by dragging and dropping without everyone needing to understand how they are built:
- The core visual widgets represent very closely what developers are used to with HTML: a div, an input, a button, a table, and so forth. All of them have a direct - and well known - HTML representation. For example, dragging a “Container” generates a div.
- Custom HTML widgets can be used to include whatever HTML is needed. An example is a CMS that loads dynamic, database-stored HTML content in a page.
- Widgets can be composed and wrapped in “web blocks,” which are similar to user controls, and reusable layouts with “placeholders,” which are similar to Master Pages with “holes” that will be filled in when instantiated.
- All widgets can be customized in the properties box via “Extended Properties," which will be directly translated to HTML attributes. This includes HTML tags that are not supported today in the base HTML definition. For example, if someone wants to use custom “data-” attributes, they can just add them in.
- All widgets have a well-defined API that is tracked by the platform to ensure that they are being properly used across all applications that reuse it.
In summary, the visual editor is very similar to a view templating system, such as .NET ASPX, Java JSP or Ruby ERBs, where users define the HTML and include dynamic model/presenter bound expressions.
This is an example of a jquery slideshow plugin wrapped and reused in the visual designer:
OutSystem UIs are purely CSS3-based. A predefined set of “themes,” a mix of CSS and layout templates, can be used in applications. However, developers can reuse existing CSS or create their own. A common example is to reuse bootstrap, which is tweaked so that its grid system is reused by the OutSystems visual editor to drag and drop page layouts, instead of having to manually input the CSS columns for every element.
Themes are hierarchical, which means that there is a CSS hierarchy in OutSystems. Developers can define an application-wide CSS in one theme and redefine only parts of it for a particular section of an application. Themes can also be reused by applications when there is a standard style guide.
The built-in CSS text editor supports autocomplete, similar to that of Firebug or Chrome Inspector, and immediately previews the results in the page without having to recompile/redeploy applications.
Common CSS styling properties including padding, margin, color, border, and shadow, can also be adjusted from directly within the IDE using the visual styles editor panel.
Examples of extending the UI
A great example of UI extensibility is Pordata. The Pordata website is the most important statistics website in Europe and is fully implemented with OutSystems technology. This website makes a large amount of statistical information about Europe available. The OutSystems UI extensibility capabilities were used for the graphical representation of data in charts, dynamic charts and geographical information visualization.
This example shows information overlaid in maps using a user interface external component:
This is an example of a typical page in the website that provides the visualization of information in dynamic and static charts:
Wodify, a SaaS solution for Cross Fit Gyms, is built with OutSystems and currently supports more than 200,000 users around the globe. Although most of the functionality in Wodify is created with OutSystems built-in user interface widgets, it is a great example of how OutSystems interfaces can be freely styled using CSS to achieve a consistent look and feel and support several devices and form factors.
Wodify user interfaces for several devices:
This is an example of dashboards for the gyms: