Hide Table of Contents
esri
Map
plugins
process
toolbars
workers
Class: TemplatePicker
[ AMD Module Require | Legacy Module Require ]

Description

Class added at v2.0
Load the TemplatePicker using one of the dojo.require statements below. See the Coding Guidelines help topic for details.
dojo.require("esri.dijit.editing.TemplatePicker-all");
or
dojo.require("esri.dijit.editing.TemplatePicker");

A template picker displays a gallery of templates from one or more feature layers. For each template, a symbol and a label is displayed. Users can select or deselect a symbol by clicking on the item.

Samples

Search for samples that use this class.

Class hierarchy

esri/dijit/editing/TemplatePicker

Constructors

NameSummary
new esri.dijit.editing.TemplatePicker(params,srcNodeRef)

Creates a new TemplatePicker object that displays a gallery of templates from the input feature layers or items.

CSS

NameDescription
gridDefine styles for the grid node that displays the templates.
groupLabelDefine styles for the group labels. Only applicable when grouping is enabled.
itemDefine styles for the node that contains the template label and symbol.
itemLabelDefine styles for the template labels.
.itemLabel{color:#266A2E;}
itemSymbolDefine styles for the node that contains the template symbol.
selectedItemDefine styles for the node that contains the template symbol.
templatePickerDefine styles for the template picker.
tooltipDefine styles for the template tooltips. Only applicable when tooltips are enabled.

Properties

NameTypeSummary
griddojox.grid.DataGridReference to the data grid used to display the templates
tooltipdivIf tooltips are enabled the reference to the tooltip div

Methods

NameTypeSummary
attr(name,value?)NoneGet or set the properties of the template picker.
clearSelection()NoneClears the current selection
destroy()NoneDestroys the template picker.
getSelected()ObjectGets the selected item picked by the user.
startup()NoneFinalizes the creation of the template picker.
update()NoneUpdates the templatePicker after modifying the properties of the widget

Events

[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. The event properties listed below are accessed from this event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.

Events

NameEvent PropertiesSummary
selection-change Fires when an item is selected or unselected in the template picker.
Constructor Details

new esri.dijit.editing.TemplatePicker(params,srcNodeRef)

Creates a new TemplatePicker object that displays a gallery of templates from the input feature layers or items. A symbol and label is displayed for each template. The symbol is defined by the template's feature type. The label is the template's name.

Arguments:
<Object> params Required FeatureLayers or items are required all other parameters are optional. See options list.
<DOMNode | String> srcNodeRef Required

HTML element where the TemplatePicker will be rendered. Specify the HTML element using the "id" or a reference to the element.

"templatePickerDiv"
or
require([
  "dojo/dom", ... 
], function(dom, ... ) {
  dom.byId("templatePickerDiv");
  ...
});
Parameters:
<Number> columns Optional Number of visible columns. Default is three. Specify "auto" to have the template picker automatically calculate the number of columns based on the number of rows. Note: "auto" has no effect when grouping is enabled.
<String> emptyMessage Optional Defines the text to be displayed when the template picker does not have any templates to display. Default value is: "Feature creation is disabled for all layers.". As of v2.8
<FeatureLayer[]> featureLayers Optional Array of input feature layers. The template picker displays the templates from each of the layer's in the array. Required to provide either featureLayers or items.
<Boolean> grouping Optional Templates are grouped based on the containing feature layer. Default is true. Grouping is automatically disabled when items are specified instead of featureLayers.
<Object[]> items Optional

An array of items described using the syntax below. Use this option if you want to display a collection of symbols in the template picker.

[{label:<String>,symbol: <esri.symbol.Symbol>,description: <String>}]

var items = [
  { label: "item 1", symbol: symbol, description: "description 1" },
  { label: "item 2", symbol: symbol, description: "description 2" },
  { label: "item 3", symbol: symbol, description: "description 3" },
  { label: "item 4", symbol: symbol, description: "description 4" }
];
<Number> maxLabelLength Optional Length of label description. Default is to display the entire label. If the specified maxLabelLength is less than the number of characters in the label description the description is truncated.
<Number> rows Optional Number of visible rows. Default is four. Specify "auto" to have the template picker automatically calculate the number of rows based on the number of columns. Note: "auto" has no effect when grouping is enabled.
<Boolean> showTooltip Optional Tooltip content contains the template name and description. Default is false.
<String> style Optional

HTML style attributes for the widget. Specify as css text or name: value hash.

"width:400px; height:300px;"
or
{width: "400px", height:"300px"}
<Boolean> useLegend Optional When true, the template picker displays map service legend swatches for feature layers created in selection mode that have an associated map service added to the map as a dynamic map service layer. When false, template picker displays downgraded symbology and the map displays the actual symbology (note this is the pre 3.0 default behavior). The default value is true. (As of v3.0)
Sample:

    widget = new esri.dijit.editing.TemplatePicker({

        featureLayers: layers,

        rows: "auto",

        columns: "auto",

        style: "width: 405px;"

      }, "templatePickerDiv");     

      
Property Details

<dojox.grid.DataGrid> grid

Reference to the data grid used to display the templates.

<div> tooltip

If tooltips are enabled the reference to the tooltip div.
Method Details

attr(name,value?)

Get or set the properties of the template picker. See the dojo documentation for more details about this method.
Arguments:
<String> name Required Name of the attribute of interest.
<Object> value Optional Value for the specified attribute.
Sample:
//get
var isTooltipEnabled = templatePicker.attr("showTooltip");

//set
templatePicker.attr("showTooltip", false);
templatePicker.attr("grouping", true);
templatePicker.attr("maxLabelLength", 0);
templatePicker.update();
See also: update

clearSelection()

Clears the current selection.

destroy()

Destroys the template picker. Call destroy() when the widget is no longer needed by the application.

getSelected()

Gets the selected item picked by the user. If the widget was initialized with FeatureLayer the properties of the returned object are in the following format:

{

  featureLayer: <FeatureLayer>,

  type: <FeatureType>,

  template: <FeatureTemplate>

}

If the widget was initialized with items the returned object will have the following properties:

{

  item: <Object>

}

Return value: Object
Sample:
dojo.connect(widget, "onSelectionChange", function() {
  var selected = widget.getSelected();      
  if (selected) {
    var featureLayer = selected.featureLayer;
    var type = selected.type;
    var template = selected.template;
    //get the selected symbol from the renderer via the template prototype
    var templateSymbol = selected.featureLayer.renderer.getSymbol(selected.template.prototype);
          
    console.log("layer = ", featureLayer && featureLayer.name, 
                ", type = ", type && type.name, 
                ", template = ", template && template.name);
  };
});

startup()

Finalizes the creation of the template picker. Call startup() after creating the widget when you are ready for user interaction.
Sample:
templatePicker.startup();

update()

Updates the templatePicker after modifying the properties of the widget.
Sample:

templatePicker.attr("showTooltip", false);

templatePicker.update();

See also: attr
Event Details
[ On Style Events | Connect Style Event ]

selection-change

Fires when an item is selected or unselected in the template picker. You can retrieve the selected item using the getSelected() method. (Added at v3.6)
Sample:
widget.on("selection-change", function() {
  var selected = widget.getSelected();
  if (selected) {
    var featureLayer = selected.featureLayer;
    var type = selected.type;
    var template = selected.template;         
  }
});
See also: getSelected