Contents x
    Changing the color of the FLIGHT STATUS with the script
    • 29 Sep 2025
    • 1 Minute to read
    • Print
    • PDF
    Contents

    Changing the color of the FLIGHT STATUS with the script

    • Updated on 29 Sep 2025
    • 1 Minute to read
    • Print
    • PDF
    Article summary

    You may want different flight statuses to have their own font color, or background color. In this guide, we'll go through the steps of adding a script to Simpleway templates with a flight list that will do just that. As an example, we'll set different font colors for canceled and delayed flight statuses, and a separate color for all other statuses. 


    Flight statuses in our Simpleway CX system are referred to as "Remarks". The Remarks tab is providing an overview of available flight remark values as integrated from AODB or new custom values added by the administrator, hence, you may have different names for remarks under the Name column on the Remarks tab and in this case you would have to adjust the provided script to match the names of your own remarks. 

    Topics covered
    Templates tab
    • Row template design mode
    • Element script


    Sample screen:

    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.



    B) Click the Elements button and select the List element.
    C) Click the row button of the selected List element in the Format editor.
    D) Row templates sub-window
    1. Click the three dots button and select the Edit option. 





    		 
    E) Click on the Elements button and select the Dynamic label element of the Remark (status).

    F) Click the Edit element script button under Advanced section.



    G) Edit script sub-window
    1. Type or copy the provided script into the Edit script field.
    2. Click the Save button.

    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.

    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.
    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.

    I) Row templates subwindow 

    1. Select the row item.

    J) Click the Save & Publish button. Now the template is ready to be assigned and shown on your display.



    Was this article helpful?
    What's Next