AppComponent Variables

Introduction

Variables are used to pass parameters to the components. They are used to customize the behavior of the components. For example. EntityId is a variable used to pass the entity id to the entity component to fetch the entity details.

Global Variables

Global variables are the variables that are available to all the components. They are used to pass the global parameters to the components. For example, the user id is a global variable that can be used to pass the user id to the components.

• organizationId (string): The organization id of the user.
• currentUser (object): The current user object.

Query String Variables

Query string variables are the variables that are populated from the query string. They are used to pass the parameters from the query string to the components. For example, the entityId is a query string variable that can be used to pass the entity id from the query string to the components.

URL: http://localhost:3000/?entityId=1

component: entity
name: myEntity
props:
  entityId: "{{ entityId }}"

Passing Variables to Components

Variables can be passed to the components using the props property. The props property is used to pass the parameters to the components. For example, the entity component takes the entityId as a parameter to fetch the entity details.

component: entity
name: myEntity
props:
  entityId: "{{ entityId }}"
  entityTypeName: "{{ entityType.name }}"

Type Casting

Variables can be type casted using the number and string functions. The number function is used to convert the variable to a number. The string function is used to convert the variable to a string. For example, the entity component takes the entityId as a number and entityType as a string.

component: entity
name: myEntity
props:
  entityId: "{{ number entityId }}"
  entityType: "{{ string entityType }}"

stringDictionary

stringDictionary is a dictionary that can be used to convert the object to a string map.

{
  "name": "John",
  "age": 30
}

name: "{{ stringDictionary object }}"

output:

{
  "name": "John",
  "age": "30"
}

nullIfEmpty

nullIfEmpty function is used to convert the empty string to null.

component: entity
name: myEntity
props:
  entityId: "{{ nullIfEmpty value }}"

trim

trim function is used to remove the leading and trailing spaces from the string.

component: text
name: myEntity
props:
  value: "{{ trim value }}"

luceneString

luceneString function is used to convert the variable to a lucene safe string. Escape the special characters in the string to be used in the lucene query. Example: + - && || ! ( ) { } [ ] ^ " ~ * ? : \ /. Wrap the string with double quotes to be used as a phrase.

Examples:

• hello world -> "hello world"
• 1 -> "1"

filter: "{{ luceneString filter }}"

Formatted Variables

Variables can be formatted using the format function. The format function is used to format the variable. For example, the entity component takes the entityId as a number and entityType as a string.

component: text
name: myEntity
props:
  value: "{{ format date 'MM/DD/YYYY' }}"

Functions

• now(): Returns the current date and time.

component: text
name: myEntity
props:
  value: "{{ now() }}"

Format Date

• MM/DD/YYYY: 01/01/2021
• YYYY-MM-DD: 2021-01-01
• DD/MM/YYYY: 01/01/2021
• YYYY/MM/DD: 2021/01/01
• HH:mm:ss: 12:00:00
• HH:mm:ss A: 12:00:00 PM
• hh:mm:ss A: 12:00:00 PM
• hh:mm A: 12:00 PM
• HH:mm: 12:00
• fromNow: 2 days ago

Format Number

• 0,0.00: 1,000.00
• 0,0: 1,000
• 0.00: 1000.00
• 0: 1000

Format Percentage

• 0.00%: 100.00%
• 0%: 100%

Math Operations

Round

component: text
name: myEntity
props:
  value: "{{ round number 2 }}"

Accessing Array Items

To access the array items, use the index. For example, to access the first item of the array, use {{ array[0] }}.

component: entity
name: myEntity
props:
  entityId: "{{ number entityId }}"
  entityType: "{{ string entityType }}"
  addresses: "{{ addresses[0] }}"
  city: "{{ addresses[0].city }}"
  state: "{{ addresses[0].state }}"

Accessing Configuration Variables

Configuration variables are accessed using the config keyword. Format {{ config.configName.key }}

Config name must be defined in the app module.

component: component
props:
  configs:
    - name: "configName"
      path: "key" # optional to load specific field

Local Storage Variables

Local storage variables are accessed using the localStorage keyword.

component: entity
name: myEntity
props:
  entityId: "{{ localStorage entityId }}"

Functions

Functions are used to perform the operations or calculations on the variables. For example, the any function is used to check if any of the values are true.

Available functions:

• any: Returns true if any of the values are true.
• isNullOrEmpty: Returns true if the value is null or empty.
• isTrue: Returns true if the value is true.
• moreThan: Returns true if the value is more than the specified value.
• eval: Evaluates the expression using the javascript eval function.
• stringDictionary: Converts the object to a string map.
• trim: Removes the leading and trailing spaces from the string.
• format: Formats the variable.
• now: Returns the current date and time.
• round: Rounds the number to the specified decimal places.

component: entity
name: myEntity
props:
  entityId: "{{ any list }}"
  entityType: "{{ isNullOrEmpty entityType }}"

Any

component: entity
name: myEntity
props:
  entityId: "{{ any list }}"

IsNullOrEmpty

component: entity
name: myEntity
props:
  entityType: "{{ isNullOrEmpty entityType }}"

IsTrue

component: entity
name: myEntity
props:
  entityType: "{{ isTrue value }}"

MoreThan

component: entity
name: myEntity
props:
  entityId: "{{ moreThan item 10 }}"

isEquals

component: entity
name: myEntity
props:
  entityId: "{{ isEquals item item2 }}"

eval

eval function is used to evaluate the expression using the javascript eval function.

component: entity
name: myEntity
props:
  entityId: "{{ eval 1+1 }}"