Skip to main content
Version: 1.20.1

API Directives

Use the following directives to modify the widgets. The directives can be added to any tag in the Template editing field on the Widget form.

simple-class​

Type: String

Create a class containing custom CSS style parameters, to easily apply it to your widgets.

Define the class in the CSS field of the Widget form.

To display a phrase with custom settings, do the following:

Template

<p simple-class="friday-class">It's Friday!</p>

CSS

 .friday-class{
 animation: blinker 1s linear infinite;
 background: #FF00FF;
 }
@keyframes blinker {
 50% {
  opacity: 0;
 }
}

simple-if​

Type: String

This directive allows you to hide or show the widget, or part of it. If the specified condition is not satisfied, the elements are removed from the Document Object Model (DOM).

The following example enables a block of a widget if a set condition is met.

Template

<p simple-if="{data.model_id}">Model Detected</p>

Client script

( () => {
   const parameter = new URLSearchParams(window.location.search).get('model_id');
   s_widget.setFieldValue('model_id', parameter);
})();

simple-show​

Type: String

This directive allows you to hide or show the widget, or part of it. If the specified condition is not satisfied, the hidden elements remain in the Document Object Model (DOM).

In this example, the directive defines the current day of the week and displays a corresponding phrase “It's Friday!” in the widget.

Template

<p simple-show="new Date().getDay()===5">It's Friday!</p>

simple-style​

Type: String

Use this directive to customize the tag layout: background color, font settings, pointer, and others.

In this example, you can see, how to customize the text style.

Template

<p simple-style="{background: '#FF0000'}">Attention please!</p>