Variable expression

Variable expression starts with $ and ends with ;.

• $global

• $nav (navigation update: property, appearance, reload, overlay)

• $state (data access)

• $this (data access)

• $result (remote response data)

• $args (argument list to special methods, e.g., clickRecord)

  • For clickRecord, the first argument is the record that a user has clicked.

• $interaction

• $disclosure

• $remoteArgs

Features

Special variables

General

• $globalSessionId;

  • A unique GUID for the current session

  • Usually set as a global value in navigation JSON

  • "global": { "sessionId": "$globalSessionId;" }

• $uploadedAttachmentIds; an array of attachment Ids returned by upload

• $uploadedAttachmentId; an attachment Id returned by upload

Status

Number Format

General

• We can add number format to portal variables that are embedded in string to improve the flexibility of the date/time representation.

• Works for the field type (the second argument) of number and currency

• Format options: ' |MKB| ' with either uppercase or lowercase

• Expected behavior (can be enhanced later)

  • If M/m is set and K/k is set: 16 MB, 357 KB, < 1 KB

  • If M/m is set and K/k is not set: 16 MB, 1 < MB

Status

"templates": {
  "record": "<div class=\"flex flex-justify-between\"><span>$this.attr(Name);</span><span>$this.attr(BodyLength, number, ' |KB|');</span></div>"}

Implementation Example

{
  "fieldName": "BodyLength",
  "fieldUi": {
    "fieldType": "number",
    "label": "File Size",
    "ariaLabel": "File Size",
    "settingsOptions": { "fieldFormat": " |KB|" }
  }
}

Moment Format

General

• We can add momentFormat to portal variables that are embedded in string to improve the flexibility of the date/time representation.

  • Works for the field type (the second argument) of date, time, and datetime.

  • We support all the display format string combinations from Moment.js https://momentjs.com/docs/#/displaying/

"appearance": {
  "templates": {
    "record": "<div class=\"name heading-1\">$this.attr(Name);</div><div class=\"revenure\">$this.attr(AnnualRevenue, currency);</div><div class=\"date\">expires on $this.attr(SLAExpirationDate__c, date, 'MM/DD/Y | -2y');</div>"    
  },
  …
}

• The momentFormat has two parts, separated by |

  • The first part is the date and time format, and

  • The second part is the manipulation string.

  • The second part is optional if there is no |.

"appearance": {
  "textBefore": "Please select one of the following to upload for $this.attr(submissionDate, date, 'MMMM YYYY | -2y -6M'); to $this.attr(submissionDate, date, 'MMMM YYYY | -2y -1M');:",
}

Status

Text Format

General

• With two text types: phone and masked

  • The template string has at most 3 parts.

  • The first part is the placeholder character.

  • The optional second part is the mask character.

  • The last part is the format string.

$this.attr(phoneNumber, phone, 'x|\\(xxx\\) xxx-xxxx');
=> (972) 555-1212

$this.attr(ssn, masked, 'x|*|***-**-xxxx'); 
=> ***-**-6789

Status

$date variable

General

• To display date information based on the current date and time

• Can be used as a string value (e.g., for query)

• $date('format | manipulation'); 

  • Current date displayed in a given format (https://momentjs.com/docs/#/displaying/)

  • y, M, d, h, m, s (year, month, day, hour, minute, second)

  • +, -, no operator

  • For example, '-2y' (2 years ago), '-6m' (6 months ago), '8h' (at 8 AM), etc.

Status