ArcGIS Blog

Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class

This blog post was contributed by Artemis Fili, a Technical Lead (SDK Team) in Technical Support Services at the Esri Redlands, CA office.

Esri Technical Support likes to use Web AppBuilder for ArcGIS to create powerful web applications. Web AppBuilder Developer Edition v2.4 supports a Report class that enables you to print a file with a map, tables, and other supporting elements.

I’d like to share how you can extend the Report class to create your own custom widget that can be used in Web AppBuilder Developer Edition. This blog will present the basic steps of this workflow.

Note: To develop a custom widget for Web AppBuilder, sufficient knowledge and experience using JavaScript and HTML is recommended, as well as a level of familiarity with the ArcGIS API for JavaScript and the Esri samples. To get more information about customizing Web AppBuilder please review the Web AppBuilder Developer Edition Guide. The Customization Resource List is another great resource.

Enabling a custom widget:

To create a new custom widget with the Report class, the easiest way to get started is to use the Demo widget which can be found in the clientstemappwidgetssamplewidgets subfolder of the Web AppBuilder Developer Edition install directory. Let’s go through the detailed steps:

It should look like this:

Your code should look like this:

Once the changes above are applied, the widget will be deployed in the Builder environment and we should be able to choose it from the list of widgets. In order to test, we can create a new app in Web AppBuilder. Our widget is an in-panel widget, so on the Widget tab, we’ll need to select it within the Header Controller widget to select it as shown below:

When we try to add a new widget, we’ll see a list of widgets to choose from. This list includes our new Report widget:

The widget will be deployed to our app once we select it and click OK. Just don’t forget to save the app!

Adding code for the custom widget:

Now that we’ve gone through the steps of deploying a new widget with a custom name, the next step is to change its underlying code to incorporate the functionality for the Report class.

Let’s return to our Web AppBuilder Developer Edition install folder. Since the widget is already deployed in the app, we can continue working on the app’s folder directly so that we don’t have to re-deploy the widget every time we want to test our changes. In order to find the widget in the app folder, navigate to serverappsIDwidgets and you will see a subfolder with the name “Report”.

Let’s take a step back to explain how this code works. This code will create the data that we want to view in the report. It consists of three parts: map, table, and HTML. The map part will inherit the same map that is used by the app. The table is basically a list of information that we want to show. In this case, I am showing a list of the parks in Redlands, CA. The last part will display some photos of these parks using HTML.

Once we update the string.js file, we can then change the widget.html in order to reference this string as shown below:

We should be good to go. Let’s run the app and use our cool new custom Report widget!

Once you click the button, you will see the report page. The figure below shows how the map appears in the report.

And once we scroll down, we see the table along with the HTML.

Now it’s time to create your own custom report. Happy coding!

Note2: A document containing all the code samples discussed in this blog is available here.

About the author

Derek is a Product Manager on the Apps Product Management team. He's involved with requirements gathering, software development, and product marketing. Follow on Twitter: @GIS_Bandit


Next Article

7 Steps to Enhance Your Social Equity Analysis

Read this article