topic Re: Change widget labels or tooltips for on-screen widgets in ArcGIS Web AppBuilder Questions

Change widget labels or tooltips for on-screen widgets

NickHarvey — Wed, 30 Sep 2015 19:47:05 GMT

Hi All - I'm trying to set the tooltips or labels for my on-screen widgets in WAB DE 1.2....Two in particular that I'm unable to change/set are the Home Button and the My Location button. There are label settings in the main config.json (ex: "label": "Home Button",) for the on-screen widgets, but changing them, restarting WAB and clearing the cache doesn't appear to help)...It appears that my in-panel widgets can be set in each nls\strings.js (For example I can change the tool tip / label for the Legend widget to "My Legend" with success). Any assistance, tips appreciated.

thanks!

-Nick

Re: Change widget labels or tooltips for on-screen widgets

RobertScheitlin__GISP — Thu, 01 Oct 2015 02:07:54 GMT

Nick,

I'm trying to set the tooltips or labels for my on-screen widgets in WAB DE 1.2

So which are you wanting the tooltip or the label? Not sure what the point in changing the label. The tooltip for these widgets are controlled by the JS API esri.bundle strings. There is no easy way to change the tooltips but you can modify the Widget.js for each and require ''dojo/i18n!esri/nls/jsapi" and use the esriBundle var to change the tooltip.

esriBundle.widgets.homeButton.home.title = "Full Extent";

Default API Strings | Guide | ArcGIS API for JavaScript

Re: Change widget labels or tooltips for on-screen widgets

NickHarvey — Sat, 11 Dec 2021 15:38:26 GMT

Thanks Robert - That's correct, the tooltips are what I'm after. The text in the Legend and Layer List nls/strings.js I have changed (changing _widgetLabel: "Legend" to "Nick's Legend" for example), it was the only reason I used the term "label" in my question. I suppose tooltips are also set using "title" (?). I'm having difficulty finding direct references to "Tooltips" anywhere within the WAB 1.2 widget folder contents (?). Any tips appreciated on that....

The Home Button example you pointed out works great (thanks, below). However, I can't get the LocateButton working with the same method (2nd below)...Use another method?. Thanks in advance

-Nick

Home Button (below)

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'jimu/BaseWidget',
    "dojo/i18n!esri/nls/jsapi",
    "esri/dijit/HomeButton",
    "esri/geometry/Extent",
    'dojo/_base/html',
    'dojo/dom-construct',
    'dojo/topic',
    'dojo/on'
  ],
  function(
    declare,
    lang,
    BaseWidget,
    esriBundle,
    HomeButton,
    Extent,
    html,
    domConstruct,
    topic,
    on) {

  esriBundle.widgets.homeButton.home.title = "Intial Extent of Nick's Map";

LocateButton Test (below)

define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    "esri/dijit/LocateButton",
    "dojo/i18n!esri/nls/jsapi",
    'dojo/_base/html',
    'dojo/on',
    'dojo/_base/lang',
    'jimu/dijit/Message',
    'dojo/touch'
  ],
  function(
    declare,
    BaseWidget,
    LocateButton,
    esriBundle,
    html,
    on,
    lang) {

 esriBundle.widgets.LocateButton.zoomLocateButton.title = "Find Nick's Location";

Re: Change widget labels or tooltips for on-screen widgets

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:38:28 GMT

Nick,

If you look at the code in the MyLocation widget you will notice that the LocateButton dijit is never really added to the HTML so you will never see the LocateButton dijits UI. WAB just uses the LocateButton in code so you could set the tooltip to whatever you want but you would never see it.

Also the correct code would be esriBundle.widgets.locateButton.locate.title (not sure where you got zoomLocateButton).

Here is what you can do to the MyLocation widget to get tooltips though:

Lines: 34, 43, 48, 54, 57

define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    "esri/dijit/LocateButton",
    'dojo/_base/html',
    'dojo/on',
    'dojo/_base/lang',
    'jimu/dijit/Message',
    'dojo/touch'
  ],
  function(
    declare,
    BaseWidget,
    LocateButton,
    html,
    on,
    lang) {
    var clazz = declare([BaseWidget], {

      name: 'MyLocation',
      baseClass: 'jimu-widget-mylocation',

      startup: function() {
        this.inherited(arguments);
        this.placehoder = html.create('div', {
          'class': 'place-holder'
        }, this.domNode);

        if (window.navigator.geolocation) {
          this.own(on(this.placehoder, 'click', lang.hitch(this, this.onLocationClick)));
        } else {
          html.setAttr(this.placehoder, 'title', this.nls.browserError);
        }
        this.placehoder.title = "Find Nick's Location";
      },

      onLocationClick: function() {
        if (html.hasClass(this.domNode, "onCenter") ||
          html.hasClass(this.domNode, "locating")) {
          html.removeClass(this.domNode, "onCenter");
          html.removeClass(this.placehoder, "tracking");
          this._destroyGeoLocate();
          this.placehoder.title = "Find Nick's Location";
        } else {
          this._createGeoLocate();
          this.geoLocate.locate();
          html.addClass(this.placehoder, "locating");
          this.placehoder.title = "Locating";
        }
      },

      onLocate: function(parameters) {
        html.removeClass(this.placehoder, "locating");
        this.placehoder.title = "Find Nick's Location";
        if (this.geoLocate.useTracking) {
          html.addClass(this.placehoder, "tracking");
          this.placehoder.title = "Tracking Nick's location";
        }

        if (parameters.error) {
          console.error(parameters.error);
          // new Message({
          //   message: this.nls.failureFinding
          // });
        } else {
          html.addClass(this.domNode, "onCenter");
          this.neverLocate = false;
        }
      },

      _createGeoLocate: function() {
        var json = this.config.locateButton;
        json.map = this.map;
        // json.useTracking = true;
        json.centerAt = true;
        this.geoLocate = new LocateButton(json);
        this.geoLocate.startup();

        this.geoLocate.own(on(this.geoLocate, "locate", lang.hitch(this, this.onLocate)));
      },

      _destroyGeoLocate: function() {
        if (this.geoLocate) {
          this.geoLocate.clear();
          this.geoLocate.destroy();
        }

        this.geoLocate = null;
      },

      destroy: function() {
        this._destroyGeoLocate();
        this.inherited(arguments);
      }
    });
    clazz.inPanel = false;
    clazz.hasUIFile = false;
    return clazz;
  });

Re: Change widget labels or tooltips for on-screen widgets

NickHarvey — Fri, 02 Oct 2015 19:50:27 GMT

Thanks Robert...zoomLocateButton was a css reference on LocateButton (%$), my bad...

That works (adding the multiple this.placeholder.title lines) works.....It doesn't appear that the My Location tooltip is available in WAB by default at 1.2 (when it was available at 1.1 now that I look at it)?......Anyway thanks once again for your expert help...

Best

-Nick

Re: Change widget labels or tooltips for on-screen widgets

NickHarvey — Sat, 11 Dec 2021 15:38:31 GMT

In case its helpful for anyone else per this question....The Zoom Slider is a common on-screen widget....I couldn't locate tooltips at WAB 1.2 out-of-the-box.....What worked for me was adding title=${nls.ZoomInTitle}" to line 2, and title=$(nls.ZoomOutTitle}" to line 4 of the ZoomSlider\Widget.html (1st below). Then I added the titles to the strings.js of the ZoomSlider\nls folder (2nd below).

ZoomSlider\Widget.html

<div class="jimu-corner-all">
  <div class="zoom zoom-in" data-dojo-attach-point="btnZoomIn" title="${nls.ZoomInTitle}"
   data-dojo-attach-event="onclick:_onBtnZoomInClicked">+</div>
  <div class="zoom zoom-out" data-dojo-attach-point="btnZoomOut" title="${nls.ZoomOutTitle}"
   data-dojo-attach-event="onclick:_onBtnZoomOutClicked">-</div>
</div>

ZoomSlider\nls\strings.js

define({
  root: ({
    _widgetLabel: "Zoom Slider",
  ZoomInTitle: "Zoom In",
  ZoomOutTitle: "Zoom Out",
  }),