Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: TemplatePicker
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/editing/TemplatePicker"], function(TemplatePicker) { /* code goes here */ });
Description
(Added at v2.0)
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.
The TemplatePicker must be created and started inside the onLoad event of the map or the layer for which it is associated.
Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new TemplatePicker(params, srcNodeRef) | Creates a new TemplatePicker object that displays a gallery of templates from the input feature layers or items. |
CSS
esri/dijit/editing/TemplatePicker | Download source
| Name | Description |
|---|---|
| grid | Define styles for the grid node that displays the templates. |
| groupLabel | Define styles for the group labels. Only applicable when grouping is enabled. |
| item | Define styles for the node that contains the template label and symbol. |
| itemLabel | Define styles for the template labels..itemLabel{color:#266A2E;} |
| itemSymbol | Define styles for the node that contains the template symbol. |
| selectedItem | Define styles for the node that contains the template symbol. |
| templatePicker | Define styles for the template picker. |
| tooltip | Define styles for the template tooltips. Only applicable when tooltips are enabled. |
Properties
| Name | Type | Summary |
|---|---|---|
| grid | DataGrid | Reference to the data grid used to display the templates. |
| tooltip | div | If tooltips are enabled the reference to the tooltip div. |
Methods
| Name | Return type | Summary |
|---|---|---|
| attr(name, value?) | None | Get or set the properties of the template picker. |
| clearSelection() | None | Clears the current selection. |
| destroy() | None | Destroys the template picker. |
| getSelected() | Object | Gets the selected item picked by the user. |
| startup() | None | Finalizes the creation of the template picker. |
| update() | None | Updates 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. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| selection-change | Fires when an item is selected or unselected in the template picker. |
Constructor Details
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.
The TemplatePicker must be created and started inside the onLoad event of the map or the layer for which it is associated.
The TemplatePicker must be created and started inside the onLoad event of the map or the layer for which it is associated.
Parameters:
< |
Required | FeatureLayers or items are required all other parameters are optional. See options list. |
< |
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");
...
});
|
params properties: < |
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. |
< |
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 |
< |
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. |
< |
Optional | Templates are grouped based on the containing feature layer. Default is true. Grouping is automatically disabled when items are specified instead of featureLayers. |
< |
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.
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" }
]; |
< |
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. |
< |
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. |
< |
Optional | Tooltip content contains the template name and description. Default is false. |
< |
Optional | HTML style attributes for the widget. Specify as css text or name: value hash. "width:400px; height:300px;"or
{width: "400px", height:"300px"}
|
< |
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. Added at v3.0 |
Property Details
<DataGrid
DataGridReference to the data grid used to display the templates.
Method Details
Get or set the properties of the template picker. See the dojo documentation for more details about this method.
Parameters:
< |
Required | Name of the attribute of interest. |
< |
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()
Destroys the template picker. Call destroy() when the widget is no longer needed by the application.
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 type:
ObjectSample:
require([
"esri/dijit/TemplatePicker", ...
], function(TemplatePicker, ... ) {
var widget = new TemplatePicker();
connect.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);
};
});
...
});
See also: on("selection-change")
Finalizes the creation of the template picker. Call startup() after creating the widget when you are ready for user interaction.
Sample:
templatePicker.startup();
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 ]
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:
require([
...
], function( ... ) {
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()