Is there a way to open a widget from within a pop up?

MichaelRutkowski

I created a custom widget From within a popup, I created a link in the map-config.json file that I would like to use to open up the custom widget. However, I'm having trouble accessing the widgetmanager class from within the popup. Any ideas, tips, or clues to lead me in the right direction?

        "popupInfo": {

            "title": "PLANIT PARCEL LOCATIONS:<br /> {SiteName}",

            "fieldInfos": [{

                "fieldName": "ProjectId",

                "label": "ProjectId",

                "isEditable": false,

                "visible": true,

                "format": {

                    "places": 0,

                    "digitSeparator": false

                }

            },

          ....

           {

                "fieldName": "ESRI_OID",

                "label": "ESRI_OID",

                "isEditable": false,

                "visible": false

            }],

            "description": "<script>function testing(){alert('Test is successful');}</script><div><div><b>Project ID:<\/b> {ProjectId}<\/div><div><br /><\/div><div><br /><\/div><div><a href='https://community.esri.com/Project/Edit/{ProjectId}' target='_blank'>Project Edit Page<\/a><\/div><div><a id='parcelProjectClicker' onclick='alert('need to open a widget here') style='cursor:pointer'>Test<\/a><\/div>",

            "showAttachments": false,

            "mediaInfos": []

        }

    }]

},

RobertScheitlin__GISP

Michael,

  There is not a way to have a custom function called by configuring the popup content in the json (that I am aware of). But you can approach this in a different direction. If you add a PopupHandler.js to your custom widget then you can have the PopupHandler.js add a link to your desired layers popup at the bottom like the "Zoom to" standard link.

Here is a example PopupHandler.js:

define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dijit/_WidgetBase',
  'dojo/on',
  'jimu/LayerInfos/LayerInfos',
  'jimu/InfoWindowAction'
], function(
  declare, lang, _WidgetBase, on, LayerInfos, InfoWindowAction
) {

  return declare([_WidgetBase], {

    postCreate: function() {
      this.inherited(arguments);
      LayerInfos.getInstance(this.map, this.map.itemInfo)
        .then(lang.hitch(this, function(layerInfos) {
        this.layerInfos = layerInfos;
      }));

      this.myCustomBtn = new InfoWindowAction({
        buttonInfo: {
          title: 'MyCustom Button',
          baseClass: "myBaseClass"
        }
      });

      this.own(on(this.myCustomBtn,
                  "buttonClick",
                  lang.hitch(this, this._onRealtionshipClick)));

      this.own(on(this.myCustomBtn,
                  "selectionChange",
                  lang.hitch(this, this._onSelectionChange)));
    },

    _onRealtionshipClick: function(selectedFeature) {
      /*jshint unused: false*/
      var selectedLayerInfo = this.layerInfos.getLayerInfoById(selectedFeature._layer.id);
      var featureKey =
          selectedFeature.attributes[selectedFeature._layer.objectIdField];
      //todo add your custom code you wish to execute here
      console.info('custom button clicked');
    },

    _onSelectionChange: function(selectedFeature) {
      if(this.layerInfos &&
          selectedFeature._layer &&
          selectedFeature._layer.name === 'Search result: Parcels') {
          //The above line is where you evaluate if the layer is the particular layer you are wanting to add the button to
        this.myCustomBtn.enableButtonNode();
      } else {
        this.myCustomBtn.disableButtonNode();
      }
    },

    destroy: function() {
      this.myCustomBtn.destroy();
      this.inherited(arguments);
    }

  });
});

In your custom widgets code you add the require for the PopupHandler (you should have the PopupHandler.js in your widgets root folder)

Require:

'./PopupHandler'

Require Var:

PopupHandler

Startup function code:

        this.inherited(arguments);
        // create PopupHandler
        this.popupHandler = new PopupHandler({
          map: this.map,
          attrWidget: this,
          nls: this.nls
        });

Destroy function code:

this.popupHandler.destroy();

Of course this means that your widget has to be opened first before this code will go into effect. But that can be done by adding this in the main config.json for your widget:

"openAtStart": true

Or you can go a headless popup controller widget route and make a widget that has no UI but will have the above 5 code blocks, that way your widget is not required to be opened before the custom link will be added to your layers popup.