Custom Esri Web AppBuilder Widget To Print A Map With the Contents of a Selected Features Pop-up On The Map

print_map_with_popup_contents.js

// see https://developers.arcgis.com/web-appbuilder/sample-code/create-custom-in-panel-widget.htm for more info on how to create a custom widget for Esri Web AppBuilder
define(['dojo/_base/declare', 'jimu/BaseWidget'],
  function(declare, BaseWidget) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget], {
      // Custom widget code goes here

      baseClass: 'jimu-widget-printmapdialogwindow',

      //this property is set by the framework when widget is loaded.
      name: 'Print Map Dialog Window',


      //methods to communication with app container:

      // postCreate: function() {
      //   this.inherited(arguments);
      //   console.log('postCreate');
      // },

      //startup: function() {
      //  this.inherited(arguments);
      //  this.mapIdNode.innerHTML = 'map id:' + this.map.id;
      //  console.log('startup');
      // },

      onOpen: function(){          
        // web app object; need access to it to manipulate the map object
        var wab = this;        
        // print map button - users click on this element to print the map
        var printMapEl = document.getElementById('printMapButton');
        // add 'click' event listener to print map button
        printMapEl.addEventListener('click', function() {
            // display the selected feature as higlighted
            // this helps remediate some quircks with the selected feature not always appearing "selected," even though it is selected
            wab.map.infoWindow.showHighlight();            
            // the selected feature on the map; we will print it's popup information
            var feat = wab.map.infoWindow.getSelectedFeature();            
            // check if a feature is selected; if true, execture some special code; if false, just print the map
            if (feat) {
                // run a second conditional statement to test against the selected feature being the result of
                // a geocode service search              
                // without this, if you try to print when the selected feature was the result of a geocoding service search, you get an error
                if (typeof feat._layer.name !== 'undefined') {
                  // set map extent to selected feature
                  // adjust value in expand() to fit around features; this adds padding around the selected feature
                  wab.map.setExtent(feat.geometry.getExtent().expand(2.5));
                  // center map on selected featured
                  wab.map.centerAt(feat.geometry.getCentroid());
                }                
                // show print loading message
                var printLoadingMessage = document.getElementById('print-prep-msg');
                printLoadingMessage.style.display = 'block';
                // use timeout function to give map time to refresh tiles
                // this helps ensure the map has time to redraw so the map print-out looks correct and nice
                window.setTimeout(function() {                
                    // open browser print dialog window
                    window.print();                
                    // hide print loading message
                    printLoadingMessage.style.display = 'none';                    
                }, 4000);               
            } else {
                // open browser print dialog window
                // no need to do fancy stuff if no features are selected
                window.print();     
            }          
        });        
      }

      // onClose: function(){
      //   console.log('onClose');
      // },

      // onMinimize: function(){
      //   console.log('onMinimize');
      // },

      // onMaximize: function(){
      //   console.log('onMaximize');
      // },

      // onSignIn: function(credential){
      //   /* jshint unused:false*/
      //   console.log('onSignIn');
      // },

      // onSignOut: function(){
      //   console.log('onSignOut');
      // }

      // onPositionChange: function(){
      //   console.log('onPositionChange');
      // },

      // resize: function(){
      //   console.log('resize');
      // }

      //methods to communication between widgets:

    });
  });