Using JEXL

Javascript Expression Language: Powerful context-based expression parser and evaluator.

In Peaka, we can use JEXL to set dynamic value to component properties or flow parameters in combination with variables. All property values support JEXL, you can open bigger edit window by clicking the arrow icon on right side of itself. Some properties are simple checkboxes, you can convert static properties to a JEXL editor by clicking the f(x) button. Here are some common examples for the use of JEXL.

  {{ jexl code here }}

Examples

  // addition
  {{sum(45, 99)}}
  // => 144

  // show name
  {{ "Hello " + page.name}}
  // => 'Hello Can'

  // alternatively
  Hello {{ page.name }}
  // => 'Hello Can'

  // convert the date
  {{convertLocaleDateString("Tue Aug 15 2023 10:23:41", "de",{
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }}
  // => Dienstag, 15. August 2023

Using Variables in the Visual Query Filters

We have an app variable named 'industry' and its value is 'automotive'. If you want to learn more about variables check this article.

In this example we want to filter our data table by its industry.

Then open the Visual Query Filters.

The where condition must be like that company industry equals to our app variable industry. For this, select company.industry from 'Where' in the Visual Query Filters and click the area in white square as you see in the image below.

It open a modal to enter your value or jexl code.

    {{ app.variableName }}

To reach page variables and component variables, we should enter code like below

    {{ page.variableName }}

In this example, we want to reach our industry app variable and make it upper case. We use a function of JEXL.

Enter below JEXL code.

  {{ upperCase(app.industry) }}

That's it. Our data table will be filtered.

Using Variables in Loops

We have a page variable named myCountries and it's an array and its value is like below.

[
  { value: "USA", index: 1 },
  { value: "Turkiye", index: 2 },
  { value: "China", index: 3 },
];

And I have a flow and add a new action named 'Loop Over List' to the Flow.

We need to enter an array or select an array for 'Loop Over List' and can reach our array from page variable as you see in the image.

Enter below JEXL code.

  {{ page.myCountries }}

Adding a New Property to an Object

We have a page variable and it's an object named countryInfo and its value is like below and want to and a new info about country to our array in flow.

{
  name: 'Turkiye',
  capital: 'Ankara'
}

And I have a flow and add a new action named 'Set Page Variable'.

And enter your value or JEXL code like below. We use a function of JEXL.

 {{ setWith(page.countryInfo,'population', '88.8 M') }}

That's it. When the flow works, your object will be updated.