{"id":1981682,"date":"2023-06-20T10:20:21","date_gmt":"2023-06-20T17:20:21","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1981682"},"modified":"2023-06-20T10:26:18","modified_gmt":"2023-06-20T17:26:18","slug":"a-fresh-new-look-for-pop-ups","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups","title":{"rendered":"A fresh new look for pop-ups"},"author":293472,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191,22941],"tags":[770582,42641,27491,769982],"industry":[],"product":[36831,36551],"class_list":["post-1981682","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-4-27","tag-arcgis-online","tag-jsapi4","tag-whats-new-june-2023","product-js-api-arcgis","product-arcgis-online"],"acf":{"short_description":"Learn about the new pop-up design updates in the ArcGIS Online June 2023 and ArcGIS Maps SDK for JavaScript version 4.27 release.","flexible_content":[{"acf_fc_layout":"content","content":"<p>Pop-ups are essential for allowing users to interact with GIS data visualizations. They provide context to your visualizations and allow users to view the detailed data for a specific area in your maps and apps. With pop-ups, you can display attribute information, charts, images, browse related records, and more. The possibilities are endless!<\/p>\n<p>In the <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/announcements\/whats-new-arcgis-online-june-2023\/\">June 2023 release of ArcGIS Online<\/a> and <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-arcgis-maps-sdk-for-javascript-4-27\/\">ArcGIS Maps SDK for JavaScript version 4.27<\/a> (JS Maps SDK), a few design enhancements were made to the pop-up for an even better user experience. The best part is that the map author or developer doesn\u2019t have to make any changes to the map or application to see these updates \u2013 they come out of the box! Let\u2019s dive into the pop-up design improvements.<\/p>\n<h2>Overview<\/h2>\n<p>The new pop-up updates include:<\/p>\n<ul>\n<li>Redesigned feature pagination and menu button<\/li>\n<li>Improved media pagination experience<\/li>\n<li>Streamlined color ramp with matching tooltips and interactive experience for charts<\/li>\n<\/ul>\n<p>First, let\u2019s check out a pre-configured pop-up in an <a href=\"https:\/\/jsapi.maps.arcgis.com\/home\/item.html?id=7a033152b84e42ef920deb43fa6a32e8\">ArcGIS Online web map<\/a> to see what it used to look like:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1981732,"id":1981732,"title":"popup-design-426","filename":"popup-design-426.png","filesize":150453,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\/popup-design-426","alt":"","author":"293472","description":"The previous popup design.","caption":"","name":"popup-design-426","status":"inherit","uploaded_to":1981682,"date":"2023-06-15 17:13:20","modified":"2023-06-15 19:48:08","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":1005,"height":662,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426.png","medium-width":396,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426.png","medium_large-width":768,"medium_large-height":506,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426.png","large-width":1005,"large-height":662,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426.png","1536x1536-width":1005,"1536x1536-height":662,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426.png","2048x2048-width":1005,"2048x2048-height":662,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426-706x465.png","card_image-width":706,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-426.png","wide_image-width":1005,"wide_image-height":662}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Now when you open that same map in ArcGIS Online or a JS Maps SDK version 4.27 application, the pop-up looks like this:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1981812,"id":1981812,"title":"popup-design-427","filename":"popup-design-427.png","filesize":154187,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\/popup-design-427","alt":"","author":"293472","description":"The updated popup design.","caption":"","name":"popup-design-427","status":"inherit","uploaded_to":1981682,"date":"2023-06-15 17:25:30","modified":"2023-06-15 19:47:50","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":1024,"height":684,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427.png","medium-width":391,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427.png","medium_large-width":768,"medium_large-height":513,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427.png","large-width":1024,"large-height":684,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427.png","1536x1536-width":1024,"1536x1536-height":684,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427.png","2048x2048-width":1024,"2048x2048-height":684,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427-696x465.png","card_image-width":696,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/popup-design-427.png","wide_image-width":1024,"wide_image-height":684}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Feature pagination and menu<\/h2>\n<p>The feature pagination buttons appear if you select an area on the map that returns multiple features. These allow the user to page through all the features that were returned from that selection.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1982052,"id":1982052,"title":"pagination-chart","filename":"pagination-chart.png","filesize":17783,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\/pagination-chart","alt":"","author":"293472","description":"A comparison of the previous and updated feature pagination design.","caption":"","name":"pagination-chart","status":"inherit","uploaded_to":1981682,"date":"2023-06-15 17:56:51","modified":"2023-06-15 19:46:50","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":1084,"height":216,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart.png","medium-width":464,"medium-height":92,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart.png","medium_large-width":768,"medium_large-height":153,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart.png","large-width":1084,"large-height":216,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart.png","1536x1536-width":1084,"1536x1536-height":216,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart.png","2048x2048-width":1084,"2048x2048-height":216,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart-826x165.png","card_image-width":826,"card_image-height":165,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/pagination-chart.png","wide_image-width":1084,"wide_image-height":216}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Often, users did not realize that clicking on the numbering in between the arrow buttons would open a feature menu to browse a list of features returned in the pop-up. Now, this button is more intuitive with an added <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/\">Calcite<\/a> icon so that users know that this is an interactive button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1981942,"id":1981942,"title":"feature-menu-button-427","filename":"feature-menu-button-427.png","filesize":21344,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\/feature-menu-button-427","alt":"The feature menu that opens when clicking on the menu button.","author":"293472","description":"The feature menu that opens when clicking on the newly designed menu button.","caption":"","name":"feature-menu-button-427","status":"inherit","uploaded_to":1981682,"date":"2023-06-15 17:40:00","modified":"2023-06-15 19:46:17","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":460,"height":234,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427.png","medium-width":460,"medium-height":234,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427.png","medium_large-width":460,"medium_large-height":234,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427.png","large-width":460,"large-height":234,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427.png","1536x1536-width":460,"1536x1536-height":234,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427.png","2048x2048-width":460,"2048x2048-height":234,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427.png","card_image-width":460,"card_image-height":234,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/feature-menu-button-427.png","wide_image-width":460,"wide_image-height":234}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Media pagination<\/h2>\n<p>When displaying multiple charts or images within a pop-up, you can generate a carousel to page through the items. The buttons to page through existed on the side of the charts and images, which took up space for those items to display. This layout also made it difficult for the user to page back and forth between items to compare chart data or images.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1982192,"id":1982192,"title":"media-pagination-426 copy","filename":"media-pagination-426-copy.gif","filesize":1435610,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\/media-pagination-426-copy","alt":"The previous media pagination experience showing how to page through charts or images.","author":"293472","description":"The previous media pagination experience showing how to page through charts or images.","caption":"","name":"media-pagination-426-copy","status":"inherit","uploaded_to":1981682,"date":"2023-06-15 18:19:00","modified":"2023-06-15 19:45:43","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":690,"height":579,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy.gif","medium-width":311,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy.gif","medium_large-width":690,"medium_large-height":579,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy.gif","large-width":690,"large-height":579,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy.gif","1536x1536-width":690,"1536x1536-height":579,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy.gif","2048x2048-width":690,"2048x2048-height":579,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy-554x465.gif","card_image-width":554,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-426-copy.gif","wide_image-width":690,"wide_image-height":579}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>With the new media pagination design, charts and images have more horizontal space to display content. The buttons to page through items were moved below the content so the user does not have to move the mouse much. An added count helps the user understand how many charts or images are available to visualize as well.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1982212,"id":1982212,"title":"media-pagination-427 copy","filename":"media-pagination-427-copy.gif","filesize":509364,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\/media-pagination-427-copy","alt":"The new media pagination experience when paging through charts or images.","author":"293472","description":"The new media pagination experience when paging through charts or images.","caption":"","name":"media-pagination-427-copy","status":"inherit","uploaded_to":1981682,"date":"2023-06-15 18:21:26","modified":"2023-06-15 19:45:01","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":690,"height":432,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy.gif","medium-width":417,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy.gif","medium_large-width":690,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy.gif","large-width":690,"large-height":432,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy.gif","1536x1536-width":690,"1536x1536-height":432,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy.gif","2048x2048-width":690,"2048x2048-height":432,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy.gif","card_image-width":690,"card_image-height":432,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/media-pagination-427-copy.gif","wide_image-width":690,"wide_image-height":432}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Charts<\/h2>\n<p>The pop-up charts themselves got a reboot! With new colors to represent your data and a modernized interaction, the user experience is now more refined.<\/p>\n"},{"acf_fc_layout":"content","content":"<h3>Default color ramp &amp; tooltips<\/h3>\n<p>Pop-up charts now have a new default color ramp! Previously, charts would render with a rainbow color palette that was bright and not aesthetically pleasing. Our UI\/UX team designed the color ramp to work well with light or dark themed applications. See the new color ramp in action with the dark theme in <a href=\"https:\/\/lboyd93.github.io\/educational-attainment\/\">this application<\/a>.<\/p>\n<p>Bar and column charts were also updated to display a different color for each value depicted in the chart, so the user can distinguish that the values are showing different fields. Tooltips used to be all one color and now the tooltips match the color of the value, making it easier to distinguish which value the user is hovering over.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1982322,"id":1982322,"title":"dark-theme-tooltip","filename":"dark-theme-tooltip.png","filesize":58862,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\/dark-theme-tooltip","alt":"A column chart showcasing the new default color ramp with matching tooltips in dark theme.","author":"293472","description":"A column chart showcasing the new default color ramp with matching tooltips in dark theme.","caption":"","name":"dark-theme-tooltip","status":"inherit","uploaded_to":1981682,"date":"2023-06-15 18:31:43","modified":"2023-06-15 19:43:36","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":575,"height":568,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip.png","medium-width":264,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip.png","medium_large-width":575,"medium_large-height":568,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip.png","large-width":575,"large-height":568,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip.png","1536x1536-width":575,"1536x1536-height":568,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip.png","2048x2048-width":575,"2048x2048-height":568,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip-471x465.png","card_image-width":471,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/dark-theme-tooltip.png","wide_image-width":575,"wide_image-height":568}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Interaction experience<\/h3>\n<p>The chart interaction experience was updated to easily visualize data in the charts when many fields are displayed. Zooming in via mouse or pinch (if on a touch screen) provides a scroll bar to visualize smaller subsets of the data.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1982362,"id":1982362,"title":"chart-interaction","filename":"chart-interaction.gif","filesize":1933058,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\/chart-interaction","alt":"A popup chart displaying the new design and showing how to interact with a lot of data.","author":"293472","description":"The new design for interacting with popup charts.","caption":"","name":"chart-interaction","status":"inherit","uploaded_to":1981682,"date":"2023-06-15 18:35:43","modified":"2023-06-15 19:42:53","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":600,"height":411,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction.gif","medium-width":381,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction.gif","medium_large-width":600,"medium_large-height":411,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction.gif","large-width":600,"large-height":411,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction.gif","1536x1536-width":600,"1536x1536-height":411,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction.gif","2048x2048-width":600,"2048x2048-height":411,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction.gif","card_image-width":600,"card_image-height":411,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/chart-interaction.gif","wide_image-width":600,"wide_image-height":411}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"sidebar","content":"<p>Due to this refactor, number types are now enforced for chart field values. If using Arcade expressions or elements to create chart field values, ensure the value is a number, not text.<\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"<h2>Conclusion<\/h2>\n<p>These new improvements for the pop-up design are available out of the box in web applications such as the Map Viewer, Instant Apps, and Experience Builder and apps built with the JS Maps SDK \u2013 no changes necessary! If you\u2019d like to explore the web map utilized in this blog, check out the pop-up configuration <a href=\"https:\/\/jsapi.maps.arcgis.com\/apps\/mapviewer\/index.html?webmap=7a033152b84e42ef920deb43fa6a32e8\">here<\/a>. You can also take a look at the same configuration built out with the JS Maps SDK in the <a href=\"https:\/\/lboyd93.github.io\/educational-attainment\/\">live application<\/a> and <a href=\"https:\/\/github.com\/lboyd93\/educational-attainment\">source code<\/a>.<\/p>\n<p>Happy mapping!<\/p>\n"}],"authors":[{"ID":293472,"user_firstname":"Lauren","user_lastname":"Boyd","nickname":"Lauren Boyd","user_nicename":"lauren-boyd","display_name":"Lauren Boyd","user_email":"LBoyd@esri.com","user_url":"https:\/\/github.com\/lboyd93","user_registered":"2021-11-20 01:01:42","user_description":"Lauren is a Senior Product Engineer on the ArcGIS Maps SDK for JavaScript team in Redlands, CA with her work focusing primarily on popups and security. She has worked at Esri for over 8 years and enjoys helping\/supporting geo-developers utilize the JavaScript Maps SDK into their awesome applications.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/LaurenBoydBlogCropped-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":1952092,"post_author":"4271","post_date":"2023-06-12 08:40:11","post_date_gmt":"2023-06-12 15:40:11","post_content":"","post_title":"What's New in ArcGIS Maps SDK for JavaScript (4.27)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-maps-sdk-for-javascript-4-27","to_ping":"","pinged":"","post_modified":"2024-11-10 00:18:26","post_modified_gmt":"2024-11-10 08:18:26","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1952092","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1909932,"post_author":"7641","post_date":"2023-06-14 22:15:22","post_date_gmt":"2023-06-15 05:15:22","post_content":"","post_title":"What's new in ArcGIS Online (June 2023)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-arcgis-online-june-2023","to_ping":"","pinged":"","post_modified":"2023-10-10 09:35:17","post_modified_gmt":"2023-10-10 16:35:17","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1909932","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/tile-popup-blog.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/banner-4.png"},"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>A fresh new look for pop-ups<\/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\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A fresh new look for pop-ups\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\" \/>\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=\"2023-06-20T17:26:18+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\/a-fresh-new-look-for-pop-ups#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\"},\"author\":{\"name\":\"Lauren Boyd\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/a93d293a2435834e9f0af1fc378528a1\"},\"headline\":\"A fresh new look for pop-ups\",\"datePublished\":\"2023-06-20T17:20:21+00:00\",\"dateModified\":\"2023-06-20T17:26:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\"},\"wordCount\":6,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"4.27\",\"ArcGIS Online\",\"jsapi4\",\"whats new june 2023\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\",\"name\":\"A fresh new look for pop-ups\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2023-06-20T17:20:21+00:00\",\"dateModified\":\"2023-06-20T17:26:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A fresh new look for pop-ups\"}]},{\"@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\/a93d293a2435834e9f0af1fc378528a1\",\"name\":\"Lauren Boyd\",\"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\/2022\/12\/LaurenBoydBlogCropped-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/LaurenBoydBlogCropped-213x200.png\",\"caption\":\"Lauren Boyd\"},\"description\":\"Lauren is a Senior Product Engineer on the ArcGIS Maps SDK for JavaScript team in Redlands, CA with her work focusing primarily on popups and security. She has worked at Esri for over 8 years and enjoys helping\/supporting geo-developers utilize the JavaScript Maps SDK into their awesome applications.\",\"sameAs\":[\"https:\/\/github.com\/lboyd93\",\"https:\/\/www.linkedin.com\/in\/lboyd93\/\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/lauren-boyd\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A fresh new look for pop-ups","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\/a-fresh-new-look-for-pop-ups","og_locale":"en_US","og_type":"article","og_title":"A fresh new look for pop-ups","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2023-06-20T17:26:18+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\/a-fresh-new-look-for-pop-ups#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups"},"author":{"name":"Lauren Boyd","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/a93d293a2435834e9f0af1fc378528a1"},"headline":"A fresh new look for pop-ups","datePublished":"2023-06-20T17:20:21+00:00","dateModified":"2023-06-20T17:26:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups"},"wordCount":6,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["4.27","ArcGIS Online","jsapi4","whats new june 2023"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups","name":"A fresh new look for pop-ups","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2023-06-20T17:20:21+00:00","dateModified":"2023-06-20T17:26:18+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/a-fresh-new-look-for-pop-ups#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"A fresh new look for pop-ups"}]},{"@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\/a93d293a2435834e9f0af1fc378528a1","name":"Lauren Boyd","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\/2022\/12\/LaurenBoydBlogCropped-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/12\/LaurenBoydBlogCropped-213x200.png","caption":"Lauren Boyd"},"description":"Lauren is a Senior Product Engineer on the ArcGIS Maps SDK for JavaScript team in Redlands, CA with her work focusing primarily on popups and security. She has worked at Esri for over 8 years and enjoys helping\/supporting geo-developers utilize the JavaScript Maps SDK into their awesome applications.","sameAs":["https:\/\/github.com\/lboyd93","https:\/\/www.linkedin.com\/in\/lboyd93\/"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/lauren-boyd"}]}},"text_date":"June 20, 2023","author_name":"Lauren Boyd","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/lauren-boyd","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/06\/banner-4.png","primary_product":"ArcGIS Online","tag_data":[{"term_id":770582,"name":"4.27","slug":"4-27","term_group":0,"term_taxonomy_id":770582,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":42641,"name":"ArcGIS Online","slug":"arcgis-online","term_group":0,"term_taxonomy_id":42641,"taxonomy":"post_tag","description":"","parent":0,"count":420,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":769982,"name":"whats new june 2023","slug":"whats-new-june-2023","term_group":0,"term_taxonomy_id":769982,"taxonomy":"post_tag","description":"","parent":0,"count":27,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":423,"filter":"raw"},{"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":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":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\/1981682","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\/293472"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1981682"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1981682\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1981682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1981682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1981682"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1981682"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1981682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}