Extending UI with HTML, Javascript and CSS
Table of contents
At OutSystems, we want to shield our developers from the complexities of HTML, CSS and Javascript as much as possible. We do this by constantly improving the expressive UI capabilities of OutSystems. So, most of the time, users will create beautiful applications that work across devices without the need to write custom code because they'll do it visually.
We're also committed to making sure developers aren't limited in any way. Therefore, OutSystems allows developers to use standard HTML, Javascript, and CSS and extend their applications as needed.
HTML
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 properties such as RuntimeId (HTML attribute ID) or Style (class), which allow them to be used in/with standard JavaScript or CSS.
- 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.
JavaScript
OutSystems provides a very simple to use AJAX mechanism. However, developers can also use JavaScript extensively to customize how users interact with their applications, to create client side custom validations and dynamic behaviors, or even to create custom, very specific, AJAX interactions. For example, each application can have an application-wide defined JavaScript file or set of files included in resources. Page-specific JavaScript can also be defined.
OutSystems includes jQuery by default in all applications. But, developers also have the option to include their own JavaScript frameworks (prototype, jQuery, jQueryUI, dojo) and use them throughout applications just as they would in any HTML page.
Many JavaScript-based widgets, such as jQuery plugins, have already been packaged into easy to reuse web blocks by OutSystems Community members and published to OutSystems Forge. There are examples for kParallax, Drag and Drop lists, Table freeze cells, Touch Drag and Drop, Sliders, intro.js, or the well known Google Maps.
Even some of the OutSystems built-in widgets are a mix of JavaScript, JSON and back-end logic. For example, the OutSystems Charting widget is a wrapper over the well-known Highcharts library. Developers can use the properties exposed by the OutSystems widget, or use the full JSON API provided by HighCharts to configure the widget.
More experienced developers can even wrap custom JavaScript plugins in web blocks that the rest of the team can easily use in all applications.
This is an example of the jVectorMap JavaScript library, wrapped and reused in the visual designer to display website access metrics over a world map:
This is an example of a jquery slideshow plugin wrapped and reused in the visual designer:
CSS
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:
