---
title: "Color Flight Status Text with a Script – Airport CX"
slug: "flight-status-color-change-air"
description: "Add an element script to a flight list row so cancelled and delayed remarks show in their own colors."
updated: 2026-08-26T10:35:24Z
published: 2026-08-26T10:35:24Z
canonical: "docs.simpleway.cloud/flight-status-color-change-air"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.simpleway.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Changing the color of the FLIGHT STATUS with the script

Different flight **statuses can stand out with their own font or background color** — for example, a distinct color for canceled and delayed flights, with a separate color for everything else. This guide walks through adding a script to Simpleway templates with a flight list to make that happen.

Flight statuses in Simpleway CX are referred to as "Remarks." The Remarks tab shows an overview of the available remark values, whether integrated from AODB or added as custom values by an administrator. Your remark names on the Remarks tab may differ from the ones used here, so you'll need to adjust the provided script to match your own remark names.

Topics covered:

Templates tab

- Row template design mode
- Element script

**Sample screen:**

![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/2022-09-14_10h56_06.png)

---

**TUTORIAL STEPS:**

| A) **Open the Simpleway template in Designer** 1. Open the Templates tab. 2. Select the Simpleway template which uses the List with flight status/remark element. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide1(205).JPG) |
| --- | --- |
| B) Click the **Elements** button and select the List element. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide2(200).JPG) |
| C) Click the row button of the selected ***List* element** in the Format editor. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide3(196).JPG) |
| D) **Row templates sub-window** Click the three dots button and select the Edit option. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide4(163).JPG) |
| E) Click on the **Elements** button and select the Dynamic label element of the Remark (status). | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide5(166).JPG) |
| F) Click the ***Edit element script*** button under *Advanced* section. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide6(134).JPG) |
| G) **Edit script sub-window** 1. Type or copy the provided script into the Edit script field. 2. Click the Save button. Replace the **setTextColor** function by **setBackground** if you wish to change the background color of the text instead. You may also want to use Hex color codes of your own to fit the design of the template theme. **Note**: In this example, we set different colors for flight status remarks based on their content. The code retrieves the flight remark, converts it to lowercase for consistent comparison, and then applies specific colors based on the remark text: If the remark is "canceled" or "cancelled," we apply the canceledColor. If the remark is "delayed," we apply the delayedColor. For any other status, we apply the defaultColor. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide7(140).JPG) ```javascript var remark = get("target.targetInfo.remark").toLowerCase(); var canceledColor = "#FF5733"; var delayedColor = "#FFF200"; var defaultColor = "#FFFFFF"; if (remark === "cancelled" \|\| remark === "canceled") { setTextColor(canceledColor); } else if (remark === "delayed") { setTextColor(delayedColor); } else { setTextColor(defaultColor); } ``` |
| H) Click *Save* again, and then exit the subdesigner using the *Back* button. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide8(114).JPG) |
| I) **Row templates subwindow** 1. Select the row item. | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide9(55).JPG) |
| J) Click the *Save & Publish* button. Now the template is **ready to be assigned and shown on your display.** | ![](https://cdn.document360.io/a3e67867-6316-451b-94ad-ec727ac9102a/Images/Documentation/Slide10(51).JPG) |

###