Custom popup actions per feature attribute | Sample

It is possible to customize Popup and PopupTemplate actions per feature attribute.

This sample demonstrates how to format custom actions specifically per selected feature using a Popup and a PopupTemplate. Although actions can be added via the actions property on either the Popup or PopupTemplate, the actions in this sample are specifically set within the featurelayer’s popupTemplate.

        actions: [
          {
            id: "find-brewery",
            icon: "web",
            title: "Brewery Info",
          },
        ],

Actions are styled by either using the icon or image property. If using icon, you must use a Calcite icon. If using image, you must provide a valid URL to an image that will be used as a background-image for the action. In this specific example, a Calcite icon called web is used.

How it works

First, watch for the Popup’s selectedFeature property. Next, set the action’s visible property to true if the feature’s website_url attribute isn’t null, otherwise set it to false.

      // Watch for when features are selected
      reactiveUtils.watch(
        () => popupComponent.selectedFeature,
        (graphic) => {
          if (graphic) {
            // Set the action's visible property to true if the 'website' field value is not null, otherwise set it to false
            const graphicTemplate = graphic.getEffectivePopupTemplate();
            graphicTemplate.actions.items[0].visible = graphic.attributes.website_url
              ? true
              : false;
          }
        },
      );

The Popup’s arcgisTriggerAction is watched using reactiveUtils.on. If the user clicked on the custom action with the ID of find-brewery, the code grabs the selected feature’s website_url attribute. If the value is not null, it opens up a new browser window with the URL stored in the website_url attribute.

      // Watch for the trigger-action event on the popup
      reactiveUtils.on(
        () => popupComponent,
        "arcgisTriggerAction",
        (event) => {
          if (event.detail.action.id === "find-brewery") {
            const attributes = popupComponent.selectedFeature.attributes;
            // Get the 'website' field attribute
            const info = attributes.website_url;
            // Make sure the 'website' field value is not null
            if (info) {
              // Open up a new browser using the URL value in the 'website' field
              window.open(info.trim());
            }
          }
        },
      );