Basic viewer search tool configuration (placeholder and layer names)

[SébastienMartin]

Hi,

I just downloaded the latest version of the Basic Viewer app. I set the search tool to search in 2 features. In the "default.js" file, I set locati to "false" (I don't want to search with ESRI geocoder), and I added my search layers like this: 

  "searchLayers": [{
     "id": "Adresses_1330",
     "fields": ["Adr_Inc"],  
     "placeholder": "Adresse"
  },{
     "id": "Limites_de_lot_sans_remplissage_5853",
     "fields": ["NO_LOT"]
  }],‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The search itself works fine, but there's 3 annoying things I need to fix:

1. The placeholder won't appear, the search field is just blank on loading;
   
2. The search tool is set by default on the first layer, but I would like to have it set on "ALL" when the app load (I would also get rid of the layer selector and have it on "ALL" only);
   
3. If I can't get rid of the search layer selector, I'd like to be at least able to change the name of the layers in the menu to something more meaningfull to general public.
   

Anyone can help?

Thanks

[RobertScheitlin__GISP · Accepted solution]

Martin,

  In the source code for the basic viewer the SearchSources.js there is nothing there to configure a placeholder. But the change would be simple.

  "searchLayers": [{
     "id": "Adresses_1330",
     "fields": ["Adr_Inc"],  
     "placeholder": "Adresse",
     "name": "blah1"
  },{
     "id": "Limites_de_lot_sans_remplissage_5853",
     "fields": ["NO_LOT"],
     "placeholder": "Adresse",
     "name": "blah2"
  }],‍‍‍‍‍‍‍‍‍‍‍

Lines 8 - 13 below are the additions.

    _createConfiguredSources: function() {
      // Old configuration using layer/field picker
      array.forEach(this.configuredSearchLayers, lang.hitch(this, function(layer) {
        var mapLayer = this.map.getLayer(layer.id);
        if (mapLayer) {
          var source = {};
          source.featureLayer = mapLayer;
          if(layer.placeholder){
            source.placeholder = layer.placeholder;
          }
          if(layer.name){
            source.name= layer.name;
          }
          if (layer.fields && layer.fields.length && layer.fields.length > 0) {
            source.searchFields = layer.fields;
            source.displayField = layer.fields[0];
            source.outFields = ["*"];
            this.sources.push(source);
          }
        }
      }));
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SébastienMartin]

Amazing! Thanks Robert! One last thing, would you know any way to set the default search to 'ALL' and change its placeholder?

Thanks!

[RobertScheitlin__GISP]

Martin,

   Add "enableSearchingAll": true, to the search config object:

        "search": {
          "enableSearchingAll": true,
          "activeSourceIndex: : null,
          "enabled": false,
          "disablePlaceFinder": true,
          "hintText": "All Placeholder text",
          "layers": [
            ...
          ]
        }‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

[SébastienMartin]

Thanks again Robert! But I can't find this snippet in the files of the basic-viewer template (GitHub - Esri/Viewer: Viewer is a configurable application template that enables you to display an A... ) exepted in the "demoMap.js" file. But when I add the two lines there is no effect.

Should I add the whole snippet somewhere?

Thanks!

[RobertScheitlin__GISP]

Martin,

   Did you just copy and paste what I had above if so I had a syntax error on line 3

"activeSourceIndex: : null,

Should be:

"activeSourceIndex": null,

As far as not finding this portion of json, what is the parent element of your searchLayers object?

[SébastienMartin]

No, I noticed the typo! 

This template doesn't use a json file, the custimizations are in the default.js file. But I figured it out: in the SearchSources.js file, in the public methods you have: 

    createOptions: function() {
      return {
        map: this.map,
        sources: this._createSources(),
        activeSourceIndex: this._getActiveSource()
      };
    },‍‍‍‍‍‍‍

I replaced the "activeSourceIndex" parameter with "all" and I have the search tool set to all layer just like I wanted. Putting null there was selecting no layer at all (no placeholder shown either).

Thanks a lot for your devoted help Robert!

Cheers.