CSS / LESS

Overview

Your Servoy solution can be styled using LESS as dynamic style sheet language and/or unprocessed CSS (3.0).

CSS ( Cascading Style Sheets ) is the style sheet language used in the World Wide Web to describe how elements should be rendered in the presentation layer.

LESS is a CSS preprocessor that adds various features to CSS, such as variables, mixins, and functions. It allows developers to write more maintainable and reusable code by using a dynamic and expressive syntax. By using LESS, you can define variables to store common values, create mixins to reuse code snippets, and define functions for more complex tasks. In Servoy the .less file will compile into an actual .css automatically. For a detailed documentation about Less language see the Official Documentation for Less.

When creating a Servoy NG Client solution, the solution is created with the Servoy default less theme ( is possible to opt-out ); the theme offers configurable styles for commonly used components and a set of utility classes.

Quick Start

When creating a new solution the Servoy default less theme is included by default. To opt-out, in the Create a new solution wizard, click on Show advanced solution settings; uncheck the option "Add default servoy .less theme".

Create Solution IMG

If the solution is created already, the less style can be added using the solution's property styleSheet; the wizard will guide you in creating your solution's style. The created files will be placed in the media folder of your solution.

Solution Stylesheet IMG

You can open for editing the less/css file via the solution's property styleSheet or double-click the file in the media folder.

How it works

With LESS/CSS you can style consistently all elements in your servoy application. Every Servoy element has an unique class selector in it's template which can be used to style consistently all elements of the same type; for example Bootstrap Button has a style class selector .bts-button.

// make the borders of buttons slightly rounded
.bts-button {
    border-radius: 6px;
}

Every Servoy element has a styleClass property which can be used to apply additional style class selectors to the element; simply enter one or more space-delimited values for the styleClass property. With additional style classes you can add additional behavior or overrule the default style of the element.

For example, styleClass="btn btn-primary my-roundy-btn".

// make the border rounded
.my-roundy-btn {
    border-width: 2px;
    border-radius: 50px;
}

The final style applied to the element is determined by the specificity of the CSS selector applied to the element. The selectors and the order in which are defined in the LESS/CSS files affects the specificity.

For example, following the specificity rules the class .my-round-btn will not change the border-radius if in the LESS/CSS file is defined before the default .bts-button; since these 2 class selectors have the same specificity weight, the last selector in the LESS/CSS, in order of appearence, will determine the border-radius style.

Therefore is recomended that default style for the elements are added before style classes used in the styleClass property of form elements.

Using LESS variables

Using less variables you can easily adjust style properties, improving the maintenability of your style sheet.

Example

// Define less variables
@my-border-radius: 6px;

.bts-button {
    // Use the less variable instead of a fixed value
    border-radius: @my-border-radius;
}

.bts-textbox,
.bts-textarea {
    // Use same less variable in other selectors
    border-radius: @my-border-radius;
}

Servoy elements Selectors

These are the specific class selectors which you can use to style servoy elements based on their types. Please note, depending on the component complexity, the component may have inner selectors to target more specific elements of their template; these inner selectors can be subjects to changes upon upgrades. The most effective way to Style your solution and easily adjust to upgrades is to use the Servoy default Theme.

Common components Selectors

Common Components	Class Selector
Label, DataLabel	.bts-label
Button	.bts-button
Image	.svy-mediafield
Calendar	.bts-calendar
Calendar inline	.bts-calendar-inline
Checkbox	.bts-check
Choice Group	.bts-radiogroup
Combobox	.bts-combobox
HTML Area	.svy-extra-htmlarea
Slider	.svy-slider
Spinner	.svy-extra-spinner
TextArea	.bts-textarea
TextBox	.bts-textbox
Textbox Group	.bts-textbox
Native Data List	.bts-list
Native Select	.bts-select
Type Ahead	.bts-typeahead
select2tokenizer	.svy-select2-autotokenizer

Note if you have an existing Servoy solution using legacy classic components the bts- prefix would be replaced by the svy- prefix, example: .svy-label .svy-button.

Floating components Selectors

All Floating components are placed within a .svy-form-floating div

Common Components	Class Selector
Floating Calendar	.bts-floatlabelcalendar
Floating Combobox	.bts-floatlabelcombobox
Floating Textarea	.bts-floatlabeltextarea
Floating Textbox	.bts-floatlabeltextbox
Floating Type Ahead	.bts-floatlabeltypeahead

Grids Selectors

Grids	Class Selector
Data Grid, Power Grid	.ag-table
Tanle	.svy-table

Other components Selectors

Other Components	Class Selector
Navbar	.bts-extra-navbar
Sidenav	.svy-extra-sidenav
Treeview	.treeview
DBTreeview	.dbtreeview

Form Containers Selectors

Form Containers	Class Selector
Form Container	.svy-container
Tab Panel	.bts-tabpanel
Accordion	.bts-accordion
Split Panel	.svy-extra-splitpane
Collapse	.svy-collapse
Form Component	.svy-formcomponent
List Form Component	.svy-listformcomponent

Form parts Selectors

Form Parts	Class Selector
Form	.svy-form
Header	.svy-header
Body	.svy-body
Footer	.svy-footer

Reconnecting feedback

When the NGClient detects communication issues with the server, a message is shown. This message can be styled and the text can be set using servoy i18n.

The message is a div styled using class svy-reconnecting:

.svy-reconnecting {
    color: red;
}

The message is defined by key servoy.ngclient.reconnecting:

Loading Indicator

By default NGClient will set the wait mouse cursor on body and all its elements - when a request to the server takes a while. Starting with Servoy 2019.03 it will also show a default loading animation (bottom of page).

The default loading animation can be customized directly from the solution's .css (or .less) file. It is made up of a parent div (with class "loading-i-holder") and 5 child divs (with class "lii-shape" on all of them and then each with it's own class from "lii-1" up to "lii-5"). You can change colors, position, animation and whatever is supported by CSS. For example if you want to make the shapes blue instead of orange you just add this to the solution style sheet:

// changing default loading indicator color(s)
.lii-shape {
    background-color: blue;
}

If you want for example the animation to not be shown at all you could for example add this to solution .css:

// hiding the indicator completely
.loading-i-holder {
    display: none;
}

There is another class selector, svy-reconnecting-overlay, which is used to define the css transition. The transition also has a delay (default) half a second in order to avoid this message showing when there is a network hiccup. The delay can be changed from solution css:

.svy-reconnecting-overlay.ng-hide-remove {
  transition-delay: 10s !important;
}

Using media file from LESS/CSS

Is possible to import other LESS/CSS files and reference other media files such as images or icons.

If mymedia.gif exists in media files, you can use if in the style as background-image: url("mymedia.gif"); or background-image: url("myimages/mymedia.gif"); if the image is placed in the subfolder myimages.

Importing other .less/.css files in the main solution .less/.css

In the .css/.less file that you choose as a property of the solution you can also reference other .css/.less files from solution media.

You can import other LESS files using the import statement: example @import "mySecondStyle.less";

If you import other .css files, you need to add to the url the argument "t=##last-changed-timestamp##"; this is required in order to discard the browser cached version of the css, when a new WAR is deployed (##last-changed-timestamp## will be replaced during WAR export with the last changed timestamp of the parent CSS)

For example if you have another css file in media "stylesheets/ui_customisation.css" (the path is relative inside media to the solution-css-or-less file that does the import) you can reference that by adding this line at the beginning of you solution's .css/.less: @import "stylesheets/ui_customisation.css?t=##last-changed-timestamp##";

Dynamic Styling

Style sheets can be changed programmatically, allowing a developer to change styles to different users' taste or to have periodic style changes in their applications. This can be done using the overrideStyle function.

The override style can be used to apply to the solution any style from an existing CSS/LESS file present in the media files or with a generated CSS/LESS file. In the example below the solution's default style is replaced with the style tenantX.less which is a different LESS file present in the media folder of the solution.

applicaiton.overrideStyle('mySolution.less', 'tenantX.less'); // tenant.less can be a solution model changed or generated file, then it will be recompiled at runtime.

In this example instead the solution's style is replaced with a newly generated style. Using LESS variables in style allows you to easily adjust the theme with the overrideStyle by setting only few variables value dinamically.

var media = solutionModel.getMedia('myDynamicStyle.less');
media.setAsString('@import "mySolution.less"; @main-color:green; @my-border-radius:2px;');

applicaiton.overrideStyle('mySolution.less', 'myDynamicStyle.less');