const templates = new FeatureTemplates({
  container: "templatesDiv",
  layers: layers
});

Property Overview

Property Details

containerString|HTMLElement inherited

The ID or node representing the DOM element containing the widget. This property can only be set once.

declaredClassStringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

destroyedBoolean inherited

When true, this property indicates whether the widget has been destroyed.

filterEnabledBoolean

When true, displays the template filter.

Default Value:true

filterFunctionFilterFunction

Function can be defined to help filter template items within the widget. A custom function can be used to aid when searching for templates. It takes a function which passes in an object containing a name property of the template item.

Example:

// Filter and display templates only if their names contain the word `Street`
function myFilterFunction(filter) {
  let containsName = filter.name.includes("Street");
  return containsName;
}

// Create the FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  filterEnabled: false, // disable the default filter UI
  layers: [featureLayer], // in this example, one layer is used
  filterFunction: myFilterFunction
});

groupByString|GroupByFunction

It is possible to group template items. This can aid in managing various template items and how they display within the widget. The values are discussed below.

Type	Description	Example
layer	This is the default grouping. Groups template items by layers.
geometry	Groups template items by geometry type.
none	The widget displays everything in one list with no grouping.
GroupByFunction	Custom function that takes an object containing a FeatureTemplate and FeatureLayer.

Default Value:layer

Example:

// This example shows using a function to check if
// the layer title contains the word 'military'. If so,
// return a group of items called "All Military Templates"
function customGroup(grouping) {
  // Consolidate all military layers
  if (grouping.layer.title.toLowerCase().indexOf("military") > -1) {
    return "All Military Templates"
  }
// Otherwise, group by layer title
  return grouping.layer.title;
}

// Create the FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  layers: layers,
  groupBy: customGroup
});

idString inherited

The unique ID assigned to the widget when the widget is created. If not set by the developer, it will default to the container ID, or if that is not present then it will be automatically generated.

layersFeatureLayer[]

An array of Featurelayers to display within the widget. The order in which these layers are set in the array dictates how they display within the widget.

The widget is designed to only display layers that are enabled for editing. It will not display layers that are enabled to only edit attributes.

Example:

// The layers to display within the widget
let militaryUnits = new FeatureLayer({
  url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/2"
});

let militaryHostile = new FeatureLayer({
  url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6"
});

let layers = [militaryUnits, militaryHostile];

// Create FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  layers: layers
});

viewModelFeatureTemplatesViewModelautocast

The view model for this widget. This is a class that contains all the logic (properties and methods) that controls this widget's behavior. See the FeatureTemplatesViewModel class to access all properties and methods on the widget.

Method Overview

Method Details

classes(classNames){String}inherited

A utility method used for building the value for a widget's class property. This aids in simplifying CSS class setup.

Prior to version 4.7, there were various approaches towards setting CSS classes. These were dependent upon variables, such as whether the classes were:

• a single static class,
• multiple static classes, or
• dynamic classes.

This helper method takes all of these approaches into account and simplifies it to use one single pattern to accommodate these multiple approaches.

Parameter:

classNames Array<(String|String[]|Object)> repeatable The class names.

Returns:

Type	Description
String	The computed class name.

See also:

• Guide - Widget development (rendering)

Example:

// .tsx syntax showing how to set CSS classes while rendering the widget
render() {
  const dynamicIconClasses = {
    [CSS.myIcon]: this.showIcon,
    [CSS.greyIcon]: !this.showIcon
  };

  return (
    <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} />
  );
}

destroy()inherited

Destroys the widget instance.

on(type, listener){Object}inherited

Registers an event handler on the instance. Call this method to hook an event with a listener.

Parameters:

type String The name of event to listen for.

listener Function The function to call when the event is fired.

Returns:

Type	Description
Object	Returns an event handler with a remove() method that can be called to stop listening for the event. Property Type Description remove Function When called, removes the listener from the event.

See also:

• dojo/on

Example:

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

own(handles)inherited

Widget teardown helper. Any handles added to it will be automatically removed when the widget is destroyed.

Parameter:

handles WatchHandle|WatchHandle[] Handles marked for removal once the widget is destroyed.

postInitialize()inherited

This method is primarily used by developers when implementing custom widgets. Executes after widget is ready for rendering.

render(){Object}inherited

This method is primarily used by developers when implementing custom widgets. It must be implemented by subclasses for rendering.

Returns:

Type	Description
Object	The rendered virtual node.

renderNow()inherited

Renders widget to the DOM immediately.

scheduleRender()inherited

This method is primarily used by developers when implementing custom widgets. Schedules widget rendering. This method is useful for changes affecting the UI.

Type Definitions

FilterFunction(filterName){Boolean}

The filter used when setting the filterFunction property. It takes an object containing a name property of the template item and returns whether or not to include it.

Parameters:

filterName Object An object containing a name property. Specification: name String The name of the template item to filter.

Returns:

Type	Description
Boolean	Function is a predicate, to test each element of the array. Return true to keep item in the template widget, otherwise, false to remove it.

Example:

// Filter and display templates only if their names contain the word `Street`
function myFilterFunction(filter) {
  let containsName = filter.name.includes("Street");
  return containsName;
}

// Create the FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  filterEnabled: false, // disable the default filter UI
  layers: [featureLayer], // in this example, one layer is used
  filterFunction: myFilterFunction
});

GroupByFunction(grouping){String|Object}

The function used when setting the groupBy property. It is used to customize the grouping of template items. This can aid in managing various template items and how they display within the widget. This takes an object containing a template and a layer property.

Parameters:

Specification:

grouping Object An object containing the properties referenced below. Specification: layer FeatureLayer FeatureLayer instance referenced in layers property. template FeatureTemplate FeatureTemplate associated with the layer.

Returns:

Type	Description
String | Object	Groups consist of a group key and label. These are shown in the UI. If both the key and label are identical, return a string. Otherwise, return an object with key/name properties. This gives finer control of the groups.

Examples:

// This example shows using a function to check if
// the layer title contains the word 'military'. If so,
// return a group of items called "All Military Templates"
function customGroup(grouping) {
  // Consolidate all military layers
  if (grouping.layer.title.toLowerCase().indexOf("military") > -1) {
    return "All Military Templates"
  }
// Otherwise, group by layer title
  return grouping.layer.title;
}

// Create the FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  layers: layers,
  groupBy: customGroup
});

// group template items by layers.
// this function is as same as setting
// groupBy property to "layer" option.
function groupByLayer (grouping) {
  const group = {
    key: grouping.layer,
    name: grouping.layer.title
  };
  return group;
}

// Create the FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  layers: layers,
  groupBy: groupByLayer
});

Event Overview

{item: TemplateItem,template: FeatureTemplate}

Event Details

select

Fires when a template item is selected.

Properties:

item TemplateItem The selected template item.

template FeatureTemplate The feature template associated with the template item.

See also:

• Sample - Update FeatureLayer using ApplyEdits

Example:

// Listen for when a template item is selected
templates.on("select", function(evtTemplate) {
  // Access the selected template item's attributes
  attributes = evtTemplate.template.prototype.attributes;

  // Create a new feature with the selected template at cursor location
  const handler = view.on("click", function(event) {
    handler.remove(); // remove click event handler.
    event.stopPropagation(); // stop click event propagation
    if (event.mapPoint) {
      // Create a new feature with the selected template item.
      editFeature = new Graphic({
        geometry: event.mapPoint,
          attributes: {
            "IncidentType": attributes.IncidentType
          }
      });

      // Setup the applyEdits parameter with adds.
      const edits = {
        addFeatures: [editFeature]
      };
      featureLayer.applyEdits(params).then(function(editsResult) {
        if (editsResult.addFeatureResults.length > 0) {
          console.log("Created a new feature.")
        }
      });
    }
  });
});