{"id":1438712,"date":"2022-01-05T07:30:08","date_gmt":"2022-01-05T15:30:08","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1438712"},"modified":"2022-02-17T12:35:51","modified_gmt":"2022-02-17T20:35:51","slug":"authoring-pop-ups-using-html-source-editing","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/authoring-pop-ups-using-html-source-editing","title":{"rendered":"Authoring pop-ups using HTML source editing"},"author":58731,"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":[33511,33371,366492],"industry":[],"product":[36551],"class_list":["post-1438712","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-configuration","tag-map-viewer","tag-pop-up","product-arcgis-online"],"acf":{"short_description":"Learn about the pop-up HTML source editing experience in the Map Viewer.","flexible_content":[{"acf_fc_layout":"content","content":"

HTML source editing is now available for pop-ups in the new Map Viewer. This has always been a popular feature in Map Viewer Classic and has been top of the list for both us and you to add into Map Viewer. This powerful feature gives you that extra freedom when authoring your pop-ups. You can customize colors, sizing, tables, and much more. Let\u2019s jump into how it works.<\/p>\n"},{"acf_fc_layout":"content","content":"

Getting started<\/strong><\/h3>\n

The HTML source editing experience will feel familiar to those that have authored Text<\/strong> content (previously called Custom attribute display) in Map Viewer Classic. To get started, open the Pop-ups pane by clicking the Configure pop-ups<\/strong> button on the right toolbar. In the Pop-ups pane, you\u2019ll see a button called Add content<\/strong>; click that and select Text<\/strong>. This will open the rich text editor. On the text editor toolbar, you\u2019ll see a new button called Source<\/strong>. Clicking Source<\/strong> will switch the editor from the rich text view to the source view. The source view is where you write HTML to power your pop-up. Re-clicking the Source<\/strong> button will switch the editor back to the rich text view, allowing you to preview your custom content and display it in your pop-up.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1440532,"id":1440532,"title":"HTMLSourceEditingWorkflow","filename":"HTMLSourceEditingWorkflow.gif","filesize":169165,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/authoring-pop-ups-using-html-source-editing\/htmlsourceeditingworkflow","alt":"","author":"58731","description":"","caption":"","name":"htmlsourceeditingworkflow","status":"inherit","uploaded_to":1438712,"date":"2021-12-16 21:36:21","modified":"2021-12-16 21:36:21","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":1408,"height":858,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow.gif","medium-width":428,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow.gif","medium_large-width":768,"medium_large-height":468,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow.gif","large-width":1408,"large-height":858,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow.gif","1536x1536-width":1408,"1536x1536-height":858,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow.gif","2048x2048-width":1408,"2048x2048-height":858,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow-763x465.gif","card_image-width":763,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/HTMLSourceEditingWorkflow.gif","wide_image-width":1408,"wide_image-height":858}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Working with previously configured HTML pop-ups<\/strong><\/h3>\n

You might notice some small differences in your HTML when re-entering the source view or when viewing the HTML of a pop-up authored in Map Viewer Classic. These differences include tag additions and substitutions, and the relocation of attributes and their properties. There are two main reasons for these changes. First, the Map Viewer\u2019s rich text editor aligns with HTML5 standards and conventions. Second, to reduce the likelihood of attributes being overridden by the app displaying them, presentational attributes are sometimes moved to inline styles within a tag. This happens automatically whether you are editing through the rich text experience or through the source directly.<\/p>\n

Examples<\/strong><\/h3>\n

Now for the fun part, examples of how HTML source editing can be used to elevate pop-ups.<\/p>\n

Matching text color to the map style<\/strong><\/p>\n

One of the most popular use cases of HTML source editing in pop-ups is matching pop-up text color to the map style. This technique combines Arcade<\/a> and HTML source editing<\/a> to create a pop-up that is better connected to the map and its features. To learn more on how to accomplish this, check out Lisa\u2019s blog<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1440542,"id":1440542,"title":"TextColourExample","filename":"TextColourExample.png","filesize":59161,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/authoring-pop-ups-using-html-source-editing\/textcolourexample","alt":"","author":"58731","description":"","caption":"","name":"textcolourexample","status":"inherit","uploaded_to":1438712,"date":"2021-12-16 21:39:58","modified":"2021-12-16 21:39:58","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":657,"height":589,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample.png","medium-width":291,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample.png","medium_large-width":657,"medium_large-height":589,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample.png","large-width":657,"large-height":589,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample.png","1536x1536-width":657,"1536x1536-height":589,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample.png","2048x2048-width":657,"2048x2048-height":589,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample-519x465.png","card_image-width":519,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TextColourExample.png","wide_image-width":657,"wide_image-height":589}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Tables<\/strong><\/p>\n

Sometimes a table is the best way to summarize a feature’s attributes. Building a table from scratch allows you to go beyond the pre-formatted, two-column Fields list by letting you tailor the size, styles, and values of your table. A great example of this can be seen in this predominance map<\/a> of disabilities in Sacramento, California. Check out the source view of the Text content element to see how you can create a table just like this.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1441612,"id":1441612,"title":"TableMapExample","filename":"TableMapExample.png","filesize":476352,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/authoring-pop-ups-using-html-source-editing\/tablemapexample","alt":"","author":"58731","description":"","caption":"","name":"tablemapexample","status":"inherit","uploaded_to":1438712,"date":"2021-12-17 15:41:17","modified":"2021-12-17 15:41: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":1469,"height":901,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample.png","medium-width":426,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample.png","medium_large-width":768,"medium_large-height":471,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample.png","large-width":1469,"large-height":901,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample.png","1536x1536-width":1469,"1536x1536-height":901,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample.png","2048x2048-width":1469,"2048x2048-height":901,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample-758x465.png","card_image-width":758,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/12\/TableMapExample.png","wide_image-width":1469,"wide_image-height":901}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Table tips<\/strong><\/p>\n

Tables can take a bit of time to get just right, and we\u2019re still working on fine tuning the experience around tables, so here are some tips to keep in mind while creating tables or migrating existing tables.<\/p>\n