Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Custom Esri Web AppBuilder Widget To Print A Map With the Contents of a Selected Features Pop-up On The Map
// see 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:' +;
// 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;
// the selected feature on the map; we will print it's popup information
var feat =;
// 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 !== 'undefined') {
// set map extent to selected feature
// adjust value in expand() to fit around features; this adds padding around the selected feature;
// center map on selected featured;
// show print loading message
var printLoadingMessage = document.getElementById('print-prep-msg'); = '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
// hide print loading message = 'none';
}, 4000);
} else {
// open browser print dialog window
// no need to do fancy stuff if no features are selected
// 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:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment