Fields in the resultList - Enhanced Search Widget version 2.5.1.2 for FlexViewer 2.5

[JeffPerkins]

Hi Robert,

Thanks for sharing the The Enhanced Search Widget version 2.5.1.2 for FlexViewer 2.5 .  My users greatly appreciate the enhancements.

I'm looking, however, to style the field names differently from the returned attributes.   How can I accomplish this?

Thanks again!

Jeff

[RobertScheitlin__GISP · Accepted solution]

Jeff,

   You posted to the wrong forum, it should be here:

http://forums.arcgis.com/forums/111-ArcGIS-Viewer-for-Flex

But that's OK just remember next time.

Changes have to be made to two files, SearchWidget.mxml replace the redlines in the displayFields function:

You can change the red lines below to meet your need like applying font tags and specifying font colors, etc.

                    function displayFields(fieldName:String, fieldXML:XML, field:Field):void                     {                         value = graphic.attributes[fieldName] ? String(graphic.attributes[fieldName]) : "";                                                  if (value){                              ......................................................... code truncated.................................................                                                  if (fieldName.toUpperCase() == queryTitleField.toUpperCase()){                             title = value;                             if (!title)                                 title = widgetTitle;                         }                         if (fieldName.toUpperCase() == queryMultiImgField.toUpperCase())                             multi = value;                         if (fieldName.toUpperCase() != "SHAPE_LENGTH" && fieldName.toUpperCase() != "SHAPE_AREA"                             && fieldName.toUpperCase() != queryMultiImgField.toUpperCase() && fieldName.toUpperCase() != queryTitleField.toUpperCase()){                             if(fieldXML){                                 if(fieldXML.@gridfieldonly[0] && fieldXML.@gridfieldonly[0] == "true" ||                                      fieldXML.@hyperlinkgridfieldonly[0] && fieldXML.@hyperlinkgridfieldonly[0] == "true"){                                  //ignore                                 }else{                                     if(!excludeLinkinResults.contains(fieldName.toUpperCase())){                                         if (fieldXML && fieldXML.@alias[0])                                             content += "<b>" + fieldXML.@alias[0];                                         else                                             content += "<b>" + featureSet.fieldAliases[fieldName];                                         content += ": </b><i>" + value + "</i><br>";                                     }                                 }                             }else{                                 if(fieldName != "oid"){                                     if(!excludeLinkinResults.contains(fieldName.toUpperCase())){                                         content += "<b>" + featureSet.fieldAliases[fieldName];                                         content += ": </b><i>" + value + "</i><br>";                                     }                                 }                             }                          }                     }                                             graphic.checkForMouseListeners = false;                                          ...............................................Code Truncated .............................................                 }                 return result;             }

And in the SearchResultItemRenderer.mxml add these two imports:

import flashx.textLayout.conversion.TextConverter;             import flashx.textLayout.elements.TextFlow;

and update the updateDisplayList function:

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void             {                 super.updateDisplayList(unscaledWidth,unscaledHeight);                                  if (searchResult)                 {                     if (lastResultSymbol !== searchResult.symbol)                     {                         if (resultIcon.numChildren > 0)                         {                             resultIcon.removeChildAt(0);                         }                         lastResultSymbol = searchResult.symbol;                         lastResultSwatch = lastResultSymbol.createSwatch(20, 20);                     }                     lContent.textFlow = TextConverter.importToFlow(searchResult.content, TextConverter.TEXT_FIELD_HTML_FORMAT);                     linkGroup.includeInLayout = linkGroup.visible = false;                     linkGroup.removeAllElements();                     resultIcon.addChild(lastResultSwatch);                     selected = searchResult.selected;                                          for(var l:int = 0; l < searchResult.links.length; l++){                         if(searchResult.links.link){                             var lImg:Image = new Image();                             lImg.height = lImg.width = 20;                             lImg.buttonMode = true;                             lImg.useHandCursor = true;                             lImg.addEventListener(MouseEvent.CLICK, showLink);                             lImg.source = (searchResult.links.icon != "")?searchResult.links.icon:"assets/images/w_link.png";                                  lImg.name = searchResult.links.link;                             //lImg.toolTip = searchResult.links.link;                             lImg.includeInLayout = lImg.visible = true;                             linkGroup.addElement(lImg);                         }                     }                     var rImg:Image = new Image();                     rImg.width = rImg.height = 20;                     rImg.buttonMode = rImg.useHandCursor = true;                     rImg.addEventListener(MouseEvent.CLICK, showRelate);                     rImg.includeInLayout = searchResult.relates != null;                     rImg.source = relateicon;                     rImg.toolTip = relatetooltip;                     rImg.visible = searchResult.relates != null;                     linkGroup.addElement(rImg);                                          if(searchResult.links[0].link)                         linkGroup.includeInLayout = linkGroup.visible = true;                     if(searchResult.relates != null)                         linkGroup.includeInLayout = linkGroup.visible = true;                     relateicon = (searchResult.relateicon != null)?searchResult.relateicon:"widgets/eSearch/assets/images/i_relate.png";                     relatetooltip = (searchResult.relatetooltip != null)?searchResult.relatetooltip:"Show relates";                 }             }

Add change this portion:

<s:VGroup width="100%" height="100%"                       verticalAlign="middle">                 <s:Label width="100%"                          fontWeight="bold"                          maxDisplayedLines="1"                          text="{searchResult.title}"/>                 <s:RichText id="lContent" fontWeight="normal"                             styleName="RecordText"                             width="100%"/>                 <!--<s:Label width="100%"                          fontWeight="normal"                          maxDisplayedLines="-1"                          text="{searchResult.content}"/>-->             </s:VGroup>

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

[JeffPerkins]

Perfect...  Works great!

Thanks again Robert for all you do!

[JasonNielsen]

I was trying to change up my search results style as mentioned above by Robert, and it seems to work correctly except i noticed that doesn't seem to update the first record after you do another search. It apppears to be some sort of refresh issue. If you mouse over the results after you do another search it updates all of the records but the first record on the second search you do still contains the attributes from the first search and will not refresh or change. An example is attached to help clarify my issue. I was wondering if anybody has ran into this. I Commented the areas that i changed in both files with a: //Added to style Attributes

In the first search i did I was using the value of: "JOHNSON" and the second search did was a value of: "CAT".

Also attached is my SearchWidget.mxml and SearchResultItemRenderer.mxml zipped up.

[JasonNielsen]

In testing this some more, it is whichever record you click on on the first search result will not automatically refresh on the second search and instead display the old attributes from the first search. If you use the scrollbar on the list if you have enough records and back to the record that wasn't updated it is then correctly.

[RobertScheitlin__GISP]

Jason,

   This seems to fix that issue SearchResultItemRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<!--
     ////////////////////////////////////////////////////////////////////////////////
     //
     // Copyright (c) 2010 ESRI
     //
     // All rights reserved under the copyright laws of the United States.
     // You may freely redistribute and use this software, with or
     // without modification, provided you include the original copyright
     // and use restrictions.  See use restrictions in the file:
     // <install location>/License.txt
     //
     ////////////////////////////////////////////////////////////////////////////////
-->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="false"
                click="itemrenderer_clickHandler(event)"
                minHeight="30"
                dataChange="itemrenderer1_dataChangeHandler(event)"
                mouseOut="itemrenderer_mouseOutHandler(event)"
                mouseOver="itemrenderer_mouseOverHandler(event)">

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.elements.TextFlow;
            
            import com.esri.ags.symbols.Symbol;
            
            import mx.controls.Image;
            import mx.events.FlexEvent;

            private const SEARCH_RESULT_CLICK:String = "searchResultClick";
            
            private const SEARCH_RESULT_RELATE_CLICK:String = "searchResultRelateClick";

            private const SEARCH_RESULT_MOUSE_OVER:String = "searchResultMouseOver";

            private const SEARCH_RESULT_MOUSE_OUT:String = "searchResultMouseOut";

            [Bindable]
            private var searchResult:SearchResult;

            private var lastResultSymbol:Symbol;
            private var lastResultSwatch:UIComponent;
            
            [Bindable]
            private var linkicon:String;
            
            [Bindable]
            private var relateicon:String;
            
            [Bindable]
            private var relatetooltip:String;
            
            /* override public function set data(value:Object):void
            {
                super.data = value;
                searchResult = data as SearchResult;
            }
            
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth,unscaledHeight);
                
                
            } */

            private function itemrenderer_clickHandler(event:MouseEvent):void
            {
                dispatchEvent(new Event(SEARCH_RESULT_CLICK, true)); // bubbles
            }

            private function itemrenderer_mouseOverHandler(event:MouseEvent):void
            {
                dispatchEvent(new Event(SEARCH_RESULT_MOUSE_OVER, true)); // bubbles
            }

            private function itemrenderer_mouseOutHandler(event:MouseEvent):void
            {
                dispatchEvent(new Event(SEARCH_RESULT_MOUSE_OUT, true)); // bubbles
            }

            private function showLink(event:MouseEvent):void
            {
                event.stopImmediatePropagation(); // don't dispatch ID_RESULT_CLICK since we don't want to zoom to feature
                navigateToURL(new URLRequest(event.currentTarget.name));
            }
            
            private function showRelate(event:MouseEvent):void
            {
                event.stopImmediatePropagation(); // don't dispatch SEARCH_RESULT_CLICK since we don't want to zoom to feature
                dispatchEvent(new Event(SEARCH_RESULT_RELATE_CLICK, true)); // bubbles
            }
            
            protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void
            {
                searchResult = data as SearchResult;
                
                if (searchResult)
                {
                    if (lastResultSymbol !== searchResult.symbol)
                    {
                        if (resultIcon.numChildren > 0)
                        {
                            resultIcon.removeChildAt(0);
                        }
                        lastResultSymbol = searchResult.symbol;
                        lastResultSwatch = lastResultSymbol.createSwatch(20, 20);
                    }
                    lContent.textFlow = TextConverter.importToFlow(searchResult.content, TextConverter.TEXT_FIELD_HTML_FORMAT);
                    linkGroup.includeInLayout = linkGroup.visible = false;
                    linkGroup.removeAllElements();
                    resultIcon.addChild(lastResultSwatch);
                    selected = searchResult.selected;
                    
                    for(var l:int = 0; l < searchResult.links.length; l++){
                        if(searchResult.links.link){
                            var lImg:Image = new Image();
                            lImg.height = lImg.width = 20;
                            lImg.buttonMode = true;
                            lImg.useHandCursor = true;
                            lImg.addEventListener(MouseEvent.CLICK, showLink);
                            lImg.source = (searchResult.links.icon != "")?searchResult.links.icon:"assets/images/w_link.png";     
                            lImg.name = searchResult.links.link;
                            //lImg.toolTip = searchResult.links.link;
                            lImg.includeInLayout = lImg.visible = true;
                            linkGroup.addElement(lImg);
                        }
                    }
                    var rImg:Image = new Image();
                    rImg.width = rImg.height = 20;
                    rImg.buttonMode = rImg.useHandCursor = true;
                    rImg.addEventListener(MouseEvent.CLICK, showRelate);
                    rImg.includeInLayout = searchResult.relates != null;
                    rImg.source = relateicon;
                    rImg.toolTip = relatetooltip;
                    rImg.visible = searchResult.relates != null;
                    linkGroup.addElement(rImg);
                    
                    if(searchResult.links[0].link)
                        linkGroup.includeInLayout = linkGroup.visible = true;
                    if(searchResult.relates != null)
                        linkGroup.includeInLayout = linkGroup.visible = true;
                    relateicon = (searchResult.relateicon != null)?searchResult.relateicon:"widgets/eSearch/assets/images/i_relate.png";
                    relatetooltip = (searchResult.relatetooltip != null)?searchResult.relatetooltip:"Show relates";
                }
            }
            
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>

    <!-- border/background rectangle -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            radiusX="4"
            radiusY="4">
        <s:stroke>
            <mx:SolidColorStroke alpha="{getStyle('borderAlpha')}"
                                 color="{getStyle('borderColor')}"
                                 weight="1"/>
        </s:stroke>
        <s:fill>
            <mx:SolidColor alpha="0.3"
                           alpha.hovered="0.8"
                           color.hovered="{getStyle('rollOverColor')}"
                           alpha.selected="1"
                           color.selected="{getStyle('rollOverColor')}"
                           color.normal="{getStyle('contentBackgroundColor')}"/>
        </s:fill>
    </s:Rect>
    <s:VGroup minHeight="30"
              paddingLeft="5"
              paddingRight="5"
              paddingBottom="2"
              paddingTop="4"
              width="97%"
              verticalAlign="middle">
        <s:HGroup width="100%" height="100%"
                  paddingBottom="3"
                  paddingLeft="3"
                  paddingRight="3"
                  paddingTop="3"
                  verticalAlign="middle">
            <mx:UIComponent id="resultIcon"
                            width="100%" height="100%"
                            maxHeight="20"
                            maxWidth="20">
                <mx:filters>
                    <mx:GlowFilter alpha="0.5"
                                   blurX="10"
                                   blurY="10"
                                   color="#000000"/>
                </mx:filters>
            </mx:UIComponent>
            <s:VGroup width="100%" height="100%"
                      verticalAlign="middle">
                <s:Label width="100%"
                         fontWeight="bold"
                         maxDisplayedLines="1"
                         text="{searchResult.title}"/>
                <s:RichText id="lContent" fontWeight="normal"
                            styleName="RecordText"
                            width="100%"/>
                <!--<s:Label width="100%"
                         fontWeight="normal"
                         maxDisplayedLines="-1"
                         text="{searchResult.content}"/>-->
            </s:VGroup>
        </s:HGroup>
        <s:HGroup gap="8" id="linkGroup" height="18"
                  verticalAlign="middle" horizontalAlign="center"
                  width="100%" includeInLayout="false" visible="false">
            
        </s:HGroup>
    </s:VGroup>
</s:ItemRenderer>

[JasonNielsen]

Thank you Robert. That did the trick.