const ccWidget = new CoordinateConversion({
view: this.view,
container: element
});
const filt_formats = ccWidget.viewModel.formats.filter((format) => {
if (["basemap", "dms"].indexOf(format.name) === -1) {
return true;
} else {
return false;
}
});
filt_formats.forEach((format) => {
ccWidget.formats.remove(format);
});
ccWidget.render();
In the above code I am trying to limit the conversion options in the Coordinate Conversion widget. The formats are limited, and the conversions when the widget loads is a Collection of 1. The issues is that the <Select> element in the widget still contains all of the original format options. Updating the viewModel should trigger the Widget to render() so I have tried updating that as well, and I am calling render() to be sure.
ccWidget.viewModel.formats.remove(format);
The error I get in the browser states, "Uncaught Error: select had a option child removed, but there is now more than one. You must add unique key properties to make them distinguishable."
<select aria-controls="ccNode__list-item-0" aria-label="Select format" class="esri-select esri-coordinate-conversion__select-row" title="Select format"><option aria-label="xy" title="xy">XY</option><option aria-label="basemap" value="basemap">BASEMAP</option><option aria-label="dms" value="dms">DMS</option><option aria-label="dms" value="dms">DMS</option><option aria-label="mgrs" value="mgrs">MGRS</option><option aria-label="usng" value="usng">USNG</option><option aria-label="utm" value="utm">UTM</option></select>
I don't think I should modify the domNode, but the widget render() should update it. What am I missing here?
This will work
var ccWidget = new CoordinateConversion();
var format = ccWidget.formats.filter(function (format) {
return format.name === "xy";
});
var coordinateConversionWidget = new CoordinateConversion({
view: view,
formats: format,
multipleConversions: false
});
Has anyone gotten this to work? It does not for me.
Hi @rogenjh, this is a good question. It looks like we can use watchUtils to wait until the formats are ready, since formats now starts empty.
Code snippet with just BASEMAP and XY:
watchUtils.whenOnce(ccWidget, "formats.length", () => {
ccWidget.formats = ccWidget.formats.filter(f => {
return f.name === "xy" || f.name === "basemap"
});
});
test-app with just BASEMAP and XY:
https://codepen.io/noash/pen/XWMmmza?editors=1000
Wow. That worked perfect for me. What was screwing up the initial solution was that formats begin empty now, I suppose. Thanks for your help!
Glad to hear it, and you're quite welcome. Feel free to mark the solution so other users know the question has been answered.