Select to view content in your preferred language

Web AppBuilder 1.2 Search/Geocoder widget color/style question

8180
29
Jump to solution
09-21-2015 02:24 PM
AdamGebhart
Frequent Contributor

Can anybody tell me how to either a) change the color of; or b) change the opacity of the highlight/fill color for the selected result in the Search/Geocoder widget?  I don't mean how the results appear in the Search widget results list, rather how the feature appears in the map when I select it from the results list and the map zooms to the feature.  In case it matters my searches are all for polygons.

I can open the Inspector Window in Firefox and see:

Search_fill2.png

But I don't see where I can change these settings.  Are they inherited from the ArcGIS API for Javascript?  If so, can I override the color or opacity?

Tags (2)
0 Kudos
29 Replies
RobertScheitlin__GISP
MVP Emeritus

Benjamin,

   The 2.3 version here:

https://community.esri.com/thread/165739#comment-663892 

Works fine in 2.4.

DavidColey
Honored Contributor

Hi Robert -  it looks like there's been some fairly significant changes to the Search's widget.js between version 2.5 and 2.6.   I'm no longer able to add a highlight graphic by calling the jsonUtils as part of the _convertConfig function here:

var convertedSource = {
 featureLayer: flayer,
 outFields: ["*"],
 searchFields: fNames,
 displayField: source.displayField || "",
 exactMatch: !!source.exactMatch,
 name: jimuUtils.stripHTML(source.name || ""),
 placeholder: jimuUtils.stripHTML(source.placeholder || ""),
 maxSuggestions: source.maxSuggestions || 6,
 maxResults: source.maxResults || 6,
 zoomScale: source.zoomScale || 50000,
 infoTemplate: template,
 useMapExtent: !!source.searchInCurrentMapExtent,
 _featureLayerId: source.layerId,
 highlightSymbol: jsonUtils.fromJson(source.highlightSymbol) //to add highlight symbol from json config
 };

Line 15 equating to about line 327 in the original.  Also, I've noticed where in 2.6 the 'show,hide' callback has been completely commented out, seemingly preventing the graphic to persist after infoWindow close

// this.own(
 // on(this.map.infoWindow, 'show,hide', lang.hitch(this, function() {
 // if (this.searchDijit &&
 // this.map.infoWindow.getSelectedFeature() ===
 // this.searchDijit.highlightGraphic) {
 // this.searchDijit.clearGraphics();
 // query('li', this.searchResultsNode).removeClass('result-item-selected');
 // }
 // }))
 // );

around 181-190 in the original.  In 2.5 I had previously commented out just the

this.searchDijit.clearGraphics();

portion in order to persist the graphic on screen.  If you have ideas on where to now add highlight changes that would be great-

Thanks

David

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

David,

   Strange I tested the 2.3 version of the code: https://community.esri.com/thread/165739#comment-663892 

in WAB 2.6 and it still worked fine.

0 Kudos
DavidColey
Honored Contributor

Huh, ok. So are you saying you overwrote the current 2.6's Search widget.js with a 2.3 version that contains the changes (json.utils in the declare, highlight property added, symbology json in the config)?  Or did you apply the same changes to the 2.6 version?  I'm finding I can't exactly do that because of the changes in the 2.6 version . . .  

I suppose I could just try adding the 2.5 version with the changes?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

David,


   I applied the same changes to 2.6. I am not sure about any additional changes you are making but the one I outline all work fine for 2.6

0 Kudos
DavidColey
Honored Contributor

Ok thanks. At this point I'm just looking at the highlight change as well.  I'll keep looking . . . 

0 Kudos
DavidColey
Honored Contributor

OK I believe I figured it out at least for the moment:

1: If you import a 2.5 (or 2.3, 2.4) project that has the changes for highlight color and/or graphic persist after infoWindow close, those changes are honored in 2.6.

2. If you add the 2.5 (or 2.3, 2.4) Search's widget.js containing the changes and your config contains the correct json symbology, the changes are honored in 2.6.

BUT: if you start a new app at 2.6, the (breaking) changes to the 2.6 Search widget.js file are such that the highlight symbol for the source will not change simply by adding the jsonUtils define and then adding highlightSymbol property to the _convertedSource var.  Doesn't work, at least for me.

0 Kudos
AdamGebhart
Frequent Contributor

Robert Scheitlin, GISP

It's me again.  Have you tried the same changes you listed in the older posts in 2.7 or 2.8?  I haven't been able to get them to take in either version.  I ended up copying and pasting the Search widget.js from 2.4 to get the update to work. 

I see your post from 11/17/17 indicates the same changes worked in 2.6.  I didn't download 2.5 or 2.6 so I don't know if there was a modification to (Search) widget.js between 2.5-6 and 2.7 or not.

0 Kudos
AdamGebhart
Frequent Contributor

Thank you very much.  I hadn't seen that.

0 Kudos