Multi-select input for text field in javascript attribute inspector

KeithGerhartz1 · ‎01-22-2015

I would like the user to be able to click on a textbox in the attributeinspector to pop open a multi-select control (e.g., list or checkbox) the results of which will be written to and displayed in the textbox. Has anyone done something like this that they would be willing to share? Thanks.

JakeSkinner · ‎01-22-2015

Hi Keith,

Similar to this example. The Geomodifications field contains a dropdown where you can select a value. This is due to the fact that the field has an attribute domain applied to it. The attribute inspector will automatically provide this dropdown for any field that contains a domain.

KeithGerhartz1 · ‎01-23-2015

Thanks for the response Jake. I apologize for not being clear.

I am wanting to go beyond the use of the standard domain implementation which is a combo box populated with domain values. Instead I want to replace the combobox with something like a DOJO checkedmultiselect. I want the user to be able to check as many of the items as they wish and write concatenated values to the associated textbox. I am thinking this would require a customfield in the attribute inspector and knowledge of how to reference attribute inspector fields and field events, none of which I am familiar with

My current approach is to add a button that raises a DOJO modal dialog which performs these tasks. However, modifying the attributeinspector would be a more elegant option. Just fishing for someone who may have done something like this.

KenBuja · ‎01-23-2015

I have created an application that uses a custom dialog to allow the user to set the different attributes of the selected features instead of using the Attribute Inspector. I went this way because the user can select multiple features that would have the new attributes assigned while the Attribute Inspector just does one feature at a time.

In my case, I just used a Select dijit, but that could be replaced by any other type of dijit. While the Attribute Inspector simplifies the task of modifying the attributes, it's not too difficult to do that with your own tools. In this application, each of the Selects corresponds to a field in the Feature Layer and they are populated through a Store. These are maintained in a separate module to make changes to the choices very easy.

The code itself to save these changes is fairly basic. It cycles through the selected features (featureSet), applies the selections to each field, and saves the edits.

array.forEach(featureSet, function (feature) {
    feature.attributes.Priority = registry.byId('cboPriority').get("value");
    feature.attributes.Management = registry.byId('cboManagement').get("value");
    feature.attributes.Criteria1 = registry.byId('cboCriteria1').get("value");
    feature.attributes.Criteria2 = registry.byId('cboCriteria2').get("value");
    feature.attributes.Criteria3 = registry.byId('cboCriteria3').get("value");
});
//use applyEdits!
layerFeatureLayer.applyEdits(null, featureSet, null, function () { console.log("Success!"); }, function (error) { console.log(error); });

KeithGerhartz1 · ‎02-03-2015

This was the approach that I ended up adopting.

Create customfield attached to editor widget that calls a function with field on focus which in turn displays a data entry form. Attributes are attached to the feature from the form.

1. Require

esri/dijit/editing/Editor

dijit/form/Button

dijit/form/Textarea

dojox/form/CheckedMultiSelect

2. Created a new Textarea digit that calls a function focus that displays a form..

	var notesDijit = new Textarea({
	onFocus: showNotesDialog,
	required: false
	});

3. Create a new editor and specify the use of the digit as a custom field within the fieldinfos declaration:

	var settings = {
	map: map,
	layerInfos: [{
	"featureLayer": treeInventoryLayer,
	'isEditable': true,
	'showDeleteButton': true,
	'showAttachements': true,
	'fieldInfos': [
	{ 'fieldName': 'TREETAG', 'isEditable': true, 'label': 'Tree Tag:' },
	{ 'fieldName': 'NOTES', 'isEditable': true, 'label': 'Notes:', 'customField': notesDijit }
	]
	}]
	}
	var params = {
	settings: settings
	};
	var editorWidget = new Editor(params);
	editorWidget.startup()

4, Create function to open notes form

	function showNotesDialog()
	{
	openNoteSelector.show();
	openNoteSelector._setStyleAttr("top: 50px;");
	addnotes.set("value", updateFeature.attributes.NOTES3);
	picknotes.set('value', []);
	picknotes._updateSelection();
	}

5. Add notes form to HTML

<label for="addnotes">Edit Existing Notes: </label><br />

<label for="addnotes">Select Standard Notes to Append: </label><br />

<option value="Upper branch dieback">Upper branch dieback</option>

<option value="Remove dead branches">Remove dead branches</option>

<option value="End weight reduction pruning">End weight reduction pruning</option>

<option value="Manage epicormic growth">Manage epicormic growth</option>

</select><br /><br />

<button data-dojo-type="dijit.form.Button" id="btnCancel" onClick="openNoteSelector.hide()">Cancel</button>

<button data-dojo-type="dijit.form.Button" id="btnClearNotes"">Clear</button>

</div>

</form>