TypeScript Patterns in Lowgile

Lowgile expressions, workflows, services, integrations, and console scripts commonly use standard TypeScript syntax.

This document explains several common coding patterns frequently used throughout the Lowgile platform development environment.

For comprehensive language documentation, refer to the official TypeScript documentation.

1. Arrow functions

Arrow functions are a compact way to define functions in JavaScript and TypeScript.

They are commonly used when passing small pieces of logic into methods such as .map(), .filter(), or .forEach().

💡

Insight

The example below also uses the spread operator (…). If you are not familiar with this syntax yet, read the short explanation under Using the spread operator inside arrow functions before working through the example in detail.

For example, consider the following code snippet:

const materials = This.Materials.getEntryList().map(
  material => ({ ...material, id: undefined })
)

return materials

The arrow function (=>):

material => ({ ...material, id: undefined })

uses the same logic as this traditional function:

function(material) {
  return {
    ...material,
    id: undefined
  }
}

in other words, for each item in the list:

1. .map() passes the current object into the function as material,
2. The function creates a copy of the object,
3. The id property is replaced with undefined, and
4. The transformed object is returned into the new list.

The final result is a new array containing transformed versions of the original objects.

Using the spread operator inside arrow functions

The spread operator (...) copies properties from one object into another object.

For example:

const material = {
  id: 1,
  name: "Steel"
}

const updatedMaterial = {
  ...material,
  category: "Metal"
}

return updatedMaterial

The returned result would be:

{
  "id": 1,
  "name": "Steel",
  "category": "Metal"
}

💡

Insight

The category: “Metal” property is added after …material in the function that creates the updatedMaterial object, so it is included as a new property in the returned object.

The spread operator is also commonly used when duplicating existing records while overriding specific properties, such as clearing the original database identifier before creating a new record.

For example:

const updatedMaterial = {
  ...material,
  id: undefined
}

In this case, the spread operator copies all existing properties from material, and replaces the id property with undefined.

2. The .map() function

The .map() function processes every object in an array and returns a new transformed array.

For example:

const names = ["Steel", "Aluminium", "Copper"]

const upperNames = names.map(name => name.toUpperCase())

return upperNames

The returned result would be:

JSON
[
  "STEEL",
  "ALUMINIUM",
  "COPPER"
]

3. Template strings

Template strings allow dynamic values to be inserted into strings using ${}.

For example:

const material = {
  name: "Steel",
  category: "Metal"
}

return `${material.name} (${material.category})`

The returned result would be:

Steel (Metal)

📌

Attention

Template strings must be wrapped in backticks (`) instead of quotation marks (” or ’).

The ${} syntax only renders correctly inside template strings wrapped in backticks.

4. Strict equality operator

The strict equality operator (===) compares both value and type.

For example:

screen.request.status === "Approved"

This expression returns true only if the value of screen.request.status exactly matches "Approved".

🧩

Principle

Rather use the boolean value directly when checking whether a boolean value is true or false.

For example:

• screen.request.isApproved checks whether the value is true, and
• !screen.request.isApproved checks whether the value is false.

5. Async and await

async and await are standard JavaScript and TypeScript keywords used when working with asynchronous operations.

An asynchronous operation does not return its final result immediately. Instead, it returns a Promise, which represents a result that will become available later.

• The await keyword waits for the asynchronous operation to complete before the code continues.

• The async keyword is used when defining a function that contains asynchronous code.

For example:

async function loadMaterials() {
  const response = await This.Services.GetMaterials.execute()

  return response
}

In this code snippet:

1. async function loadMaterials() defines an asynchronous function named loadMaterials,
2. This.Services.GetMaterials.execute() starts an asynchronous service call,
3. The service call returns a Promise,
4. await waits for the service call to finish, and
5. The final result is assigned to response.

💡

Insight

In many Lowgile expressions, button handlers, and scripts, the surrounding asynchronous context is provided by the platform, so you usually see await without writing the async function wrapper yourself.

6. Lowgile runtime objects

Lowgile provides several runtime objects that allow expressions, workflows, services, and console scripts to access application data and platform functionality during execution.

Runtime object	Purpose
This	References objects and resources in the current Lowgile module context.
screen	Accesses screen variables and runtime state.
Sys	Accesses Lowgile platform services and runtime functionality.
$option	Accesses the current dropdown option during dropdown rendering.

💡

Insight

Capitalized This is a Lowgile module reference. Lowercase this is the standard JavaScript and TypeScript keyword for the current runtime object. They are case-sensitive and cannot be used interchangeably.

See This vs this in Lowgile or examples and context-specific usage.

The availability of these objects depends on the runtime context in which the expression or code executes.