{"id":66282,"date":"2018-11-07T13:44:00","date_gmt":"2018-11-07T21:44:00","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&#038;p=66282"},"modified":"2018-11-07T13:44:00","modified_gmt":"2018-11-07T21:44:00","slug":"add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition","title":{"rendered":"Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition"},"content":{"rendered":"","protected":false},"author":651,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[],"tags":[],"arcwatch_issues":[38082],"class_list":["post-66282","arcwatch","type-arcwatch","status-publish","format-standard","hentry","arcwatch_issues-february-2017","arcwatch_sections-the-tip"],"acf":{"short_description":"Without doing any coding, you can use Web AppBuilder for ArcGIS to create and deploy custom web apps that can run on any device.","pdf":{"host_remotely":false,"file":null,"file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Without doing any coding, you can use\u00a0<a href=\"http:\/\/doc.arcgis.com\/en\/web-appbuilder\/\">Web AppBuilder for ArcGIS<\/a>\u00a0to create and deploy custom web apps that can run on any device. Built using the\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/\">ArcGIS API for JavaScript<\/a>\u00a0and HTML5 technology,\u00a0<a href=\"https:\/\/developers.arcgis.com\/web-appbuilder\/\">Web AppBuilder for ArcGIS Developer Edition<\/a>\u00a0enables you to create your own custom widgets and themes, extending the app builder's capabilities.\r\n\r\nMany users on\u00a0<a href=\"http:\/\/geonet.esri.com\/\">GeoNet<\/a>, Esri's online community, have created and contributed custom widgets that are not included with Web AppBuilder for ArcGIS. For example, there is the\u00a0<a href=\"https:\/\/geonet.esri.com\/docs\/DOC-3342\">Elevation Profile widget<\/a>, which displays the surface profile of a line drawn in the map, and the\u00a0<a href=\"https:\/\/geonet.esri.com\/docs\/DOC-1731-enhanced-search-widget-version-211-080116\">Enhanced Search widget<\/a>. Visit the Web AppBuilder Custom Widgets forum in GeoNet, where you will find custom widgets in the\u00a0<a href=\"https:\/\/geonet.esri.com\/groups\/web-app-builder-custom-widgets\/content\">Content<\/a>\u00a0section. Several Esri partners have also developed their own widgets to work with Web AppBuilder for ArcGIS Developer Edition.\r\n\r\nThis tip explains how to download these custom widgets and deploy them to your local Web AppBuilder for ArcGIS Developer Edition installation.\u00a0<strong>Note:<\/strong>\u00a0You should already have Web AppBuilder for ArcGIS Developer Edition downloaded and installed on a local machine. It should be configured to work with an ArcGIS Online organization or a Portal for ArcGIS installation. To learn how to set up this deployment, read\u00a0<a href=\"http:\/\/www.esri.com\/esri-news\/arcwatch\/0117\/configure-web-appbuilder-for-arcgis-developer-edition-to-work-with-your-arcgis\">Configure Web AppBuilder for ArcGIS Developer Edition to Work with Your ArcGIS Online Organization<\/a>, a tip of the month published in the January 2017 issue of\u00a0<em>ArcWatch<\/em>.\r\n<h3>Step 1: Find and download a custom widget.<\/h3>\r\nGo to\u00a0<a href=\"http:\/\/geonet.esri.com\/\">GeoNet<\/a>. Sign in with your Esri Account or create an account. Please note this is not the same account you use for your ArcGIS Online organization.\r\n\r\nClick the Communities subtab and type \"Web AppBuilder Custom Widgets\" in the text input box to filter the list of places displayed on the page. You will see the Web AppBuilder Custom Widgets place returned.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip1-1.jpg\" \/>\r\n\r\nClick the Web AppBuilder Custom Widgets link to view its contents.\r\n\r\nThis place is a destination for Web AppBuilder for ArcGIS Developer Edition users to get help and assist others by posting questions, comments, and reading blog posts as well as a place to share custom widgets.\r\n\r\nClick the Content subtab underneath the title banner. You can scroll down the page to see the many custom widgets that have been shared by the user community.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip2-1.jpg\" \/>\r\n\r\nAdd the Elevation Profile widget created by Robert Scheitlin. Type \"elevation\" in the filter using the text box. The following results should appear:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip3-1.jpg\" \/>\r\n\r\nClick Elevation Profile Widget Version 2.1 - 07\/20\/2016 (the second item in the list) to view more information about this custom widget, which adds a new tool in Web AppBuilder for ArcGIS Developer Edition. The tool enables an end user to draw a line in the map display to generate a surface profile so they can see what the landscape would look like. You can click Live Preview Site to preview how the widget behaves.\r\n\r\nUnder ATTACHMENTS, click ElevationProfile.zip to download the custom widget.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip4-1.jpg\" \/>\r\n<h3>Step 2: Unzip a custom widget and install it into Web AppBuilder for ArcGIS Developer Edition.<\/h3>\r\nNavigate to the location where you downloaded the Elevation Profile widget ZIP file. Double-click to view its contents in Windows Explorer. Select the ElevationProfile folder and click\u00a0<em>Extract all<\/em>\u00a0to unzip the content.\r\n\r\nSpecify a destination folder for the extracted content\u2014for example, C:\\temp.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip5-1.jpg\" \/>\r\n\r\nClick Extract.\r\n\r\nAfter you unzip the file, you will see a folder called ElevationProfile, which contains the following contents:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip6-1.jpg\" \/>\r\n\r\nThe ZIP file has all the relevant files needed for the Elevation Profile widget to work within Web AppBuilder for ArcGIS Developer Edition.\r\n\r\nNavigate to the {Web AppBuilder for ArcGIS Developer Edition installation directory} &gt; WebAppBuilderForArcGIS &gt; client &gt; stemapp &gt; widgets and copy the ElevationProfile folder into this location. Notice that this location contains a folder for every widget available in Web AppBuilder for ArcGIS Developer Edition.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip7-1.jpg\" \/>\r\n\r\nNow the Elevation Profile widget is available for use in Web AppBuilder for ArcGIS Developer Edition.\r\n<h3>Step 3: Use the Elevation Profile widget in Web AppBuilder for ArcGIS Developer Edition.<\/h3>\r\nStart Web AppBuilder for ArcGIS Developer Edition on your computer.\r\n\r\nIn Windows File Explorer, navigate to the {Web AppBuilder for ArcGIS Developer Edition installation directory} &gt;\u00a0<em>WebAppBuilderForArcGIS<\/em>\u00a0directory on your local machine and double-click to view its contents.\r\n\r\nDouble-click startup.bat to start Web AppBuilder for ArcGIS Developer Edition on your computer. After it opens in your web browser, ensure that 2D is selected on the subtabs and click Create New.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip8-1.jpg\" \/>\r\n\r\nProceed through the workflow to create a new 2D web app. For example, select Default 2D and click Next.\r\n\r\nType a title and description for the new web app.\r\n\r\nWhen the Web AppBuilder for ArcGIS Developer Edition builder user interface appears, click the Widget tab.\r\n\r\nClick\u00a0<strong>Set the widgets in this controller.<\/strong>\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip9-1.jpg\" \/>\r\n\r\nIn next pane, click the + button to add a widget.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip10-1.jpg\" \/>\r\n\r\nNotice that in the Choose Widget dialog box, the Elevation Profile widget appears as an option. You just successfully added a new custom widget to your Web AppBuilder for ArcGIS Developer Edition local installation!\r\n\r\nClick on the ElevationProfile widget to add it.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip11-1.jpg\" \/>\r\n\r\nIn the Configure Elevation Profile dialog box that appears, you have the option to configure its settings. For now, you will keep the default settings, so click OK.\r\n\r\nThe Elevation Profile widget is now ready for use in the web app. Test it to confirm that the widget works.\r\n\r\nIn the map display, zoom to a location with some mountains and\/or nonflat terrain.\r\n\r\nClick the Elevation Profile widget to open it in the app. Click the measure tool to draw a line in the map display for a segment of land that you want to generate the surface profile for, then double-click to end the line segment.\r\n\r\n<a class=\"colorbox-image\" title=\"\" href=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip12-lg.jpg\"><img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/tip12-1.jpg\" \/><\/a>\r\n\r\nIt may take a few seconds, but a surface profile representing the line segment you drew will be rendered on the widget's surface profile tab.\r\n\r\nNow that you have added the Elevation Profile widget to your local installation of Web AppBuilder for ArcGIS Developer Edition, the widget's functionality can be added to all web apps that you create.\r\n\r\nThere are many more custom widgets available, and now you know how easy it is to add them to Web AppBuilder for ArcGIS Developer Edition. Depending on what the widgets do, some may require additional configuration\u2014please check their respective README docs.\r\n\r\nHere's where to find more custom widgets:\r\n<ul>\r\n \t<li><a href=\"https:\/\/geonet.esri.com\/groups\/web-app-builder-custom-widgets\/content\">Web AppBuilder for ArcGIS Custom Widgets on GeoNet<\/a><\/li>\r\n \t<li><a href=\"https:\/\/github.com\/Esri\/solutions-webappbuilder-widgets\">Esri Solutions Team Custom Widgets<\/a><\/li>\r\n \t<li><a href=\"https:\/\/github.com\/Esri\/WAB-Image-Services-Widgets\">Esri Image Services Widgets<\/a><\/li>\r\n<\/ul>"}],"references":null},"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>Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition<\/title>\n<meta name=\"description\" content=\"Without doing any coding, you can use Web AppBuilder for ArcGIS to create and deploy custom web apps that can run on any device.\" \/>\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\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/themes\/esri_newsroom\/placeholders\/arcwatch\/arcwatch-default-card-image.jpg\" \/>\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\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition\",\n\t            \"name\": \"Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2018-11-07T21:44:00+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"ArcWatch Articles\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/2bb97f36f9a6288b8306552020a42541\",\n\t            \"name\": \"Rick Schneblin\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg\",\n\t                \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg\",\n\t                \"caption\": \"Rick Schneblin\"\n\t            },\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition","description":"Without doing any coding, you can use Web AppBuilder for ArcGIS to create and deploy custom web apps that can run on any device.","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\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition","og_locale":"en_US","og_type":"article","og_title":"Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/themes\/esri_newsroom\/placeholders\/arcwatch\/arcwatch-default-card-image.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition","url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition","name":"Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2018-11-07T21:44:00+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-custom-widgets-to-web-appbuilder-for-arcgis-developer-edition#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"ArcWatch Articles","item":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch"},{"@type":"ListItem","position":3,"name":"Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/2bb97f36f9a6288b8306552020a42541","name":"Rick Schneblin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg","caption":"Rick Schneblin"},"url":""}]}},"sort_order":"2","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/66282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcwatch"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/651"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/66282\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=66282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=66282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=66282"},{"taxonomy":"arcwatch_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch_issues?post=66282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}