bpelchat

LayerList Widget Popup Menu Info Customization Part 1

Blog Post created by bpelchat on Dec 22, 2017

This is a two part blog, in the first part I'll describe how you can add additional selections to the Popup Menu in the layer list widget. The reason we were doing this was to provide a way for the user to send layer info from the layer list to other widgets using the inter-widget communication mechanism.

Our goal here is to add a new menu item to the list of actions in the drop down list for a a sub layer, as shown in the example screen shot above.

 

I'll describe below how we did this, and have also attached the Layer List widgets PopupMenuInfo.js which you may want to download and open in an editor to help understand the following code modifications.

 

Our modifications will be to the Layer List widget in a file called PopupMenuInfo.js, which is where all the modifications are made to add this new menu item, (note the version of the Layer List widget we used was was 2.0).

In this file we first added a call in the constructor of this class to get an instance of the WidgetManager.

We also added 'jimu/PanelManager', to the import list, and a variable called _WMI.

We save the instance of the widget manager to this class variable.

this._WMI = WidgetManager.getInstance();

We'll use it later for publishing data to other widgets.

We'll add a new key to _candidateMenuItems object array found in the _initCandidateMenuItems function

        key: 'nhSearch',
        label: 'Add To NHSearch'

And in itemInfoCategoreList we will add two entries to each of the arrays shown below

  

 var itemInfoCategoreList = {

      ....

     

'RootLayerAndFeatureLayer': [{
        key: 'zoomto'
      }, {
        key: 'transparency'
      }, {
        key: 'separator'
      }, {
        key: 'controlPopup'
      }, {
        key: 'separator'
      }, {
        key: 'moveup'
      }, {
        key: 'movedown'
      }, {
        key: 'separator'
      }, {
        key: 'table'
      }, {
        key: 'separator'
      }, {
        key: 'url'
      }, {
        key: 'separator'
      }, {
        key: 'nhSearch'
      }],
      'FeatureLayer': [{
        key: 'controlPopup'
      }, {
        key: 'separator'
      }, {
        key: 'table'
      }, {
        key: 'separator'
      }, {
        key: 'url'
      }, {
        key: 'separator'
      }, {
        key: 'nhSearch'
      }],

 

A little further down in this javascript you'll find a function called onPopupMenuClick, where we will need to add an action handler for our new menu item.

       

case 'nhSearch':
           this.sendMessageToWidget();
           break;

Lastly we just need to add the functions to publish data to other widgets, which will also include code to open or (load and open) the widget that we are sending our message to.

The important line of code will be where we send the message which will pass the layer info object to the target widget.

 this.layerListWidget.publishData({ message: "publish-test-message-from-layerlist",target: "NHSEARCH", layerinfo: this._layerInfo});

In the above line of code we are sending the layer info object to the target widget. Our target widget in this example will be the eSearch widget By Robert Scheitlin https://community.esri.com/thread/119278-roberts-custom-wab-widgets  which we love to use in some of our apps. In the next part I'll include how we make use of the layer info object sent to the target widget when the user clicks the layer list widgets layer popup menu item. Then by adding a message handler and couple of functions to the target widget we'll be able  to dynamically add the layer the user clicked on in the layer list widgets menu item, to the list of searchable layers that were pre-configured in the search widgets config.

Attachments

Outcomes