{"id":489022,"date":"2019-04-11T13:30:44","date_gmt":"2019-04-11T20:30:44","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=489022"},"modified":"2020-07-14T10:07:27","modified_gmt":"2020-07-14T17:07:27","slug":"take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x","title":{"rendered":"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x"},"author":6941,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[33101,42611],"industry":[],"product":[36821,36551],"class_list":["post-489022","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-cats","tag-configurable-apps","product-configurable-apps","product-arcgis-online"],"acf":{"short_description":"Take a tour of new features, like dockable pop-ups and stacked labels, available in the the 4.x configurable apps","flexible_content":[{"acf_fc_layout":"content","content":"

Each release of ArcGIS Online introduces new configurable apps. For the past year, we have been building configurable apps with the next generation of the ArcGIS API for JavaScript v. 4.x. ArcGIS Online is also transitioning to using the 4.x JavaScript API for new features, including the configurable apps and the next version of Map Viewer. The 4.x JavaScript API includes many features that have been requested by our customers, like dockable pop-ups and stacked labels.\u00a0 As there are already 15 configurable apps built using the 4.x JavaScript API, this blog will outline these apps and the functionality you can access today.<\/p>\n

The configurable apps that are built with 4.x are: Attachment Viewer,<\/a>\u00a03D Data Visualization<\/a>, Category Gallery<\/a>, Compare<\/a>, Interactive Legend<\/a>, Map Styler<\/a>, Media Map<\/a>, Minimal Gallery<\/a>, Minimalist<\/a>, Layer Showcase<\/a>, Scene Styler<\/a>, Scene with Inset Map<\/a>, Simple Scene Viewer<\/a>, Nearby<\/a> and Zone Lookup<\/a>.<\/p>\n

To easily find these in ArcGIS Online, just search \u201c4.x\u201d in the Web Application Templates<\/a> group or Gallery Templates<\/a> group\u00a0to quickly locate any new apps built using 4.x JavaScript API.<\/p>\n

Note: these examples are for English templates.\u00a0 To find other languages search the group name listed above and owner: esri_\u201dlocale abbreviation\u201d.<\/p>\n

Let\u2019s tour some features available in the 4.x configurable apps.<\/p>\n

Responsive Apps<\/strong><\/p>\n

More and more users are consuming maps and apps on their mobile devices. Responsive apps provide the optimal viewing experience no matter what devices you are using. The below example shows the Styler app on an iPhone X. The legend is docked on the bottom of the screen, so a mobile user can view both the legend and map without covering up the map. The pop-up is also docked at the bottom of the screen for this app. This provides the space to view and interact with the pie chart that is available in the pop-up, while users can identify the selected feature in the map. This makes maps on small screens work.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":489132,"id":489132,"title":"Responsive tools on an iPhone","filename":"IphonePhotos-1.png","filesize":99378,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/iphonephotos-2","alt":"Legend and pop-up viewed on an iPhone","author":"6941","description":"","caption":"Styler configurable app viewed on an iPhone X. ","name":"iphonephotos-2","status":"inherit","uploaded_to":489022,"date":"2019-04-11 16:17:19","modified":"2019-04-11 16:21:37","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":605,"height":647,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1.png","medium-width":244,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1.png","medium_large-width":605,"medium_large-height":647,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1.png","large-width":605,"large-height":647,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1.png","1536x1536-width":605,"1536x1536-height":647,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1.png","2048x2048-width":605,"2048x2048-height":647,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1-435x465.png","card_image-width":435,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/IphonePhotos-1.png","wide_image-width":605,"wide_image-height":647}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/webapps.maps.arcgis.com\/apps\/Styler\/index.html?appid=32412e57f2514b008740de00e77f4d2a"},{"acf_fc_layout":"content","content":"

Accessibility<\/strong><\/p>\n

A configurable app built in the 4.x JavaScript API like Styler includes improved accessibility features to improve the experience for users with disabilities or need to be WCAG\/ 508 compliant. The improved accessibility features include the ability to select app tools using a keyboard and navigate through the keyboard<\/a>. For more information on meeting accessibility guidelines while configuring your app check this blog on Color Contrast testing<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":489182,"id":489182,"title":"Navigating options through the keyboard","filename":"accessibility-1.png","filesize":5221,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/accessibility-2","alt":"Navigating options through the keyboard","author":"6941","description":"","caption":"","name":"accessibility-2","status":"inherit","uploaded_to":489022,"date":"2019-04-11 16:26:05","modified":"2019-04-11 16:44:02","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":150,"height":180,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1.png","medium-width":150,"medium-height":180,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1.png","medium_large-width":150,"medium_large-height":180,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1.png","large-width":150,"large-height":180,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1.png","1536x1536-width":150,"1536x1536-height":180,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1.png","2048x2048-width":150,"2048x2048-height":180,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1.png","card_image-width":150,"card_image-height":180,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/accessibility-1.png","wide_image-width":150,"wide_image-height":180}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Stacked labels<\/strong><\/p>\n

All 4.x configurable apps support all functionality available with Arcade including the ability to display multi-line labels. You can construct Arcade<\/a> expressions to concatenate labels and have it displayed in multiple-lines in addition to using a singular field name for your label.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":489242,"id":489242,"title":"Stacked Labels","filename":"labels.png","filesize":92848,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/labels-7","alt":"Comparison of labels in the web map versus a 4.x configurable app","author":"6941","description":"","caption":"","name":"labels-7","status":"inherit","uploaded_to":489022,"date":"2019-04-11 17:28:51","modified":"2019-04-11 17:30:26","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":926,"height":343,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels.png","medium-width":464,"medium-height":172,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels.png","medium_large-width":768,"medium_large-height":284,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels.png","large-width":926,"large-height":343,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels.png","1536x1536-width":926,"1536x1536-height":343,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels.png","2048x2048-width":926,"2048x2048-height":343,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels-826x306.png","card_image-width":826,"card_image-height":306,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/labels.png","wide_image-width":926,"wide_image-height":343}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Pop-up improvements<\/strong><\/p>\n

Every 4.x configurable app has the ability to dock a pop-up through the dock button available within the pop-up window.\u00a0 This allows your audience to move pop-ups that may be covering map features to a common location on the map. When the dock button is selected, the pop-up and all future pop-ups are docked to the side of the map, until the pop-up is undocked. Below is an example using the Map Styler configurable app.<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":489262,"id":489262,"title":"Dockable pop-up","filename":"dockedpopup.png","filesize":27394,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/dockedpopup","alt":"Dock button in a pop-up","author":"6941","description":"","caption":"","name":"dockedpopup","status":"inherit","uploaded_to":489022,"date":"2019-04-11 17:32:15","modified":"2019-04-11 17:32:46","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":476,"height":312,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup.png","medium-width":398,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup.png","medium_large-width":476,"medium_large-height":312,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup.png","large-width":476,"large-height":312,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup.png","1536x1536-width":476,"1536x1536-height":312,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup.png","2048x2048-width":476,"2048x2048-height":312,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup.png","card_image-width":476,"card_image-height":312,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/dockedpopup.png","wide_image-width":476,"wide_image-height":312}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

You can also enable hover pop-ups using the Media Map configurable app. This allows a user to access pop-up information by hovering a mouse over the feature.\u00a0 The user can view this either in a fixed<\/a> docked location or floating<\/a> location.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":489282,"id":489282,"title":"Floating pop-up","filename":"floating-popup.png","filesize":120024,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/floating-popup","alt":"Example of a floating pop-up","author":"6941","description":"","caption":"Pop-ups will display when a mouse hovers over a feature.","name":"floating-popup","status":"inherit","uploaded_to":489022,"date":"2019-04-11 17:35:19","modified":"2019-04-11 17:38:25","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1302,"height":622,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup.png","medium-width":464,"medium-height":222,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup.png","medium_large-width":768,"medium_large-height":367,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup.png","large-width":1302,"large-height":622,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup.png","1536x1536-width":1302,"1536x1536-height":622,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup.png","2048x2048-width":1302,"2048x2048-height":622,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup-826x395.png","card_image-width":826,"card_image-height":395,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/floating-popup.png","wide_image-width":1302,"wide_image-height":622}},"image_position":"center","orientation":"horizontal","hyperlink":"http:\/\/webapps.maps.arcgis.com\/apps\/Media\/index.html?appid=4f3dd42bf668447a9abe06099f5fa457"},{"acf_fc_layout":"content","content":"

3D measure tools <\/strong><\/p>\n

Scene with Inset and Compare include 3D measure tools, providing the ability to measure area and length. It also includes the newest slice tool. The slice tool temporarily suppresses parts of your scene to expose hidden content. Below is slice tool in action in a Scene with Inset configurable app.<\/a><\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":489312,"id":489312,"title":"Slice Example","filename":"slice3.gif","filesize":749357,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/slice3","alt":"example of slice tool in action","author":"6941","description":"","caption":"","name":"slice3","status":"inherit","uploaded_to":489022,"date":"2019-04-11 18:19:11","modified":"2019-04-11 20:16:48","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":750,"height":376,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3.gif","medium-width":464,"medium-height":233,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3.gif","medium_large-width":750,"medium_large-height":376,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3.gif","large-width":750,"large-height":376,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3.gif","1536x1536-width":750,"1536x1536-height":376,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3.gif","2048x2048-width":750,"2048x2048-height":376,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3.gif","card_image-width":750,"card_image-height":376,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/slice3.gif","wide_image-width":750,"wide_image-height":376}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Legend display options<\/strong><\/p>\n

You can display legends with a card style legend. Below is an example of the same legend displayed in both styles.\u00a0 The card style legend provides an option to display content horizontally and in a more compact card layout.\u00a0 It also shows individual items on its own page allowing for a different style than the default value.\u00a0 In this example, it is easier to read the legend and takes up less space, allowing the map to be the focus. View an this example of the card style legend in the Media Map app.<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":489372,"id":489372,"title":"Card Style Legend","filename":"card-style.png","filesize":20104,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/card-style","alt":"Card Style Legend","author":"6941","description":"","caption":"Example of a card style legend in the Media Map configurable App","name":"card-style","status":"inherit","uploaded_to":489022,"date":"2019-04-11 18:24:26","modified":"2019-04-11 18:25:04","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":313,"height":292,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style.png","medium-width":280,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style.png","medium_large-width":313,"medium_large-height":292,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style.png","large-width":313,"large-height":292,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style.png","1536x1536-width":313,"1536x1536-height":292,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style.png","2048x2048-width":313,"2048x2048-height":292,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style.png","card_image-width":313,"card_image-height":292,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/card-style.png","wide_image-width":313,"wide_image-height":292}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":489392,"id":489392,"title":"Default lLgend","filename":"default-legend.png","filesize":25563,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/default-legend","alt":"Default legend style","author":"6941","description":"","caption":"Default legend style","name":"default-legend","status":"inherit","uploaded_to":489022,"date":"2019-04-11 18:25:42","modified":"2019-04-11 18:26:14","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":310,"height":522,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend.png","medium-width":155,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend.png","medium_large-width":310,"medium_large-height":522,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend.png","large-width":310,"large-height":522,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend.png","1536x1536-width":310,"1536x1536-height":522,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend.png","2048x2048-width":310,"2048x2048-height":522,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend-276x465.png","card_image-width":276,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/default-legend.png","wide_image-width":310,"wide_image-height":522}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Group galleries<\/strong><\/p>\n

We recently introduced three new 4.x group galleries: \u00a0Minimal Gallery<\/a>, Layer Showcase<\/a>, and Category Gallery<\/a>. These galleries display content in the updated card style and utilize new features, like filtering content by Categories. For a full overview of the 4.x gallery apps visit this blog.<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":489412,"id":489412,"title":"Minimal Gallery","filename":"Gallery-1.png","filesize":122364,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\/gallery-5","alt":"4.x minimal gallery app","author":"6941","description":"","caption":"","name":"gallery-5","status":"inherit","uploaded_to":489022,"date":"2019-04-11 18:29:00","modified":"2019-04-11 20:16:37","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":866,"height":727,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1.png","medium-width":311,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1.png","medium_large-width":768,"medium_large-height":645,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1.png","large-width":866,"large-height":727,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1.png","1536x1536-width":866,"1536x1536-height":727,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1.png","2048x2048-width":866,"2048x2048-height":727,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1-554x465.png","card_image-width":554,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Gallery-1.png","wide_image-width":866,"wide_image-height":727}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

To explore examples of 4.x configurable app visit this category gallery<\/a>.<\/p>\n

 <\/p>\n"}],"authors":[{"ID":6941,"user_firstname":"Beth","user_lastname":"Romero","nickname":"Beth Romero","user_nicename":"bromero_imagery","display_name":"Beth Romero","user_email":"BRomero@esri.com","user_url":"","user_registered":"2018-03-02 00:19:02","user_description":"Beth is a Product Engineer on the ArcGIS Online team.","user_avatar":""},{"ID":5631,"user_firstname":"Kelly","user_lastname":"Gerrow","nickname":"kgerrow","user_nicename":"kgerrow","display_name":"Kelly Gerrow-Wilcox","user_email":"KGerrow@esri.com","user_url":"","user_registered":"2018-03-02 00:17:24","user_description":"Kelly was a product manager on the ArcGIS Online team. She enjoys blogging, web mapping, and outdoor adventures.","user_avatar":""}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"\nTake a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x<\/title>\n<meta name=\"description\" content=\"Tour configurable apps built using the ArcGIS API for JavaScript 4.x.\" \/>\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\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x\" \/>\n<meta property=\"og:description\" content=\"Tour configurable apps built using the ArcGIS API for JavaScript 4.x.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\" \/>\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=\"2020-07-14T17:07:27+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\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\"},\"author\":{\"name\":\"Beth Romero\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/fa3a111318a98f396c1545090bae2c26\"},\"headline\":\"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x\",\"datePublished\":\"2019-04-11T20:30:44+00:00\",\"dateModified\":\"2020-07-14T17:07:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\"},\"wordCount\":14,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"cats\",\"configurable apps\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\",\"name\":\"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-04-11T20:30:44+00:00\",\"dateModified\":\"2020-07-14T17:07:27+00:00\",\"description\":\"Tour configurable apps built using the ArcGIS API for JavaScript 4.x.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x\"}]},{\"@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\/fa3a111318a98f396c1545090bae2c26\",\"name\":\"Beth Romero\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/brhead-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/brhead-213x200.png\",\"caption\":\"Beth Romero\"},\"description\":\"Beth is a Product Engineer on the ArcGIS Online team.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/bromero_imagery\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x","description":"Tour configurable apps built using the ArcGIS API for JavaScript 4.x.","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\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x","og_locale":"en_US","og_type":"article","og_title":"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x","og_description":"Tour configurable apps built using the ArcGIS API for JavaScript 4.x.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2020-07-14T17:07:27+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\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x"},"author":{"name":"Beth Romero","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/fa3a111318a98f396c1545090bae2c26"},"headline":"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x","datePublished":"2019-04-11T20:30:44+00:00","dateModified":"2020-07-14T17:07:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x"},"wordCount":14,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["cats","configurable apps"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x","name":"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-04-11T20:30:44+00:00","dateModified":"2020-07-14T17:07:27+00:00","description":"Tour configurable apps built using the ArcGIS API for JavaScript 4.x.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Take a tour of Configurable Apps built with the ArcGIS API for JavaScript 4.x"}]},{"@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\/fa3a111318a98f396c1545090bae2c26","name":"Beth Romero","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/brhead-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/brhead-213x200.png","caption":"Beth Romero"},"description":"Beth is a Product Engineer on the ArcGIS Online team.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/bromero_imagery"}]}},"text_date":"April 11, 2019","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/take-a-tour-of-configurable-apps-built-with-the-arcgis-api-for-javascript-4-x","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Online","tag_data":[{"term_id":33101,"name":"cats","slug":"cats","term_group":0,"term_taxonomy_id":33101,"taxonomy":"post_tag","description":"","parent":0,"count":6,"filter":"raw"},{"term_id":42611,"name":"configurable apps","slug":"configurable-apps","term_group":0,"term_taxonomy_id":42611,"taxonomy":"post_tag","description":"","parent":0,"count":47,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"term_id":36821,"name":"ArcGIS Configurable Apps","slug":"configurable-apps","term_group":0,"term_taxonomy_id":36821,"taxonomy":"product","description":"","parent":36591,"count":94,"filter":"raw"},{"term_id":36551,"name":"ArcGIS Online","slug":"arcgis-online","term_group":0,"term_taxonomy_id":36551,"taxonomy":"product","description":"","parent":0,"count":2427,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=arcgis-online","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/489022","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\/6941"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=489022"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/489022\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=489022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=489022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=489022"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=489022"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=489022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}