Configure Visibility Toggles

Design Styles offer end users control over layer and label visibility. For example, in the following image, this Design Style allows users to toggle on and off Text and Facility ID, and further it allows end users to view layers based upon Work Function.

For this functionality to work:

• The attribute or label that drives the toggle needs to be included in the Design Style as seen in ArcGIS Pro. For example:

  • If toggling by an attribute such as Work Function Install/Remove, then Work Function needs to be symbolized for both Install and Remove for all components you want to toggle. In the following example, these six components have different symbols for Install and Remove. Further, “install” and “remove” are included in the symbol Keys.

    

  • If toggling a label, the label Key must include the recognized label modifier. The following example includes four label modifiers: name, ratedkva, wl, and material.

    

• The arcade script > dictionary_configuration needs to include the toggle attributes that are displayed on the Maps pane > Design subtab. This is, in short, the headers and buttons seen by the end user.

  • For example, the first image in this topic has three toggles: Text, Facility ID, and Work Function. In the dictionary_configuration, those three toggles look like the following:

    {
      "configuration": [{
          "name": "Text",
          "value": "OFF",
          "domain": ["ON", "OFF"],
          "info": "Indicates if the Text is rendered"
        }, {
          "name": "FacilityId",
          "value": "OFF",
          "domain": ["ON", "OFF"],
          "info": "Indicates if the FacilityId is rendered"
        }, {
          "name": "WorkFunction",
          "value": "ALL",
          "domain": ["ALL", "INSTALL", "REMOVE"],
          "info": "Indicates what components to render by work function"
        }
      ],

    The code entries include:

    • Name: This is the name of the toggle. It is seen by the end user.

      IMPORTANT: Do not use spaces. Type the name in “CamelCase” format where the first letter of each word is capitalized and there are no spaces between the words. The application renders it with spaces for the end user by looking for the uppercase letters.

    • Value: This is the default value for the toggle.

    • Domain: These are the choices (or buttons) clicked by the end user.

    • Info: This is just a note for you and other administrators to know what the toggle does. It is not seen in the application.

• The arcade script >dictionary_script needs to include the actionable code “behind” the dictionary_configuration. Or in other words, the dictionary_script informs the application what should happen when the end user clicks the toggles.

  • Using the same example above of Text, Facility Id, and Work Function, the dictionary_script could look like the following:

     // Labels toggle visibility
        if ($config.text == 'ON') {
            if (featureType == 'condb') {
                keys += "label-material;";
            }
        }
    
    // FacilityId toggle visibility
        if ($config.FacilityId == 'ON') {
            if (featureType == 'pole') {
                keys += "label-name;";
            }
        }
    
    // WorkFunction toggles visibility
    if (showFeature) {
        var featureType = Lower($feature.Type);
    
        if (!isempty(featureType)) {
    
            keys = featureType;
    
            var showDetails = false;
    
            if (!isempty($feature.WorkFunction)) {
                keys += '-' + Lower($feature.WorkFunction);
            }

For more ideas about visibility toggles, check out one of our samples. See Designer XI Samples for more information.