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.
• lessThan: Returns true if the value is less than the specified value.
• isEquals: Returns true if two values are equal.
• eval: Evaluates the expression using the javascript eval function. ⚠️ Not recommended due to performance issues.
• 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.
• guid: Returns a new globally unique identifier (UUID v4).
• round: Rounds the number to the specified decimal places.
• dateDiff: Calculate days between two dates.
• daysBetween: Get absolute days between two dates.
• daysUntil: Calculate days from now to a future date.
• daysAgo: Calculate days from a past date to now.
• isDateBefore: Check if first date is before second date.
• isDateAfter: Check if first date is after second date.

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 }}"

lessThan

component: entity
name: myEntity
props:
  entityId: "{{ lessThan 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.

⚠️ Warning: The eval function is not recommended due to performance issues. Use built-in comparison functions like moreThan, lessThan, isEquals when possible.

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

Example of complex condition with eval (not recommended):

# Not recommended - uses eval
condition: "{{ eval item.price > 100 && item.quantity < 5 }}"

# Recommended - use built-in functions instead
conditions:
  - condition: "{{ moreThan item.price 100 }}"
  - condition: "{{ lessThan item.quantity 5 }}"

Date Comparison Functions

dateDiff

Calculate the difference between two dates in days:

# Returns positive number if date1 is after date2, negative if before
condition: "{{ dateDiff item.dueDate item.createdDate }}"

# Compare with current date
condition: "{{ dateDiff item.expiryDate now() }}"

daysBetween

Get the absolute number of days between two dates:

# Always returns positive number
condition: "{{ daysBetween item.startDate item.endDate }}"

daysUntil

Calculate days from current date to a future date:

# Returns positive if date is in future, negative if in past
condition: "{{ daysUntil item.dueDate }}"

daysAgo

Calculate days from a past date to current date:

# Returns positive if date is in past, negative if in future
condition: "{{ daysAgo item.createdDate }}"

isDateBefore

Check if first date is before second date:

condition: "{{ isDateBefore item.startDate item.endDate }}"

# Compare with current date
condition: "{{ isDateBefore item.expiryDate now() }}"

isDateAfter

Check if first date is after second date:

condition: "{{ isDateAfter item.endDate item.startDate }}"

# Compare with current date
condition: "{{ isDateAfter item.dueDate now() }}"

Date Comparison Examples

# Style if due date is within 7 days
condition: "{{ moreThan 7 (daysUntil item.dueDate) }}"

# Style if overdue (due date is in the past)
condition: "{{ moreThan 0 (daysAgo item.dueDate) }}"

# Style if created more than 30 days ago
condition: "{{ moreThan (daysAgo item.createdDate) 30 }}"

# Style if expiring within 14 days
condition: "{{ moreThan 14 (daysUntil item.expiryDate) }}"
condition: "{{ moreThan (daysUntil item.expiryDate) 0 }}"

# Compare two date fields
condition: "{{ moreThan (dateDiff item.actualDate item.plannedDate) 5 }}"

# Complex conditions using lessThan
condition: "{{ lessThan (daysUntil item.expiryDate) 14 }}"

guid

The guid function generates a new globally unique identifier (UUID v4) for use in components.

Syntax:

{{ guid() }}

Returns: A new UUID v4 in standard format xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx

Examples:

component: text
name: guidDisplay
props:
  value: "Generated GUID: {{ guid() }}"