require(["esri/widgets/FeatureTemplates"], function(FeatureTemplates) { /* code goes here */ });
Class: esri/widgets/FeatureTemplates
Inheritance: FeatureTemplates Widget Accessor
Since: ArcGIS API for JavaScript 4.10

The FeatureTemplates widget is part of the overall editing workflow. Its main purpose is to display templates from one or more feature layers. In addition to displaying feature layer templates, it is also possible to filter and group templates for an easier editing experience. The widget listens for an end user to select a specific template in the widget. Its select event is fired and the resulting template information is returned. This widget can be used in conjunction with FeatureLayer.applyEdits to enable an end user to update one of its feature layers.

featureTemplates

For information about gaining full control of widget styles, see the Styling topic.
See also:
Example:
const templates = new FeatureTemplates({
  container: "templatesDiv",
  layers: layers
});

Constructors

new FeatureTemplates(properties)
Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

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

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
NameTypeSummaryClass
String|HTMLElement

The ID or node representing the DOM element containing the widget.

more details
more detailsWidget
String

The name of the class.

more details
more detailsAccessor
Boolean

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

more details
more detailsWidget
Boolean

When true, displays the template filter.

more details
more detailsFeatureTemplates
FilterFunction

Function can be defined to help filter template items within the widget.

more details
more detailsFeatureTemplates
String

Text used to filter items.

more details
more detailsFeatureTemplates
String|GroupByFunction

It is possible to group template items.

more details
more detailsFeatureTemplates
String

The unique ID assigned to the widget when the widget is created.

more details
more detailsWidget
String

The widget's label.

more details
more detailsWidget
FeatureLayer[]

An array of Featurelayers to display within the widget.

more details
more detailsFeatureTemplates
FeatureTemplatesViewModel

The view model for this widget.

more details
more detailsFeatureTemplates

Property Details

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

declaredClass Stringreadonly inherited

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

destroyed Boolean inherited

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

filterEnabled Boolean

When true, displays the template filter.

featureTemplatesFilter

Default Value:true
filterFunction FilterFunction

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.

featureTemplatesFilterFunction

Example:
// Filter and display templates only if their labels contain the word `Street`
function myFilterFunction(filter) {
  let containsName = filter.label.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
});
filterText String

Text used to filter items.

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.

TypeDescriptionExample
layerThis is the default grouping. Groups template items by layers.featureTemplatesGroupByLayer
geometryGroups template items by geometry type.FeatureTemplatesGroupByGeometry
noneThe widget displays everything in one list with no grouping.featureTemplatesGroupByLayer
GroupByFunctionCustom function that takes an object containing a FeatureTemplate and FeatureLayer.FeatureTemplatesGroupByCustomGroupFunction
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
});

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.

Since: ArcGIS API for JavaScript 4.11

The widget's label.

This property is useful whenever the widget is controlled by another one (e.g. Expand)

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
});

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

NameReturn TypeSummaryClass
String

A utility method used for building the value for a widget's class property.

more details
more detailsWidget

Destroys the widget instance.

more details
more detailsWidget
Object

Registers an event handler on the instance.

more details
more detailsWidget

Widget teardown helper.

more details
more detailsWidget

This method is primarily used by developers when implementing custom widgets.

more details
more detailsWidget
Object

This method is primarily used by developers when implementing custom widgets.

more details
more detailsWidget

Renders widget to the DOM immediately.

more details
more detailsWidget

This method is primarily used by developers when implementing custom widgets.

more details
more detailsWidget

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.

Parameter:
classNames (String|String[]|Object)[]
repeatable

The class names.

Returns:
TypeDescription
StringThe computed class name.
See also:
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:

A event type, or an array of event types, to listen for.

listener Function

The function to call when the event is fired.

Returns:
TypeDescription
ObjectReturns an event handler with a remove() method that can be called to stop listening for the event(s).
PropertyTypeDescription
removeFunctionWhen called, removes the listener from the event.
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 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:
TypeDescription
ObjectThe 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:
TypeDescription
BooleanFunction 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 labels contain the word `Street`
function myFilterFunction(filter) {
  let containsName = filter.label.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:

FeatureLayer instance referenced in layers property.

FeatureTemplate associated with the layer.

Returns:
TypeDescription
String | ObjectGroups 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

NameTypeSummaryClass
{item: TemplateItem,template: FeatureTemplate}

Fires when a template item is selected.

more details
more detailsFeatureTemplates

Event Details

select

Fires when a template item is selected. This occurs when the associated view model's select method is called.

Properties:

The selected template item.

The feature template associated with the template item.

See also:
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.")
        }
      });
    }
  });
});

API Reference search results

NameTypeModule
Loading...