{"id":2098692,"date":"2023-10-26T02:00:03","date_gmt":"2023-10-26T09:00:03","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2098692"},"modified":"2023-10-27T10:45:41","modified_gmt":"2023-10-27T17:45:41","slug":"improving-the-rich-text-editing-experience-in-pop-ups","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/improving-the-rich-text-editing-experience-in-pop-ups","title":{"rendered":"Improving the rich text editing experience in pop-ups"},"author":319692,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[366492,772042,771812],"industry":[],"product":[36551],"class_list":["post-2098692","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-pop-up","tag-rich-text","tag-whats-new-october-2023","product-arcgis-online"],"acf":{"authors":[{"ID":319692,"user_firstname":"Taylor","user_lastname":"McNeil","nickname":"Taylor McNeil","user_nicename":"tmcneil","display_name":"Taylor McNeil","user_email":"tmcneil@esri.com","user_url":"","user_registered":"2022-10-06 12:43:53","user_description":"Taylor is a Product Engineer on the ArcGIS Online team based in Nova Scotia, Canada. She has received a BSc in Biology and a MSc in Applied Geomatics. When she's not at work, she can be found taking care of her houseplants, reading copious amounts of fiction, and exploring local thrift stores.","user_avatar":""}],"short_description":"Learn more about how we've made creating custom pop-ups with rich text easier than ever before. ","flexible_content":[{"acf_fc_layout":"content","content":"

Configuring and customizing your pop-ups is a key step to authoring an engaging and informative web map. One of the simplest and most effective ways to enhance your pop-ups is by using text elements. The rich text editor in Map Viewer provides a simple interface to input and format how text, attribute expressions, and fields will display in your pop-up. In addition to the provided formatting options, the editor also supports a subset of HTML<\/a> for further customization.<\/p>\n

In the latest update of ArcGIS Online, we\u2019ve made some exciting improvements to the rich text editor to make authoring custom pop-ups easier than ever before. Let\u2019s take a closer look at some of the changes\u2026<\/p>\n"},{"acf_fc_layout":"content","content":"

Rich text editor enhancements<\/h1>\n"},{"acf_fc_layout":"content","content":"
\n
\"New
New functionality in the pop-up rich text editor in Map Viewer includes a new font color picker and buttons to easily insert fields and tables.<\/figcaption><\/figure>\n<\/div>\n"},{"acf_fc_layout":"content","content":"

Insert fields and expressions<\/h2>\n

If you\u2019ve previously authored pop-ups in Map Viewer, you\u2019ll likely be familiar with how to insert fields or expressions into your rich text elements. Typing an \u2018{\u2018 into the text editor will cause a list of all available fields and expressions in your layer to appear in a dropdown menu.<\/p>\n

While this method is still supported, there is now a dedicated button on the editor toolbar to provide an alternative way to insert fields or expressions into your pop-up with a single click.<\/p>\n"},{"acf_fc_layout":"content","content":"

\n
\"Inserting
Easily insert a field or expression into the rich text editor using the new fields list button.<\/figcaption><\/figure>\n<\/div>\n"},{"acf_fc_layout":"content","content":"

Selecting the felds list button on the editor toolbar will display all fields and expressions in your layer in a single list.<\/p>\n

By default, any attribute expressions on the layer will display at the top, followed by the layer fields. If you already know the field or expression you want to insert, you can type in the search bar to filter the available options. Alternatively, sort the entire list by field name or display name using the Sort menu.<\/p>\n"},{"acf_fc_layout":"content","content":"

\n
\"The
All fields and expressions in the layer will display in the fields list button menu and can be sorted by field or display name.<\/figcaption><\/figure>\n<\/div>\n"},{"acf_fc_layout":"sidebar","content":"

Note:<\/strong> Ensure that attribute expressions within your map have a unique and informative title. Expressions authored with the default title of \u201cNew expression<\/em>\u201d will only display the expression field reference – e.g., {expression\/expr0} – in the fields list button menu.<\/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":"

Change font color<\/h2>\n

Color is often used to convey meaning or importance in pop-up text. You may want to highlight a portion of text in a different color to ensure it stands out to your readers, or, match the text color in your pop-up to the feature\u2019s symbology.<\/p>\n

The new font color button provides you with two methods to color your text: Static or Data-driven.<\/p>\n"},{"acf_fc_layout":"content","content":"

Static font color<\/h3>\n

The previous color picker in the rich text editor only provided a small subset of colors to assign to your text. If you wanted to apply a color that wasn\u2019t present in this list, you would have use HTML to assign the color to the respective text elements.<\/p>\n

Now, the static color picker provides you with the ability to select any<\/em> color for your text, no HTML required. Simply highlight the text and use the color swatch and slider to select and assign a custom color, or, directly enter a hexadecimal code corresponding to a known color value. By default, this will be the option that appears when you select the font color button from the editor toolbar.<\/p>\n"},{"acf_fc_layout":"content","content":"

\"The
Comparison of the previous font color picker (left) and the new static font color picker (right) in Map Viewer’s rich text editor.<\/figcaption><\/figure>\n"},{"acf_fc_layout":"content","content":"

Data-driven font color<\/h3>\n

If you\u2019ve read some of our past pop-up blogs, you might already be familiar with how color can be conditionally applied to your pop-up text by leveraging arcade. If you haven\u2019t already, I highly recommend pausing to read Lisa Berry\u2019s blog on the subject here<\/a> before continuing.<\/p>\n

Previously, coloring your pop-up text with an arcade expression required you to open the HTML source view and insert the expression within the relevant style tag. Now, with the introduction of the data-driven color picker, there\u2019s no need to edit the raw HTML.<\/p>\n"},{"acf_fc_layout":"content","content":"

Let’s look at how it works with an example:<\/p>\n

Example: Data-driven font color with Arcade<\/h4>\n

I have a web map with a layer showing the average concentration of particulate matter smaller than 2.5 micrometers (PM 2.5) in the air on a global scale from 1998-2016.<\/p>\n

In my pop-up, I want:<\/p>\n