Decorators

Decorators are functions applied to an expression. They can be chained into a group. Then, each subsequent decorator will perform a function on the value returned by the previous item.

Decorators can contain parameters (optional or mandatory). If the operator is entered correctly, a popup will be shown with a hint of possible parameters and format of the decorator function.

Decorators can be applied anywhere a computing context is available.


Decorator parameters:
  • parameters in square brackets indicate optional parameters;
  • bold text with an asterisk indicates required parameters;
  • each parameter has a data type and some hover tooltips;

Decorator usage format:

${calculated_context}@{decorator_name: param1 = value1}@{second_decorator}...


A contextual popup will appear to show you what is possible to do with decorators after entering @{ at the end of a variable:

${V.get_newspapers}{newspapers}@{

In the example below, we will remove the text "[volume]" from the "label" component of the array:

${V.get_newspapers}{newspapers}@{array-modify: affect=label; func=replace(' [volume]', '')}

This decorator instructs to show the number with thousands separator, as well as 2 decimals:

${V.number}@{thousands-separator: decimal=2}


Description of the Format decorator:
  • can be applied to a number or to a string;
  • parameter mask  (required): sets the mask according to which the data will be displayed (based on quasar templates). More information: https://v1.quasar.dev/vue-components/input#mask
  • parameter fill-mask  (optional): specifies the character that will replace missing characters.
E.g.:
You have: V.num = 123.0001

Formula

  • ${V.num}@{format: mask = ##/###}; result: 12/3__
  • ${V.num}@{format: mask = ##/##; fill-mask = -}; result: 12/3--

Description of the Date-format decorator:
  • name: date-format
  • parameters: only one non-named parameter, which is passed without quotes.
E.g.: You have ${V.db_date} (can be response from API, or some else): 2023-12-15 14:15:53

Formula:

  • Basic: ${V.db_date}@{date-format: [Day is] dddd} ; result = Day is Friday
  • Complex: ${V.db_date}@{date-format: dddd, MMMM Do YYYY, h:mm:ss a} ; result = Friday, December 15th 2023, 2:15:53 pm

To get today's date/time and convert it to a format you need, use something like this:

${E.timestamp}@{date-format: YYYY-MM-DD}


Function add original doc: https://momentjs.com/docs/#/manipulating/add/
Only the signature can be used: moment().add(Number, String)

As decorator:

  • name: date-add
  • parameters: qty - number of intervals to add; interval - interval type (days, months, seconds, etc.)
  • can be applied: to valid date/time format, UTC milliseconds, ${E.timestamp}, etc.
  • result: Moment.js instance, which can be displayed in the desired format using the “date-format” decorator
E.g.:
Get current timestamp, add 1 day and display in “LLLL” format:

${E.timestamp}@{date-add: qty = 1; interval = days}{date-format: LLLL }


Function subtract, doc: https://momentjs.com/docs/#/manipulating/subtract/

As decorator:

  • name: date-sub
  • same as the decorator “add”...

Get current timestamp, subtract 30 days, and display in the format YYYY-MM-DD:

${E.timestamp}@{date-sub: qty = 30; interval = d}{date-format: YYYY-MM-DD}


As decorator:

  • name: date-to-utc
  • no parameters
  • can be applied: same as “date-add”
  • result: same as “date-add”
E.g.: Get current timestamp, minus 1 day and display in “LLLL” format and UTC locale:

${E.timestamp}@{date-sub: qty = 1; interval = d}{date-to-utc}{date-format: LLLL}



Function local, doc: https://momentjs.com/docs/#/manipulating/local/

As decorator:

  • name: date-to-local
  • no parameters
  • can be applied: same as “date-add”
  • result: same as “date-add”
Can be useful when receiving data in the UTC format.
Example:Variable: V.db_time [String] = “2024-02-26 18:25:17”
This variable emulates a source (for example, API) that uses time in UTC.
To convert time to local time, use this decorator over others.

The following converts time to local time, subtracts one day, and shows it in the desired format: ${V.db_time}@{date-to-local}{date-sub: qty = 1; interval = d}{date-format: LLLL}


Decoration array-to-list:

Can only be applied to an array. If applied to another data type, there will be no effect.
Parameters:
  • [type: String]: bulleted|numbered|custom;
  • [shape: String]: any available shape for ou/ul html lists;
  • [max: Number]: maximum number of items;
  • [path: String]: data path for array of objects;
  • [template: String]: custom element template;
Response: String . Valid HTML or plain text. The decorator forms a textual representation of the array as a list. Depending on decorator options, this can be valid HTML or plain text.

Parameters:

  • type

    • default: numbered (HTML tag <ol>
    • bulleted (HTML tag <ul>)
    • custom (the list will not be built as an HTML template/tag. It is convenient to use if you need to display elements in a simple list, or store them in a variable as text, or send them to the API in a certain format)
  • shape
  • max
    • Allows to specify the maximum number of elements to form a list.
    • Default: the length of the array (maximum items).
    • Any positive number is allowed. If the value is a string or a number “<= 0”, the default value will be automatically set.
  • path
    • Allows to specify the path to data inside the array. Useful if the array is not one-dimensional.
    • Default: null (this means that the array element will be taken as a whole)

A single path or multiple paths can be specified, separated by commas.

Let's say we have a response from the server containing an array of data:

[
  {
    id: 1,
    userInfo: {
      firstName: 'John',
      email: 'john@qreli.com',
    }
  },
  {
    id: 2,
    userInfo: {
      firstName: 'Mary',
      email: 'mary@qreli.com',
    }
  },
// …
]
We apply the "array-to-list" decorator to the variable containing this array.
If we want to display only names, then we will specify the single “path” parameter:
path = userInfo.firstName

But if we want to output multiple data values in each list element, then we will specify multiple paths, for example:

path = id, userInfo.firstName, userInfo.email

When we define this parameter, then the data in the template will be available using the $N specifiers, where N is the data path number starting from 1.

Example:

@{ array-to-list: type = custom; path = id, userInfo.firstName; template = Hello $2! Your ID is equal to $1. } —> "Hello, John! Your ID is equal to 1"

  • template

    • Allows to change the display template of a list item.
    • By default, a list of "<li>" tags will be generated.
    • You can use the special data specifier $N (see above) inside a template.
If you do not use the "path" parameter, then the data will be available with number 1 - $1.
Example:
template = Item value is: $1

Decorator array-modify:

This decorator allows to apply some function to the specific array structure: 
[
  {
    label: '',
    value: '',
  },
//  …
]
Use this decorator to change the items of vector Elements.

It can only be applied to arrays.

Parameters:

Example:

@{ array-modify: func = substring(0, 2) }

This means taking only the first 2 characters of the labels (for vector elements).


You can learn more about certain variables and functions you could be using the Environment and Text/Math Libraries below.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles