Expressions

Functional Programming

5min

You can use JSONata Functional programming to compare values or display data based on certain conditions. You can quickly make any logical statements, and based on the result, you can perform different actions.
Configuration
Result
Expression
Determine if the value is bigger or smaller than a certain number 
"[email protected] > 10 
      ? 'Number is bigger':'Number is lower'"
Variables
="<div style='font-size: 40px'>Welcome on board 
    <b>" & @ctx.datasources.html.name & "</b>
     - " & @ctx.datasources.html.email &
    "</div>
﻿
﻿Examples and code snippets ﻿
Compare values
Functional expressions
﻿
In this example we determine if the value for entity.field is bigger or smaller that 10.
See the full code sample in GitHub. 
expression.jigx
datasources:
  mydata: 
    type: datasource.static
    options:
      data:
        - name: Jane Stevens
          title: Doctor
          email: [email protected]
          number: 0.64734
          number2: 12
          color: blue
          time: '2021-11-07T15:07:54.972Z'
          array: [5,1,2,3,7,9]

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Functional expression
            value: "[email protected] > 10 
                    ? 'Number is bigger':'Number is lower'"
datasources:
  mydata: 
    type: datasource.static
    options:
      data:
        - name: Jane Stevens
          title: Doctor
          email: jane@first.com
          number: 0.64734
          number2: 12
          color: blue
          time: '2021-11-07T15:07:54.972Z'
          array: [5,1,2,3,7,9]

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Functional expression
            value: "=@ctx.datasources.mydata.number2 > 10 
                    ? 'Number is bigger':'Number is lower'"
﻿
Variables in content
Content
﻿
This example shows how to write variables in HTML content.
See the full code sample in GitHub.
variablesInContent.jigx
source:
  documentType: HTML
  content: |
    ="<div style='font-size: 40px'>Welcome on board 
    <b>" & @ctx.datasources.html.name & "</b>
     - " & @ctx.datasources.html.email &
    "</div>
    <br />
    <img src='https://chart.googleapis.com/chart?cht=qr&chl=id"&@ctx.datasources.html.itemId&"&chs=380x380&choe=UTF-8&chld=L|2' alt='qr code'>
    <a href='https://www.qr-code-generator.com' border='0' style='cursor:default'  rel='nofollow'></a>
    <br />"  & @ctx.datasources.html.itemId
source:
  documentType: HTML
  content: |
    ="<div style='font-size: 40px'>Welcome on board 
    <b>" & @ctx.datasources.html.name & "</b>
     - " & @ctx.datasources.html.email &
    "</div>
    <br />
    <img src='https://chart.googleapis.com/chart?cht=qr&chl=id"&@ctx.datasources.html.itemId&"&chs=380x380&choe=UTF-8&chld=L|2' alt='qr code'>
    <a href='https://www.qr-code-generator.com' border='0' style='cursor:default'  rel='nofollow'></a>
    <br />"  & @ctx.datasources.html.itemId
﻿
Multiple select in a dropdown
Multiple selector expression
﻿
In this example, we use the notation in which we select the instanceId of our component from the components, and extract the selected from the state of the component, then choose the required value. For example id, name,...
See the full code sample in GitHub.
multipleSelect.jigx
children:
  - type: component.form
    instanceId: selected-people-form
    options:
      children:
        - type: component.dropdown
          instanceId: selected-people-dropdown
          options:
            label: Select people
            data: [email protected]-static
            isMultiple: true
            item:
              type: component.dropdown-item
              options:
                title: [email protected] & ' ' & @ctx.current.item.lastname
                value: [email protected]
                leftElement: 
                  element: avatar
                  text: =$substring(@ctx.current.item.firstname, 0, 1) & $substring(@ctx.current.item.lastname, 0, 1)
                  uri: [email protected]
children:
  - type: component.form
    instanceId: selected-people-form
    options:
      children:
        - type: component.dropdown
          instanceId: selected-people-dropdown
          options:
            label: Select people
            data: =@ctx.datasources.employees-static
            isMultiple: true
            item:
              type: component.dropdown-item
              options:
                title: =@ctx.current.item.firstname & ' ' & @ctx.current.item.lastname
                value: =@ctx.current.item.id
                leftElement: 
                  element: avatar
                  text: =$substring(@ctx.current.item.firstname, 0, 1) & $substring(@ctx.current.item.lastname, 0, 1)
                  uri: =@ctx.current.item.img
﻿
﻿

Result	Expression
Determine if the value is bigger or smaller than a certain number	"[email protected] > 10 ? 'Number is bigger':'Number is lower'"
Variables	="<div style='font-size: 40px'>Welcome on board <b>" & @ctx.datasources.html.name & "</b> - " & @ctx.datasources.html.email & "</div>

Updated 18 Sep 2023

Did this page help you?

Date & Time

Jigx Variables

Functional Programming

Configuration

﻿Examples and code snippets ﻿

Compare values

Variables in content

Multiple select in a dropdown

Examples and code snippets