How We Developed a Print Widget Solution for Esri Web AppBuilder

bird's eye view of a housing development

The Property Mapper is our most popular web mapping application.  It allows users to search for properties and get information for tax records.  People might use this website when searching for a new house, or working on a tax assessment appeal (to reduce their property taxes).

A few years ago, we migrated this site from the Esri Flex Viewer platform to Web AppBuilder.  Whereas Flex Viewer used Flash, Web AppBuilder was based on HTML5 and JavaScript.  It was Esri’s modern solution to building easily configurable (and cutsomizable) web mapping applications.

While being able to serve our site to more browsers/devices was a big plus, there was one drawback.  The Flex Viewer supported printing the map with the contents from the feature pop-up.  However, Web AppBuilder does not support this.  Esri has an article discussing this issue.   They even provide a sample Python script to create your own printing web service to support pop-up information.

We took a different approach.  Our solution was to create a custom widget that would call the browser’s window.print() method.  And we used a print media query to pull the contents from the pop-up window DOM element and put it on the print out.  Developing this widget was a user experience improvement.  Earlier, we had created the print media query.  But we simply instructed users to run the Ctrl + P command on their keyboards to open up the browsers print dialog window.  This wasn’t intuitive, so creating a widget with a “Print Map” button seemed like an improvement.

screen shot of the new property mapper for cumberland county in 2019
Property Mapper with “Print Map” Widget

I wanted to share some of the sample code for this solution.  And I recognize this may not be the best solution.  But as our goal when migrating platforms was not to lose any functionality, this solution has worked well.  At some point in the future, we may create a custom print service that supports printing information from the pop-up.  I have always wanted to learn more about Esri’s print services.

Below is the JavaScript code for the custom widget:

Here is the HTML file for the widget:

While developing this solution, we discovered a quirk with Web AppBuilder.  The first time a user would search for an address, the property would appear selected.  But every other time a user would search for  property, the property would not appear selected.  But if you were to open the print widget and click the “Print Map” button, the pop-up information would still appear.  The property was selected, but the graphic representing it being selected was not shown.  If users were to manually select a property, and then open the print widget, the property would always appear selected.

After some back and forth with Esri technical support, we came up with a workaround.  As most users would search for a property when using this site, we added a line of code in the Search Widget to open up the Print Widget [openWidgetById(‘the id for the widget’)].  And to make the feature appear selected when opening the Print Widget, we called the map.infoWindow.showHighlight() method.

I wanted users to be able to print the map whether or not a property was selected.  I used a conditional statement to execute code if a feature was selected, or just call the window.print() method if not feature was selected.

One issue I ran into was that if someone was searching for an address against our geocodig service instead of the tax parcels feature layer, an error would occur when running the Print Widget.  Therefore, I added a second conditional to only run the code if the result of the Search Widget was a tax parcel (property).

screen shot of print map
Message to users that the map is being printed

Before creating this widget, users would never know quite where the map was going to print.  So in addition to providing them with a logical “Print Map” button, I wanted to center the map on the selected feature (in this case, a property).  I called the setExtent() method on the map object.  You pass an Extent object into this method.  I passed in feat.geometry.getExtent() to set the extent based upon the selected feature.

To ensure there was some padding around the selected feature, I called the expand() method.  It took some experimentation to find a expand factor that worked for most instances.  An improvement would be creating a function that gets the geometry of the selected feature, and then sets the expand factor based on that value.  Lastly, I centered the map on the selected feature by calling the map.centerAt() method and passing in feat.geometry.getCentroid().

After centering the map on the selected feature, I call the window.print() method within a setTimeout() function.  This is to help ensure the map refreshes for the print out.  While the timeout is running, I add text and a graphic to inform the user that the map print-out is being generated.  I chose to do this so the user is aware that something is happening.  One improvement I would like to make to this solution is the save the print-out to a pdf.  I’m not sure how I would approach that, so if you have any tips, please leave a comment.

One final thing to mention is that we are using the Jewelry Box Theme for the Property Mapper.  Therefore, many of the styles in the sample style-sheet below apply to that template.  If you want to use this print widget solution for a different template, you’ll need to do the heavy lifting of figuring out what styles need modified to get a similar result.

Stylesheet for our widget:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s