{"id":76561,"date":"2017-04-18T13:12:20","date_gmt":"2017-04-18T13:12:20","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class\/"},"modified":"2018-03-26T21:12:47","modified_gmt":"2018-03-26T21:12:47","slug":"creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class","title":{"rendered":"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class"},"author":5481,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[],"tags":[24921],"industry":[],"product":[36591,36571,36831,36551,36631,36601,36931],"class_list":["post-76561","blog","type-blog","status-publish","format-standard","hentry","tag-javascript","product-apps","product-arcgis-enterprise","product-js-api-arcgis","product-arcgis-online","product-web-appbuilder","product-developers","product-web-appbuilder-dev-ed"],"acf":{"short_description":"This blog post was contributed by Artemis Fili, a Technical Lead (SDK Team) in Technical Support Services at the Esri Redlands, CA office...","flexible_content":[{"acf_fc_layout":"content","content":"<p>This blog post was contributed by Artemis Fili, a Technical Lead (SDK Team) in Technical Support Services at the Esri Redlands, CA office.<!--more--><\/p>\n<p>Esri Technical Support likes to use <a href=\"http:\/\/doc.arcgis.com\/en\/web-appbuilder\/\" target=\"_blank\">Web AppBuilder for ArcGIS<\/a> to create powerful web applications. Web AppBuilder <a href=\"https:\/\/developers.arcgis.com\/web-appbuilder\/\" target=\"_blank\">Developer Edition v2.4<\/a> supports a <a href=\"https:\/\/developers.arcgis.com\/web-appbuilder\/api-reference\/report.htm\" target=\"_blank\">Report class<\/a> that enables you to print a file with a map, tables, and other supporting elements.<\/p>\n<p>I\u2019d 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.<\/p>\n<p><strong>Note:<\/strong> To develop a custom widget for\u00a0Web AppBuilder, sufficient knowledge and experience using JavaScript and HTML is recommended, as well as a level of familiarity with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/\" target=\"_blank\">ArcGIS API for JavaScript<\/a> and the Esri samples. To get more information about customizing Web AppBuilder please review the <a href=\"https:\/\/developers.arcgis.com\/web-appbuilder\/guide\/xt-welcome.htm\" target=\"_blank\">Web AppBuilder Developer Edition Guide<\/a>. The <a href=\"https:\/\/geonet.esri.com\/blogs\/myAlaskaGIS\/2016\/03\/09\/web-appbuilder-developer-edition-customization-resource-list\" target=\"_blank\">Customization Resource List<\/a> is another great resource.<\/p>\n<p><strong>Enabling a custom widget:<\/strong><\/p>\n<p>To create a new custom widget with the Report class, the easiest way to get started is to use the <em>Demo<\/em> widget which can be found in the <em>clientstemappwidgetssamplewidgets<\/em> subfolder of the Web AppBuilder Developer Edition install directory. Let\u2019s go through the detailed steps:<\/p>\n<ul>\n<li>Copy the Demo folder that can be found in the <em>clientstemappwidgetssamplewidgets<\/em> subfolder of the Web AppBuilder directory as shown below:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/1-demo-folder.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77793 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/1-demo-folder.png\" alt=\"\" width=\"869\" height=\"298\" \/><\/a><\/p>\n<ul>\n<li>Paste it in <em>clientstemappwidgets<\/em> and rename it to something like \u201cReport\u201d.<\/li>\n<li>Go to the Report widget folder, open the <em>manifest.json<\/em> file and change the following:<\/li>\n<li>Change the name property to \u201cReport\u201d.<\/li>\n<li>Change any other properties as you wish (e.g. author, description).<\/li>\n<li>The featureActions array can be removed, as we will not be using it in this example.<\/li>\n<li>Add the properties attribute and include the <em>\u201chasConfig\u201d:false<\/em>. (For the purposes of this blog, we will not make the widget configurable in order to keep it simple).<\/li>\n<li>Save the <em>manifest.json<\/em> file.<\/li>\n<\/ul>\n<p>It should look like this:<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/2-manifest.json_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77796 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/2-manifest.json_.png\" alt=\"\" width=\"490\" height=\"230\" \/><\/a><\/p>\n<ul>\n<li>Next go to the nls subfolder and open the <em>strings.js<\/em> file.<\/li>\n<li>Change the <em>_widgetLabel<\/em> to \u201cReport\u201d. Making this change will enable the widget to have this name when we select it in the Builder environment. Then remove the rest of the attributes in the root object and save the file.<\/li>\n<\/ul>\n<p>Your code should look like this:<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/3-strings.js_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77798 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/3-strings.js_.png\" alt=\"\" width=\"236\" height=\"138\" \/><\/a><\/p>\n<p>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\u2019ll need to select it within the Header Controller widget to select it as shown below:<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/4-headerController.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77799\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/4-headerController.png\" alt=\"\" width=\"363\" height=\"127\" \/><\/a><\/p>\n<p>When we try to add a new widget, we\u2019ll see a list of widgets to choose from. This list includes our new Report widget:<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/5-chooseWidget_b.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77806\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/5-chooseWidget_b.png\" alt=\"\" width=\"1020\" height=\"797\" \/><\/a><\/p>\n<p>The widget will be deployed to our app once we select it and click OK. Just don\u2019t forget to save the app!<\/p>\n<p><strong>Adding code for the custom widget:<\/strong><\/p>\n<p>Now that we&#8217;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.<\/p>\n<p>Let\u2019s 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\u2019s folder directly so that we don\u2019t 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 <em>serverappsIDwidgets<\/em> and you will see a subfolder with the name &#8220;Report&#8221;.<\/p>\n<ul>\n<li>Open the <em>widget.js<\/em> file in this subfolder. Change the baseClass property in order to match our folder\u2019s name, so it will be <em>baseClass: &#8216;jimu-widget-report&#8217;<\/em>.<\/li>\n<\/ul>\n<ul>\n<li>Next, we need to include the Report and PageUtils modules in the require statement. Our define statement should look as follows:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/6-requireStatement.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77808\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/6-requireStatement.png\" alt=\"\" width=\"498\" height=\"50\" \/><\/a><\/p>\n<ul>\n<li>Now examine the code. There are a set of standard widget event handlers defined here that you can start plugging code into, to see how things work.\u00a0We will use the startup function in order to initialize our report. Delete the existing code and add the following code:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/7-startup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77809 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/7-startup.png\" alt=\"\" width=\"984\" height=\"252\" \/><\/a><\/p>\n<ul>\n<li>At this point we have used the Report class to create a new Report, but we are missing the UI for the widget. Our widget needs to have a button that the end user will click in order to generate the report. Let\u2019s go to the <em>widget.html<\/em> file to see how we can add it. Delete all the content in this file and then simply add the following code:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/8-UI.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77811 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/8-UI.png\" alt=\"\" width=\"608\" height=\"69\" \/><\/a><\/p>\n<ul>\n<li>The above code will create a button with name <em>btnPrint<\/em>. When this button is clicked, the <em>_onBtnPrintClicked<\/em> function will be called. What? Are we missing something? That\u2019s right, we need to go back to the <em>widget.js<\/em> file and define this function. The code for that looks like this:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/9-onBtnClicked.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77812 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/9-onBtnClicked.png\" alt=\"\" width=\"903\" height=\"743\" \/><\/a><\/p>\n<p>Let\u2019s 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.<\/p>\n<ul>\n<li>Before we test our custom widget, let\u2019s do one last thing. Currently the \u201cGenerate Report\u201d button text is hard-coded in the <em>widget.html<\/em>. If we want to internationalize the UI, we should isolate this string in a separate language-specific resource file. By default, the <em>strings.js<\/em> in the nls folder is the file for the English language. Depending on the language of the localized string, we need to use the appropriate subfolder in the nls folder.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/10-strings.js_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77814 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/10-strings.js_.png\" alt=\"\" width=\"362\" height=\"85\" \/><\/a><\/p>\n<p>Once we update the <em>string.js<\/em> file, we can then change the widget.html in order to reference this string as shown below:<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/11-UI.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77816 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/11-UI.png\" alt=\"\" width=\"593\" height=\"71\" \/><\/a><\/p>\n<p>We should be good to go. Let\u2019s run the app and use our cool new custom Report widget!<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/12-widget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77817 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/12-widget.png\" alt=\"\" width=\"382\" height=\"248\" \/><\/a><\/p>\n<p>Once you click the button, you will see the report page. The figure below shows how the map appears in the report.<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/13-report-map.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77819 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/13-report-map.png\" alt=\"\" width=\"787\" height=\"616\" \/><\/a><\/p>\n<p>And once we scroll down, we see the table along with the HTML.<\/p>\n<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/14-report-table-html.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-77820 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/04\/14-report-table-html.png\" alt=\"\" width=\"788\" height=\"612\" \/><\/a><\/p>\n<p>Now it\u2019s time to create your own custom report. Happy coding!<\/p>\n<p><strong>Note2:\u00a0<\/strong>A document containing all the code samples discussed in this blog is available <a href=\"https:\/\/geonet.esri.com\/docs\/DOC-9817-code-samples-for-the-creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class-blog\" target=\"_blank\">here<\/a>.<\/p>\n"}],"authors":[{"ID":5481,"user_firstname":"Derek","user_lastname":"Law","nickname":"Derek Law","user_nicename":"law","display_name":"Derek Law","user_email":"dlaw@esri.com","user_url":"","user_registered":"2018-03-02 00:17:11","user_description":"Derek is a Senior Product Manager working on ArcGIS Monitor. Based in the Esri Redlands, CA office, he's involved with requirements gathering, software development, and product marketing. Follow on Twitter\/X | Mastodon | BlueSky: @GIS_Bandit","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/45a63afe632e189a1de3341908ca4fc9d0048d83512d2c057bbab1649127535f?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/45a63afe632e189a1de3341908ca4fc9d0048d83512d2c057bbab1649127535f?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"}]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-26T21:12:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class\"},\"author\":{\"name\":\"Derek Law\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/c20071bbe80744d4e3ab49a731a94a73\"},\"headline\":\"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class\",\"datePublished\":\"2017-04-18T13:12:20+00:00\",\"dateModified\":\"2018-03-26T21:12:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class\"},\"wordCount\":13,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"JavaScript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class\",\"name\":\"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2017-04-18T13:12:20+00:00\",\"dateModified\":\"2018-03-26T21:12:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/c20071bbe80744d4e3ab49a731a94a73\",\"name\":\"Derek Law\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/45a63afe632e189a1de3341908ca4fc9d0048d83512d2c057bbab1649127535f?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/45a63afe632e189a1de3341908ca4fc9d0048d83512d2c057bbab1649127535f?s=96&d=blank&r=g\",\"caption\":\"Derek Law\"},\"description\":\"Derek is a Senior Product Manager working on ArcGIS Monitor. Based in the Esri Redlands, CA office, he's involved with requirements gathering, software development, and product marketing. Follow on Twitter\/X | Mastodon | BlueSky: @GIS_Bandit\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/dereklaw88\/\",\"https:\/\/x.com\/GIS_Bandit\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/law\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class","og_locale":"en_US","og_type":"article","og_title":"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-03-26T21:12:47+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class"},"author":{"name":"Derek Law","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/c20071bbe80744d4e3ab49a731a94a73"},"headline":"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class","datePublished":"2017-04-18T13:12:20+00:00","dateModified":"2018-03-26T21:12:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class"},"wordCount":13,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["JavaScript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class","name":"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2017-04-18T13:12:20+00:00","dateModified":"2018-03-26T21:12:47+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/\/uncategorized\/creating-a-custom-widget-for-web-appbuilder-for-arcgis-using-the-report-class#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/c20071bbe80744d4e3ab49a731a94a73","name":"Derek Law","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/45a63afe632e189a1de3341908ca4fc9d0048d83512d2c057bbab1649127535f?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/45a63afe632e189a1de3341908ca4fc9d0048d83512d2c057bbab1649127535f?s=96&d=blank&r=g","caption":"Derek Law"},"description":"Derek is a Senior Product Manager working on ArcGIS Monitor. Based in the Esri Redlands, CA office, he's involved with requirements gathering, software development, and product marketing. Follow on Twitter\/X | Mastodon | BlueSky: @GIS_Bandit","sameAs":["https:\/\/www.linkedin.com\/in\/dereklaw88\/","https:\/\/x.com\/GIS_Bandit"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/law"}]}},"text_date":"April 18, 2017","author_name":"Derek Law","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/law","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"Apps","tag_data":[{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"}],"category_data":[],"product_data":[{"term_id":36591,"name":"Apps","slug":"apps","term_group":0,"term_taxonomy_id":36591,"taxonomy":"product","description":"","parent":0,"count":649,"filter":"raw"},{"term_id":36571,"name":"ArcGIS Enterprise","slug":"arcgis-enterprise","term_group":0,"term_taxonomy_id":36571,"taxonomy":"product","description":"","parent":0,"count":982,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"},{"term_id":36551,"name":"ArcGIS Online","slug":"arcgis-online","term_group":0,"term_taxonomy_id":36551,"taxonomy":"product","description":"","parent":0,"count":2439,"filter":"raw"},{"term_id":36631,"name":"ArcGIS Web AppBuilder","slug":"web-appbuilder","term_group":0,"term_taxonomy_id":36631,"taxonomy":"product","description":"","parent":36591,"count":103,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":766,"filter":"raw"},{"term_id":36931,"name":"Web AppBuilder (Developer Edition)","slug":"web-appbuilder-dev-ed","term_group":0,"term_taxonomy_id":36931,"taxonomy":"product","description":"","parent":36601,"count":47,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=apps","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/76561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/5481"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=76561"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/76561\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=76561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=76561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=76561"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=76561"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=76561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}