{"id":1428982,"date":"2021-12-09T12:32:01","date_gmt":"2021-12-09T20:32:01","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1428982"},"modified":"2024-11-01T00:01:57","modified_gmt":"2024-11-01T07:01:57","slug":"part-1-introducing-arcade-pop-up-content-elements","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements","title":{"rendered":"Part 1: Introducing Arcade pop-up content elements"},"author":6981,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,22941],"tags":[28061,762272],"industry":[],"product":[36551],"class_list":["post-1428982","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-mapping","tag-pop-ups","tag-whats-new-december-2021","product-arcgis-online"],"acf":{"short_description":"Take your pop-ups to the next level by using Arcade to drive content elements.","flexible_content":[{"acf_fc_layout":"content","content":"<h2><span data-preserver-spaces=\"true\">Overview<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">You\u2019ve been able to use Arcade in your pop-ups for a while now with attribute expressions; however, as you\u2019ve become more experienced and comfortable with Arcade you\u2019ve been asking us to let you do more. With the latest release of ArcGIS Online, we\u2019re putting more power into your pop-ups and giving you a way to be more creative and deliver dynamic and engaging pop-ups. Instead of just being able to return attributes (almost like a virtual field) from Arcade, you can now use Arcade to define entire blocks of content inside your pop-up and have it display just like any existing content element (charts, images, fields list, etc.)<\/span><\/p>\n<h2><span data-preserver-spaces=\"true\">How is it different?<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Modern pop-ups allow you to mix and match different content (media, fields list, rich text) elements and you\u2019ve been able to add some additional smarts to those through attribute expressions. What we\u2019ve noticed through talking to you and in our experimentation is that often when dealing with multiple attribute expressions there is a high degree of duplication of logic between different attribute expressions.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This has the potential to reduce performance but also becomes a challenge to manage anytime you need to tweak your logic. This is particularly apparent when multiple expressions rely on data from another layer through FeatureSets. Quite often you either need to compromise a little on the presentation of the data to be efficient or typically write additional expressions just to get what you want.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">With Arcade driven pop-up content, you can use the Arcade to massage your data, but also define what the arcade content is whether that\u2019s:<\/span><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Rich text (HTML)<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Charts<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Formatted list of fields<\/span><\/li>\n<\/ul>\n<p><span data-preserver-spaces=\"true\">In the Arcade expression, you\u2019ll define not only the data but other aspects of the content where applicable, like its title, description, alternative text, etc., giving you complete control and making it easier to reuse logic and data. Arcade content elements are compatible with any application that is using the latest version of the ArcGIS API for JavaScript.<\/span><\/p>\n<h2><span data-preserver-spaces=\"true\">How does it work?<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Before we dive into an example, let\u2019s talk quickly about what you need to know. Arcade content differs slightly from regular attribute expressions. Instead of returning a number, date, or string, they return a dictionary, and not just any dictionary it will return a dictionary whose structure and casing matches the webmap specification for that given pop-up content type. You can find a bit of extra information on that specification\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/developers.arcgis.com\/web-map-specification\/objects\/popupElement\/\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">here<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">To help make this a bit easier to get started when you add new Arcade content to your pop-up, we&#8217;ve included a series of templates that outline the expected structure and casing of the dictionary based on the content type you\u2019re trying to use. The easiest one to get started with is the rich text template and it&#8217;s also the default. So, let\u2019s start there.<\/span><\/p>\n<h2><span data-preserver-spaces=\"true\">Using Rich text<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Rich text can be powerful as it lets you access any of the\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/reference\/supported-html.htm\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">supported HTML<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0tags in ArcGIS Online. It is also a heavily requested feature that we\u2019ve heard from you with Arcade inside of pop-ups.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">\u201cLet me return HTML via Arcade in my pop-up\u201d Well; Now you can!<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Let\u2019s use\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">Lisa\u2019s<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0blog post as inspiration and add a splash of color to our pop-up.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">In this example, we&#8217;ll add the earthquakes live feed layer into a map and configure a pop-up that:<\/span><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Categorizes the raw magnitude values, and depth values into some general groupings<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Color code the magnitude categories based on size<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Format the data to make it more readable<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Add in a link to the USGS site for more information<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Show an image of the Richter scale to give some context<\/span><\/li>\n<\/ul>\n<p><span data-preserver-spaces=\"true\">Here&#8217;s a quick preview of what we&#8217;re going for and a\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html?webmap=430d86ab8cef40c68d353c0aa81dc743\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">map<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0where you can take a closer look yourself and copy the expression shown below:<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1429062,"id":1429062,"title":"Popup example","filename":"Earthquakes.png","filesize":192479,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\/earthquakes-3","alt":"pop-up example","author":"6981","description":"","caption":"","name":"earthquakes-3","status":"inherit","uploaded_to":1428982,"date":"2021-12-09 13:25:34","modified":"2021-12-09 13:25:48","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":429,"height":634,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes.png","medium-width":177,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes.png","medium_large-width":429,"medium_large-height":634,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes.png","large-width":429,"large-height":634,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes.png","1536x1536-width":429,"1536x1536-height":634,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes.png","2048x2048-width":429,"2048x2048-height":634,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes-315x465.png","card_image-width":315,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/Earthquakes.png","wide_image-width":429,"wide_image-height":634}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Everything I\u2019ve outlined above is possible to do today with an existing text content element. However it forces you to use multiple expressions. In this example, you\u2019d probably end up with at least 3 maybe even more. By using a single expression, you have more opportunities to consolidate your logic, reuse parts of your expression, and in general, it&#8217;s just easier to maintain. Let\u2019s take a close look at the expression used.<\/p>\n<pre style=\"color: #000000;background: #ffffff\"><span style=\"color: #800000;font-weight: bold\">var<\/span> mag <span style=\"color: #808030\">=<\/span> $feature<span style=\"color: #808030\">.<\/span>mag\r\n<span style=\"color: #800000;font-weight: bold\">var<\/span> depth <span style=\"color: #808030\">=<\/span> Round<span style=\"color: #808030\">(<\/span>$feature<span style=\"color: #808030\">.<\/span>depth<span style=\"color: #808030\">,<\/span><span style=\"color: #008c00\">2<\/span><span style=\"color: #808030\">)<\/span>\r\n<span style=\"color: #800000;font-weight: bold\">var<\/span> magCats <span style=\"color: #808030\">=<\/span> <span style=\"color: #808030\">[<\/span><span style=\"color: #800080\">{<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">name<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">:<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">Micro to Light<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">,<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">color<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">:<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">yellow<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">}<\/span><span style=\"color: #808030\">,<\/span>\r\n               <span style=\"color: #800080\">{<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">name<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">:<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">Moderate to Strong<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">,<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">color<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">:<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">orange<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">}<\/span><span style=\"color: #808030\">,<\/span>\r\n               <span style=\"color: #800080\">{<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">name<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">:<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">Major to Great<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">,<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">color<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">:<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">red<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">}<\/span><span style=\"color: #808030\">,<\/span>\r\n               <span style=\"color: #800080\">{<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">name<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">:<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">Unknown<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">,<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">color<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">:<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">grey<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #800080\">}<\/span><span style=\"color: #808030\">]<\/span>\r\n<span style=\"color: #800000;font-weight: bold\">var<\/span> depthCats <span style=\"color: #808030\">=<\/span> <span style=\"color: #808030\">[<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">shallow<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">,<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">intermediate<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">,<\/span> <span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">deep<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">]<\/span>\r\n<span style=\"color: #800000;font-weight: bold\">var<\/span> dateSimple <span style=\"color: #808030\">=<\/span> Text<span style=\"color: #808030\">(<\/span>$feature<span style=\"color: #808030\">.<\/span>eventTime<span style=\"color: #808030\">,<\/span><span style=\"color: #800000\">'<\/span><span style=\"color: #0000e6\">dddd MMM D<\/span><span style=\"color: #800000\">'<\/span><span style=\"color: #808030\">)<\/span>\r\n<span style=\"color: #800000;font-weight: bold\">var<\/span> findDepthCat <span style=\"color: #808030\">=<\/span> When<span style=\"color: #808030\">(<\/span>depth <span style=\"color: #808030\">&lt;=<\/span> <span style=\"color: #008c00\">70<\/span><span style=\"color: #808030\">,<\/span> depthCats<span style=\"color: #808030\">[<\/span><span style=\"color: #008c00\">0<\/span><span style=\"color: #808030\">]<\/span><span style=\"color: #808030\">,<\/span>\r\n                        depth <span style=\"color: #808030\">&lt;=<\/span> <span style=\"color: #008c00\">300<\/span><span style=\"color: #808030\">,<\/span> depthCats<span style=\"color: #808030\">[<\/span><span style=\"color: #008c00\">1<\/span><span style=\"color: #808030\">]<\/span><span style=\"color: #808030\">,<\/span> \r\n                        depth <span style=\"color: #808030\">&gt;<\/span> <span style=\"color: #008c00\">300<\/span><span style=\"color: #808030\">,<\/span> depthCats<span style=\"color: #808030\">[<\/span><span style=\"color: #008c00\">2<\/span><span style=\"color: #808030\">]<\/span><span style=\"color: #808030\">,<\/span> \r\n                        <span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">Unknown depth<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">)<\/span>\r\n                        \r\n<span style=\"color: #800000;font-weight: bold\">var<\/span> findMagCatandColor <span style=\"color: #808030\">=<\/span> When<span style=\"color: #808030\">(<\/span>mag <span style=\"color: #808030\">&lt;=<\/span> <span style=\"color: #008000\">4.9<\/span><span style=\"color: #808030\">,<\/span>magCats<span style=\"color: #808030\">[<\/span><span style=\"color: #008c00\">0<\/span><span style=\"color: #808030\">]<\/span><span style=\"color: #808030\">,<\/span>\r\n                              mag <span style=\"color: #808030\">&lt;=<\/span> <span style=\"color: #008000\">6.9<\/span><span style=\"color: #808030\">,<\/span> magCats<span style=\"color: #808030\">[<\/span><span style=\"color: #008c00\">1<\/span><span style=\"color: #808030\">]<\/span><span style=\"color: #808030\">,<\/span>\r\n                              mag <span style=\"color: #808030\">&gt;<\/span> <span style=\"color: #008000\">6.9<\/span><span style=\"color: #808030\">,<\/span> magCats<span style=\"color: #808030\">[<\/span><span style=\"color: #008c00\">2<\/span><span style=\"color: #808030\">]<\/span><span style=\"color: #808030\">,<\/span>\r\n                              magCats<span style=\"color: #808030\">[<\/span><span style=\"color: #008c00\">3<\/span><span style=\"color: #808030\">]<\/span><span style=\"color: #808030\">)<\/span>\r\n                              \r\n\r\n<span style=\"color: #800000;font-weight: bold\">return<\/span> <span style=\"color: #800080\">{<\/span>\r\n    <span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">type<\/span><span style=\"color: #800000\">\"<\/span> <span style=\"color: #800080\">:<\/span> <span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">text<\/span><span style=\"color: #800000\">\"<\/span><span style=\"color: #808030\">,<\/span>\r\n    <span style=\"color: #800000\">\"<\/span><span style=\"color: #0000e6\">text<\/span><span style=\"color: #800000\">\"<\/span> <span style=\"color: #800080\">:<\/span> <span style=\"color: #800000\">`<\/span><span style=\"color: #0000e6\">&lt;p&gt;On <\/span><span style=\"color: #800000\">${<\/span><span style=\"color: #797997\">dateSimple<\/span><span style=\"color: #800000\">}<\/span><span style=\"color: #0000e6\"> there was a &lt;span style=\"color:<\/span><span style=\"color: #800000\">${<\/span><span style=\"color: #797997\">findMagCatandColor<\/span><span style=\"color: #808030\">.<\/span><span style=\"color: #797997\">color<\/span><span style=\"color: #800000\">}<\/span><span style=\"color: #0000e6\">;\"&gt;<\/span><span style=\"color: #800000\">${<\/span><span style=\"color: #797997\">findMagCatandColor<\/span><span style=\"color: #808030\">.<\/span><span style=\"color: #797997\">name<\/span><span style=\"color: #800000\">}<\/span><span style=\"color: #0000e6\"> &lt;\/span&gt;sized earthquake at a <\/span><span style=\"color: #800000\">${<\/span><span style=\"color: #797997\">findDepthCat<\/span><span style=\"color: #800000\">}<\/span><span style=\"color: #0000e6\"> depth (<\/span><span style=\"color: #800000\">${<\/span><span style=\"color: #797997\">depth<\/span><span style=\"color: #800000\">}<\/span><span style=\"color: #0000e6\">km).&lt;\/p&gt;<\/span>\r\n<span style=\"color: #0000e6\">\u00a0\u00a0\u00a0\u00a0&lt;a href=\"<\/span><span style=\"color: #800000\">${<\/span><span style=\"color: #797997\">$feature<\/span><span style=\"color: #808030\">.<\/span><span style=\"color: #797997\">url<\/span><span style=\"color: #800000\">}<\/span><span style=\"color: #0000e6\">\"&gt;Click to learn more.&lt;\/a&gt;<\/span>\r\n<span style=\"color: #0000e6\">\u00a0\u00a0\u00a0\u00a0&lt;img src=\"https:\/\/i.cbc.ca\/1.1877835.1380772347!\/httpImage\/image.jpg_gen\/derivatives\/original_1180\/earthquake-magnitude.jpg\"&gt;&lt;\/img&gt;<\/span><span style=\"color: #800000\">`<\/span>\r\n    \r\n<span style=\"color: #800080\">}<\/span>\r\n<\/pre>\n<p><!--Created using ToHtml.com on 2021-12-09 13:33:37 UTC --><\/p>\n<p><span data-preserver-spaces=\"true\">You\u2019ll notice that in this example we\u2019re using\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/logic\/#template-literals\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">template literals<\/span><\/a><span data-preserver-spaces=\"true\"> instead of a regular string when returning the text property of the dictionary. Template literals make complex strings easier to read because their notation makes it easy to substitute in variables and keep the string itself readable in code. Additionally, because HTML supports new lines natively you can easily copy and paste in HTML and then replace or add your variables as needed all while being able to easily read the results.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The return dictionary has two properties\u00a0<\/span><strong><span data-preserver-spaces=\"true\">type<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0and\u00a0<\/span><strong><span data-preserver-spaces=\"true\">text\u00a0<\/span><\/strong><span data-preserver-spaces=\"true\">when returning rich text content elements. Type informs the pop-up itself what content type to expect from the Arcade expression. Text here is the HTML or text you want to show in the pop-up. Charts and field lists have a more complicated structure that we&#8217;ll cover in Part 2 of this blog series but if you&#8217;re eager to jump ahead when you add an Arcade content element to your pop-up just explore the new templates tab in the Arcade expression editor.<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1429112,"id":1429112,"title":"editorTemplates","filename":"editorTemplates.png","filesize":3735,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\/editortemplates","alt":"arcade content element templates","author":"6981","description":"","caption":"","name":"editortemplates","status":"inherit","uploaded_to":1428982,"date":"2021-12-09 13:40:03","modified":"2021-12-09 13:40:11","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":734,"height":252,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates.png","medium-width":464,"medium-height":159,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates.png","medium_large-width":734,"medium_large-height":252,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates.png","large-width":734,"large-height":252,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates.png","1536x1536-width":734,"1536x1536-height":252,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates.png","2048x2048-width":734,"2048x2048-height":252,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates.png","card_image-width":734,"card_image-height":252,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/editorTemplates.png","wide_image-width":734,"wide_image-height":252}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Another place to draw some inspiration from is the new location tracking layer pop-up in Map Viewer. When you add a location tracking layer to the Map Viewer it will be automatically styled to help make it easier to interact with your location tracking layers outside of Track Viewer. To help make the pop-up look and feel like the pop-up in Track Viewer we&#8217;re using Arcade content elements and dynamically adjusting the pop-up based on the feature data.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1429142,"id":1429142,"title":"LTS","filename":"LTS.png","filesize":10184,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\/lts","alt":"location tracking pop-up","author":"6981","description":"","caption":"","name":"lts","status":"inherit","uploaded_to":1428982,"date":"2021-12-09 13:47:02","modified":"2021-12-09 13:47:10","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":468,"height":249,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS.png","medium-width":464,"medium-height":247,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS.png","medium_large-width":468,"medium_large-height":249,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS.png","large-width":468,"large-height":249,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS.png","1536x1536-width":468,"1536x1536-height":249,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS.png","2048x2048-width":468,"2048x2048-height":249,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS.png","card_image-width":468,"card_image-height":249,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/LTS.png","wide_image-width":468,"wide_image-height":249}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><span data-preserver-spaces=\"true\">Hopefully, the examples above help give you some ideas on how you could apply this new feature to your pop-ups, or maybe you already had a great idea and just needed the right tool for the job. Whatever the driver is we can\u2019t wait to see what you build. Stay tuned for Part 2 where we cover charts and fields lists, and keep an eye out for an upcoming blog by <\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.esri.com\/arcgis-blog\/?s=#&amp;author=kekenes\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">Kristian Ekenes<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0where he covers how to take advantage of this new feature and more in cluster pop-ups. Don&#8217;t forget to head over to the\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/profiles\/#popup-element\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">Arcade documentation<\/span><\/a><span data-preserver-spaces=\"true\"> to learn more about this new profile.<\/span><\/p>\n"}],"authors":[{"ID":6981,"user_firstname":"Paul","user_lastname":"Barker","nickname":"Paul Barker","user_nicename":"pbarker_esri","display_name":"Paul Barker","user_email":"PBarker@esri.com","user_url":"http:\/\/www.arcgis.com","user_registered":"2018-03-02 00:19:05","user_description":"Product Engineer for ArcGIS Online and technology enthusiast.","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/ca4f6dbef8cb6af4546310cabd3eb9a72816fbe0d68565c1e9531a955581ed13?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/ca4f6dbef8cb6af4546310cabd3eb9a72816fbe0d68565c1e9531a955581ed13?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/12\/Card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/06\/Banner-4.jpg"},"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>Part 1: Introducing Arcade pop-up content elements<\/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\/part-1-introducing-arcade-pop-up-content-elements\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Part 1: Introducing Arcade pop-up content elements\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\" \/>\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=\"2024-11-01T07:01:57+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\/part-1-introducing-arcade-pop-up-content-elements#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\"},\"author\":{\"name\":\"Paul Barker\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/846786f93743fa3bc93d8dfb0174351e\"},\"headline\":\"Part 1: Introducing Arcade pop-up content elements\",\"datePublished\":\"2021-12-09T20:32:01+00:00\",\"dateModified\":\"2024-11-01T07:01:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\"},\"wordCount\":6,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"pop-ups\",\"what's new december 2021\"],\"articleSection\":[\"Arcade\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\",\"name\":\"Part 1: Introducing Arcade pop-up content elements\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-12-09T20:32:01+00:00\",\"dateModified\":\"2024-11-01T07:01:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Part 1: Introducing Arcade pop-up content elements\"}]},{\"@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\/846786f93743fa3bc93d8dfb0174351e\",\"name\":\"Paul Barker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ca4f6dbef8cb6af4546310cabd3eb9a72816fbe0d68565c1e9531a955581ed13?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ca4f6dbef8cb6af4546310cabd3eb9a72816fbe0d68565c1e9531a955581ed13?s=96&d=blank&r=g\",\"caption\":\"Paul Barker\"},\"description\":\"Product Engineer for ArcGIS Online and technology enthusiast.\",\"sameAs\":[\"http:\/\/www.arcgis.com\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/pbarker_esri\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Part 1: Introducing Arcade pop-up content elements","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\/part-1-introducing-arcade-pop-up-content-elements","og_locale":"en_US","og_type":"article","og_title":"Part 1: Introducing Arcade pop-up content elements","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-11-01T07:01:57+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\/part-1-introducing-arcade-pop-up-content-elements#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements"},"author":{"name":"Paul Barker","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/846786f93743fa3bc93d8dfb0174351e"},"headline":"Part 1: Introducing Arcade pop-up content elements","datePublished":"2021-12-09T20:32:01+00:00","dateModified":"2024-11-01T07:01:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements"},"wordCount":6,"commentCount":4,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["pop-ups","what's new december 2021"],"articleSection":["Arcade","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements","name":"Part 1: Introducing Arcade pop-up content elements","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-12-09T20:32:01+00:00","dateModified":"2024-11-01T07:01:57+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/part-1-introducing-arcade-pop-up-content-elements#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Part 1: Introducing Arcade pop-up content elements"}]},{"@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\/846786f93743fa3bc93d8dfb0174351e","name":"Paul Barker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ca4f6dbef8cb6af4546310cabd3eb9a72816fbe0d68565c1e9531a955581ed13?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ca4f6dbef8cb6af4546310cabd3eb9a72816fbe0d68565c1e9531a955581ed13?s=96&d=blank&r=g","caption":"Paul Barker"},"description":"Product Engineer for ArcGIS Online and technology enthusiast.","sameAs":["http:\/\/www.arcgis.com"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/pbarker_esri"}]}},"text_date":"December 9, 2021","author_name":"Paul Barker","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/pbarker_esri","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/06\/Banner-4.jpg","primary_product":"ArcGIS Online","tag_data":[{"term_id":28061,"name":"pop-ups","slug":"pop-ups","term_group":0,"term_taxonomy_id":28061,"taxonomy":"post_tag","description":"","parent":0,"count":39,"filter":"raw"},{"term_id":762272,"name":"what's new december 2021","slug":"whats-new-december-2021","term_group":0,"term_taxonomy_id":762272,"taxonomy":"post_tag","description":"","parent":0,"count":25,"filter":"raw"}],"category_data":[{"term_id":777102,"name":"Arcade","slug":"arcade","term_group":0,"term_taxonomy_id":777102,"taxonomy":"category","description":"","parent":0,"count":98,"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":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\/1428982","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\/6981"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1428982"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1428982\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1428982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1428982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1428982"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1428982"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1428982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}