topic Re: How to customize mouse over tip of Select widget in ArcGIS Web AppBuilder Questions

How to customize mouse over tip of Select widget

SuiHuang — Fri, 18 Sep 2020 00:29:16 GMT

Hi! Do you have idea about how to change the mouse over tip on the map, for the out-of-box Select widget?

As the attached image shows, when I use point geometry to select features on the map and turn on the "Select" button, I will see "Click to add a point" mouse over tip message. I want to change this message to another, but couldn't find a way to do that.

I am using Web AppBuilder Version 2.17.

I attempted to do it by searching the text "Click to add a point" in all the source code of the Web AppBuilder, including the site that I have created inside, and then changed all the strings that I can find. However, it doesn't work. I also delete the web browser cache, but doesn't help. I attempted to debug into the Select widget, and find that this mouse over tip is toggled on and off by the FeatureSetChooserForMultipleLayers.js module at line 165 (see screenshot). When I clicked the Select button, the jimuUtils.simulateClickEvent function is triggered. If I comment out this function call, the mouse over tip will not work. However, I couldn't go further to dig out how the text is setup, because I encounter the minified code soon after.

Seems I am stuck now. Do you give me some idea how to customize the text of the mouse over tip?

The reason I want to figure this out is because I am using the FeatureSetChooserForMultipleLayer.js to develop a customized widget, such that I need to change the text that comes with it.

Thank you!

Re: How to customize mouse over tip of Select widget

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:03:07 GMT

Sui,

That is because that text is a localized string in the JS API and is not specific to WAB. To change it you have to change the string in the JS API i18n!esri module. Replace the esriBundle.toolbars.draw.addPoint string with your text.

define(['dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'dojo/promise/all',
  'dijit/_WidgetsInTemplateMixin',
  'esri/symbols/SimpleMarkerSymbol',
  'esri/symbols/SimpleLineSymbol',
  'esri/symbols/SimpleFillSymbol',
  'esri/symbols/jsonUtils',
  'esri/Color',
  'jimu/BaseWidget',
  'jimu/WidgetManager',
  'jimu/dijit/ViewStack',
  'jimu/dijit/FeatureSetChooserForMultipleLayers',
  'jimu/LayerInfos/LayerInfos',
  'jimu/SelectionManager',
  'jimu/dijit/FeatureActionPopupMenu',
  'jimu/utils',
  './layerUtil',
  './SelectableLayerItem',
  './FeatureItem',
  'dojo/i18n!esri/nls/jsapi',
  'jimu/dijit/LoadingShelter'
],
function(declare, lang, html, array, on, all, _WidgetsInTemplateMixin, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol, SymbolJsonUtils, Color, BaseWidget, WidgetManager, ViewStack,
FeatureSetChooserForMultipleLayers, LayerInfos, SelectionManager, PopupMenu, jimuUtils, layerUtil,
SelectableLayerItem, FeatureItem, esriBundle) {
...

    onDeActive: function(){
      if (this.selectDijit.isActive()) {
        this.selectDijit.deactivate();
      }
      this._restoreSelectionSymbol();
      esriBundle.toolbars.draw.addPoint = this.defaultStr;
    },

    onActive: function(){
      this.defaultStr = esriBundle.toolbars.draw.addPoint;
      this._setSelectionSymbol();
      if (this.config.enableByDefault !== false && !this.selectDijit.isActive()) {
        this.selectDijit.activate();
      }
      esriBundle.toolbars.draw.addPoint = 'blah blah';
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to customize mouse over tip of Select widget

SuiHuang — Fri, 18 Sep 2020 21:13:18 GMT

Hi Robert,

Thank you for the explanation! The solution works for me.

In addition, I checked the network traffic of the site built from WAB, and find that it is downloading the JS API code from https://js.arcgis.com. This explains why I couldn't find the text to update in my hard drive.

Thank you!

Sui