Variables/ Triggers

To build your app with unlimited expressiveness, you may define variables or trigger remote actions. Triggers are just variables where the result returned is not relevant; what is important is the remote action performed, e.g. sending an email.

There are four types of variables:

  • Number
  • String
  • Array
  • API

You will add these in the BEFORE or AFTER section of a step in your app. You can name variables however you wish; however, they should be continuous - e.g. my_variable instead of my variable.

Once created, the variables get a V. in front of them, and you can access them as ${V.my_var}

To retrieve input control's data, just refer to it by its data label as such ${email} — no V. suffix

For example, to add two numerical variables a and b:

${V.sum} = ${V.a} + ${V.b}

You can choose the default value if there is some error, or if you wish to use a number separator. You will see more detailed contextual help how to use by clicking on "Supported expressions".

Variables are calculated in the order in which they appear - be mindful and adjust accordingly.


Most variables are simple; however, some may be conditional based on some checks:

Number variables have default values that are set if anything else fails — set these if you need to check the result of an assignment or operation.

Array variables can collect items or be cleared:

You would access array items with ${array_name}{[item]} , where item index starts at 0. You could get the number of items in an array like so: ${array_name}@{count}.

When using array variables (getting data):

${V.VARIABLE_NAME} - to get the full array.

${V.VARIABLE_NAME}{ DATA_PATH } - to get partial data.


Sometimes, when working with external sources, you may not wish to trigger certain activities during the design phase - e.g. once you verified that sending an email works, you may prefer to switch off the trigger until you are ready to deploy your app.


Working with read-only CSV/Excel files

Read-only files are very powerful to drive custom interactions according to your specifications.

For example, you could generate custom offers based on complex logic that includes multiple formulas.


Let's say we uploaded the file French file to Sources, then added it to our application. Let's say it has the following structure (all files loaded to Qreli to be used as reference need to have a header column):

To get a count of the number of rows, you can use a decorator — see the section at the end of this page:${F.French}@{count}

To get an array of a specific column "French", which you can use to generate drop-downs, you can call:

${F.French}{French} —> this returns an array of the French column

Please note that we use 0-based indexes, and that the header row does NOT count.

To get the contents of a specific cell, you would reference the column first, followed by the row.

As such, if we wish to get some specific element:

${F.French}{French, 0} or ${F.French}{1, 0} —> comme (1st element post header)

To get the 4th element in the column English:

${F.French}{English, 4} or ${F.French}{2, 4} —> he (4th element post header)


To assign true/false to a variable whether a column, row, or cell contains a specific element (these all return TRUE):

Of course, instead of je you could use a variable such as ${V.term}.


If you would like to find the row or column of a particular item, you can use the find decorator, like so:

${F.French}@{find: column=English; value=for} —> returns 6 (6th row excluding header, 0-index)

${F.French}@{find: column=2; value=for} —> returns 6 (6th row excluding header, 0-index)

${F.French}@{find: row=0; value=as} —> returns 2 (column 3, 0-index)


Please note that the value is to be searched without quotes: for instead of 'for' or "for".

In conditions, you would write the rules like so:

  • to check whether a column contains a specific scalar or variable:

  • similarly, to check whether a cell contains a specific value (the below return true):

Calling APIs and mapping responses

One of the superpowers of Qreli is the direct access to APIs, and the simplicity of working with them.

Once added to your Source, just define a variable with the type API, and start typing its handle/name or search for a function you wish to use.

For example, to get the list of available newspapers in the Library of Congress Chronicling America collection:


After selecting the function of interest, a popup appears where you can enter whatever parameters may be of interest - none in this case. You would click on the Try button to explore the results:

Once you receive the response, you can map individual items or arrays of data:

Once completed, you can see the mapped data:

and you can use it as needed, e.g. to create a dropdown:

You can also pull up individual elements directly within the array returned, like so:

${V.get_newspapers}{newspapers[10].title} or

${V.get_newspapers}{newspapers[10]['title']}

This will pull up the "title" property of the 10th record returned. Of course, instead of 10 you could have a random number/variable, like so: ${V.get_newspapers}{newspapers[${V.random_nr}].title}


Accessing array elements directly works even without mapping. For example if you have a variable that returns a messages object, you can call it as such:

${V.my_object}{messages[your_index]}


This is an example where we map individual data elements:

And present the results:


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