topic Re: Change color of results fields in Enhanced Search Widget in Web AppBuilder Custom Widgets Questions

Change color of results fields in Enhanced Search Widget

SteveAdams — Thu, 29 Oct 2015 17:26:19 GMT

Making good progress on my Web App builder project...but still learning.

The enhanced search widget is really great, I appreciate the work on putting it together.

Is there a way or place I can change the color of the results field data that is returned?

The field label and the results are the same color.

Re: Change color of results fields in Enhanced Search Widget

RobertScheitlin__GISP — Thu, 29 Oct 2015 18:35:30 GMT

Steve,

Are you saying that you want to change the color of the text attribute name label to something different the the attribute value text? If so you would need to look at how the result list is created in the widgets List.js

Re: Change color of results fields in Enhanced Search Widget

SteveAdams — Thu, 29 Oct 2015 18:48:52 GMT

I think that is correct, for example I am searching an address to bring back the school they would attend based on that address, so the results that popup after searching would be:

School: Washington Elementary

The label "School:" and the value it returns Washington Elementary are all the same color, and kind of blend together. I was thinking of changing the Washington Elementary to a different color or bolding it or something to offset it from the label.

Re: Change color of results fields in Enhanced Search Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:08:37 GMT

Steve,

OK, since the Italics is not enough difference for you then you can just ass a line of code to the List.js and some css to the style.css for this:

css:

.search-list-item .attTitle {
  color:blue;
}

List.js (add line 10):

        if(item.rsltcontent !== ""){
          var attArr = item.rsltcontent.split('<br>');
          var attValArr;
          var label;
          var attTitle;
          var arrayLength = attArr.length;
          for (var i = 0; i < arrayLength; i++) {
            attValArr = attArr.split('</em>: ');
            attTitle = domConstruct.create("em");
            domClass.add(attTitle, "attTitle");

Re: Change color of results fields in Enhanced Search Widget

SteveAdams — Thu, 29 Oct 2015 19:29:49 GMT

Very nice! Thanks Robert! Worked perfectly.

Re: Change color of results fields in Enhanced Search Widget

AmitKokje2 — Wed, 18 Nov 2015 22:11:48 GMT

That is very helpful Robert.

The tweak formats the attributes in the widget's result area.

is it possible to replicate similar modification to the results in the pop-up window as well?

Amit

Re: Change color of results fields in Enhanced Search Widget

AmitKokje2 — Mon, 23 Nov 2015 01:58:20 GMT

Hi Robert,

Based on your response to Steve Adams, I managed to configure attributes in the results window.

If there is only one attribute to display as in this case, Tweaking of list.js works very well.

However if there are number of fields to display as resultant attributes, by default the configuration picks up last field / attribute (for example shape.length / area in most of the cases).

Is there way to configure the display attribute to a specific field? (Asset ID or Asset name for example).

Thus the result list will only display selected feature with one Attribute while popup will display full attributes, avoiding unnecessary duplications attributes.

Amit

Re: Change color of results fields in Enhanced Search Widget

RobertScheitlin__GISP — Mon, 23 Nov 2015 03:03:30 GMT

Amit,

I am not sure I understand. The code provided work for more than one attribute.

There is a popup only setting for each field you configure.

Re: Change color of results fields in Enhanced Search Widget

SteveAdams — Fri, 10 Mar 2017 02:55:02 GMT

This has been working great, but I am moving to 2.3 and it doesn't seem to work.

I have it working at ArcGIS Web Application

But on my test site, I can't seem to get the labels to change.

Re: Change color of results fields in Enhanced Search Widget

RobertScheitlin__GISP — Fri, 10 Mar 2017 04:52:24 GMT

Steve,

Result formatting was not part of the 1.3.0.2 version of the eSearch at your working app is running so you must have made some code edits to get that. In the 2.3 version of eSearch this is configurable using the widgets settings UI. Have you set the result formatting using the widgets settings UI?