Set font size using an if statement condition for FeatureLayer labelingInfo using arcgis javascript api 4.x

I am trying to set font size using an if statement condition for FeatureLayer labelingInfo using arcgis javascript api 4.x.

This is the feature layer:

    const myLayer = new FeatureLayer({
        title: "My Layer",
        objectIdField: "ObjectID",
        geometryType: "point",
        source: myFeatures,
        showLabels: true,
        labelingInfo: myLabelingInfo,
        outFields : ['*']
    });

This is the labelinginfo object:

    var myLabelingInfo = [
        {
            symbol: {
                type: "text",
                color: "white",
                font: {
                    family: "Arial",
                    size: "IIf($feature.customer.length == 1, 12, 8);", // 12,
                    weight: "bold",
                    decoration: "none"
                }
            }
        }
    ];

As you can see, I tried setting the font size with an if statement:

size: "IIf($feature.customer.length == 1, 12, 8);", // 12,

But that does not work. If I set it hard-coded is the only way it works:

size: 12,

My question is, how can I dynamically/programmatically change the font size?

Solution

One way of achieving what you want is to have as many LabelClass as symbols you need, and then using the property where to apply correctly to each feature.

In this case, you will have two LabelClass, one for each font size,

const createLabelSymbol = (fontSize) => ({
    symbol: {
        type: "text",
        color: "white",
        font: {
            family: "Arial",
            size: fontSize,
            weight: "bold",
            decoration: "none"
        }
    }
});

const myLayer = new FeatureLayer({
    title: "My Layer",
    objectIdField: "ObjectID",
    geometryType: "point",
    source: myFeatures,
    showLabels: true,
    labelingInfo: [
        {
            labelExpressionInfo: {expression: "EXPRESSION"},
            symbol: createLabelSymbol(12),
            where: "CONDITION"
        },
        {
            labelExpressionInfo: {expression: "EXPRESSION"},
            symbol: createLabelSymbol(8),
            where: "NOT CONDITION"
        }
    ],
    outFields : ['*']
});

Where EXPRESSION is an arcade label expression, and CONDITION is an sql where expression. Take a look at the example I put for you base on one of ESRI,

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Add labels to a FeatureLayer | Sample | ArcGIS Maps SDK for JavaScript
      4.27
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: black;
      }
    </style>

    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
      require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], (WebMap, MapView, FeatureLayer) => {
        const labelClassOpen = {
          // autocasts as new LabelClass()
          symbol: {
            type: "text", // autocasts as new TextSymbol()
            color: "green",
            backgroundColor: [213, 184, 255, 0.75],
            borderLineColor: "green",
            borderLineSize: 1,
            yoffset: 5,
            font: {
              // autocast as new Font()
              family: "Playfair Display",
              size: 12,
              weight: "bold"
            }
          },
          labelPlacement: "above-center",
          labelExpressionInfo: {
            expression: "$feature.MARKER_ACTIVITY"
          },
          where: "OPENSTATUS='open'"
        };
        const labelClassOther = {
          // autocasts as new LabelClass()
          symbol: {
            type: "text", // autocasts as new TextSymbol()
            color: "grey",
            backgroundColor: [213, 184, 255, 0.75],
            borderLineColor: "grey",
            borderLineSize: 1,
            yoffset: 5,
            font: {
              // autocast as new Font()
              family: "Playfair Display",
              size: 8,
              weight: "bold"
            }
          },
          labelPlacement: "above-center",
          labelExpressionInfo: {
            expression: "$feature.MARKER_ACTIVITY"
          },
          where: "NOT OPENSTATUS='open'"
        }

        const view = new MapView({
          container: "viewDiv",
          map: new WebMap({
            portalItem: {
              // autocasts as new PortalItem
              id: "372b7caa8fe340b0a6300df93ef18a7e"
            },
            layers: [
              new FeatureLayer({
                portalItem: {
                  // autocasts as new PortalItem
                  id: "6012738cd1c74582a5f98ea30ae9876f"
                },
                labelingInfo: [labelClassOpen, labelClassOther],
                renderer: {
                  type: "simple", // autocasts as new SimpleRenderer()
                  symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    color: "rgba(0,100,0,0.6)",
                    size: 3,
                    outline: {
                      color: [0, 0, 0, 0.1],
                      width: 0.5
                    }
                  }
                }
              })
            ]
          }),
          center: [-116.925, 34.2501],
          zoom: 12
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>