Programatically modify widget name when the widget is opened

620
4
11-04-2020 04:12 AM
MichaelLev
Occasional Contributor III

I'm developing custom widgets for WAB (Develper Edtion) 2.17, Launchpad Theme, on 3D Scenes (ArcGIS API for javascript 4.17).

I need to change the title of my custom widget window, AFTER the widget has been opened, so that the title will be changed both in the widget-window-title and also in the widgets-group-panel.

I want the change to take effect only when the app is running, and vanish when the app is closed.

I'll appreciate info how to do it.

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Emeritus

Michael,

widget-window-title and also in the widgets-group-panel

Can you provide a screenshot to better explain?

0 Kudos
MichaelLev
Occasional Contributor III

Dear Robert,

Thank you for attending to my question.

I'm attaching a screenshot of part of my query widget.

As you can see, I let the user select on which layer he wants to make the query.

So, I want to rename the widget, both in its title and in the name shown when I hover on the icon in the "Launchpad Theme" widgets-panel. I want that I will be able to add the layet title to the widget name.

It's even more important in case I put some similar widgets in widget-group, and I want that the widget name will include the name of the selected layer, so instead of "Filter Layer" it will be e.g. "Filter TLV_2_Neighbourhoods".

Thanks

screenshot of part of my query widget

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michael,

  Here is some code that shows that. This full widget code is the otb Legend widget modified.

define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    'esri/widgets/Legend',
    'jimu/WidgetManager',
    'dojo/_base/html'
  ], function(declare, BaseWidget, Legend, WidgetManager, html) {

    var clazz = declare([BaseWidget], {

      name: 'Legend',
      baseClass: 'jimu-widget-legend',
      templateString: "<div><div data-dojo-attach-point='legendDiv'></div></div>",
      abc: null,


      postCreate: function(){
        this.inherited(arguments);

        this.legend = new Legend({
          container:this.legendDiv,
          view:this.sceneView
        });
      },

      destroy: function(){
        if(!!this.legend){
          this.legend.destroy();
        }
        this.inherited(arguments);
      },

      onOpen: function(){
        var parentWid = html.getAttr(this.domNode, 'widgetId');
        var iconNode = this.getAnchorbarControllerNode(parentWid);
        this.parentContainer = iconNode;
        html.setAttr(this.parentContainer.tooltipDialog, 'content', "Legend Widget New Title");

        var panel = this.getPanel();
        html.setAttr(panel.titleLabelNode, 'innerHTML', "Legend Widget New Title");
      },

      getAnchorbarControllerNode: function(id) {
        this.abc = WidgetManager.getInstance().getWidgetsByName("AnchorBarController")[0];
        return this.abc._getIconItemById(id);
      },

      onClose: function(){
        html.setAttr(this.parentContainer.tooltipDialog, 'content', "Legend");
        html.setAttr(this.getPanel().titleLabelNode, 'innerHTML', "Legend");
      }
    });

    return clazz;
  });
0 Kudos
MichaelLev
Occasional Contributor III

Dear Robert,

Thank you very much!

I'll check it tomorrow.

0 Kudos