dojo.require("esri.dijit.editing.TemplatePicker")
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
CSS
esri/dijit/editing/TemplatePicker | Download source
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
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
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
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.
Parameters:
<Object > params |
Required |
FeatureLayers or items are required all other parameters are optional. See options list. |
<Node | 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");
...
});
|
params
properties:
<Number | String > 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 | String > 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. Added at v3.0 |
Sample:
widget = new esri.dijit.editing.TemplatePicker({
featureLayers: layers,
rows: "auto",
columns: "auto",
style: "width: 405px;"
}, "templatePickerDiv");
Property Details
Reference to the data grid used to display the templates.
If tooltips are enabled the reference to the tooltip div.
Method Details
Get or set the properties of the template picker. See the dojo documentation for more details about this
method. Parameters:
<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();
Clears the current selection.
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>
}
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);
};
});
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();
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;
}
});
...
});
Fires when an item is selected or unselected in the template picker. You can retrieve the selected item using the getSelected() method.
Sample:
dojo.connect(widget, "onSelectionChange", function() {
var selected = widget.getSelected();
if (selected) {
var featureLayer = selected.featureLayer;
var type = selected.type;
var template = selected.template;
}
});