The Search widget creates a little grey circle marker when you click a result in the results list. It's a little grey dot so it's very hard to see. I'd like to make it a larger red dot symbol. I looked and couldn't see where it was being created in the widget.js - anyone else know or have customized this? I even searched the entire App by search in files for (77,77,77) after inspecting the DOM node for the circle symbol and couldn't see where this was coming from. I could probably override with CSS but that would be messy and I always try to do that as a last resort to avoid ramifications for other unintended elements.
<circle fill="rgb(77, 77, 77)" fill-opacity="1" stroke="rgb(255, 255, 255)" stroke-opacity="0.25" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="960" cy="485" r="4" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></circle>
Solved! Go to Solution.
In the widget.js find the _convertConfig function and make this change (lines 22 - 27):
_convertConfig: function(config) {
var sourceDefs = array.map(config.sources, lang.hitch(this, function(source) {
var def = new Deferred();
if (source && source.url && source.type === 'locator') {
var _source = {
locator: new Locator(source.url || ""),
outFields: ["*"],
singleLineFieldName: source.singleLineFieldName || "",
name: jimuUtils.stripHTML(source.name || ""),
placeholder: jimuUtils.stripHTML(source.placeholder || ""),
countryCode: source.countryCode || "",
maxSuggestions: source.maxSuggestions,
maxResults: source.maxResults || 6,
zoomScale: source.zoomScale || 50000,
useMapExtent: !!source.searchInCurrentMapExtent,
enableInfoWindow: esriLang.isDefined(this.config.showInfoWindowOnSelect) ?
!!this.config.showInfoWindowOnSelect : true,
showInfoWindowOnSelect: esriLang.isDefined(this.config.showInfoWindowOnSelect) ?
!!this.config.showInfoWindowOnSelect : true,
_zoomScaleOfConfigSource: source.zoomScale,
_panToScale: source.panToScale,
highlightSymbol: new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
20,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0, 255, 255, 0.0]),
2),
new Color([0, 0, 0, 1]))
};
...
In the widget.js find the _convertConfig function and make this change (lines 22 - 27):
_convertConfig: function(config) {
var sourceDefs = array.map(config.sources, lang.hitch(this, function(source) {
var def = new Deferred();
if (source && source.url && source.type === 'locator') {
var _source = {
locator: new Locator(source.url || ""),
outFields: ["*"],
singleLineFieldName: source.singleLineFieldName || "",
name: jimuUtils.stripHTML(source.name || ""),
placeholder: jimuUtils.stripHTML(source.placeholder || ""),
countryCode: source.countryCode || "",
maxSuggestions: source.maxSuggestions,
maxResults: source.maxResults || 6,
zoomScale: source.zoomScale || 50000,
useMapExtent: !!source.searchInCurrentMapExtent,
enableInfoWindow: esriLang.isDefined(this.config.showInfoWindowOnSelect) ?
!!this.config.showInfoWindowOnSelect : true,
showInfoWindowOnSelect: esriLang.isDefined(this.config.showInfoWindowOnSelect) ?
!!this.config.showInfoWindowOnSelect : true,
_zoomScaleOfConfigSource: source.zoomScale,
_panToScale: source.panToScale,
highlightSymbol: new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
20,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0, 255, 255, 0.0]),
2),
new Color([0, 0, 0, 1]))
};
...
Robert Scheitlin, GISP that works perfectly. example app You sir are a scholar and a gentleman.
Hi Kevin, I'm having the same issue. I made a copy of the search widget in the WebApp Builder dev edition v2.18, applied the changes suggested by Robert Scheitlin, GISP but it didn't work for me. the modified/custom widget didn't appear within the widgets list in WAB edit page. My experience in JS is new and very limited. Do I need to do changes somewhere else in the widget to be able see it in the widgets list?
Like @AfafAbbas1 I am having issues with the latest version of WebApp Builder to make changes to the symbol that is produced from the search widget. I don't have Dev edition, but am trying to make the edits in ArcGIS Assistant Beta (20211101.2). There is no "_convertConfig" only a "config" and I am unable to modify the symbol. Does anybody know if this is possible to do in ArcGIS Assistant? I am also new to JS and have limited experience making simple edits to web apps through ArcGIS Assistant.