Create a feature action in your widget

A feature action is a piece of code that is requested to execute on one feature or a set of features. ArcGIS Web AppBuilder provides some out-of-the-box feature actions, such as Zoom To, Export to CSV File, and View in Attribute Table. Additionally, you can create your custom feature action by extending the BaseFeatureAction class. The following steps demonstrate how to create a feature action in the Demo widget that shows the count of vertexes for a selected feature set.

Note:

The complete code is available in the Demo widget. Access the following URL to play the feature action in the Demo widget:

http://<your host machine>:3344/webappviewer/?config=sample-configs/config-demo.json

Create a feature action class

1. Browse to the ~\client\stemapp\widgets\samplewidgets folder under the ArcGIS Web AppBuilder installation.
2. Under the Demo widget folder, create a new text file named ShowVertexFeatureAction.js.
3. Copy and paste the following code snippet into the file. It creates a feature action class by extending the BaseFeatureAction class.

   define([
     'dojo/_base/declare',
     'jimu/BaseFeatureAction',
     'jimu/WidgetManager'
   ], function(declare, BaseFeatureAction, WidgetManager){
     var clazz = declare(BaseFeatureAction, {
   
       iconFormat: 'png',
   
       isFeatureSupported: function(featureSet){
         return featureSet.features.length > 0 && featureSet.features[0].geometry.type !== 'point';
       },
   
       onExecute: function(featureSet){
         WidgetManager.getInstance().triggerWidgetOpen(this.widgetId)
         .then(function(myWidget) {
           var vertexCount = 0;
           featureSet.features.forEach(function(f){
             f.geometry.rings.forEach(function(r){
               vertexCount += r.length;
             });
           });
           myWidget.showVertexCount(vertexCount);
         });
       }
   
     });
     return clazz;
   });

• There are two important methods regarding a feature action: isFeatureSupported() and onExecute(). Both of them accept a feature set parameter and an optional layer parameter. The former is invoked to test whether the feature action is supported for the given feature set. Make sure it is returned true or a promise that resolves true if the feature action is supported. The latter is invoked when the feature action is executed. The type of feature set parameter is the FeatureSet class. See FeatureSet class for details. In this example, the feature action does not support point feature sets.
• If a feature action in a widget intends to open another widget, for example, the Directions to here feature action in the Select widget is to invoke the Directions widget, use the WidgetManager.getInstance().triggerWidgetOpen(this.widgetId) method.

Declare the feature action in the widget manifest

Open Demo/manifest.json and add the featureActions property.

 "featureActions": [{
    "name": "ShowVertex",
    "uri": "ShowVertexFeatureAction"
  }]

Label the feature action

Open the string.js file in the Demo/nls folder, and add the following string:

  _featureAction_ShowVertex: "Show Vertex Count",

Note:

The pattern of the string key is _featureAction_<feature action name>.

Provide an icon for the feature action

There are two states associated with each feature action: the normal state and the mouse over state. As a result, two images are required for each action.

1. Copy your image files into the Demo/images folder and name them ShowVertex_default.png and ShowVertex_hover.png.

   The name pattern for the image file is <feature action name>_<state>.<image format>. The default image is for the normal state, and hover is for the mouse over state. In addition to PNG, the image format can be JPG or SVG.

2. Modify the iconFormat property in the feature action class file depending on your image format.

Display the count number

1. Open the Widget.js file in the Demo folder and add the following function:

   showVertexCount: function(count){
         this.vertexCount.innerHTML = 'The vertex count is: ' + count;
       }

2. Open the Widget.html file and add the following line:

   <div data-dojo-attach-point="vertexCount"></div>

Use the feature action

You can use the feature action as an out-of-the-box function or by making calls to the FeatureActionManager API.

For out-of-the-box functions, the feature actions are available in the Select widget, map pop-up, and the result of the Query widget. Using the Select widget as an example, after selecting features, you can click the ellipsis button to see the list of feature actions.

The most important method in the FeatureActionManager API is getSupportedActions(). When you get a feature or feature set, call this method to get all supported feature actions as shown in the following code snippet. You can display them in various formats , such as a link, button, or menu.

FeatureActionManager.getInstance().getSupportedActions(myFeatureSet).then(lang.hitch(this, function(actions){
          //create some DOMs to show the actions
}));