{"id":1466122,"date":"2022-02-14T07:50:01","date_gmt":"2022-02-14T15:50:01","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1466122"},"modified":"2022-02-14T07:49:49","modified_gmt":"2022-02-14T15:49:49","slug":"pretty-in-pink-3","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3","title":{"rendered":"Pretty in pink part 3: Make a list widget"},"author":7411,"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":[23201,26451,763822,27911,32751],"industry":[],"product":[400032],"class_list":["post-1466122","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-cartographic-design","tag-cartography","tag-interaction","tag-tutorial","tag-web-apps","product-experience-builder"],"acf":{"short_description":"Configure a list widget in ArcGIS Experience Builder to guide users through your map.","flexible_content":[{"acf_fc_layout":"content","content":"<p>Welcome to the third and final instalment in this tutorial series. If you want to start at the beginning, try <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/pretty-in-pink-1\/\" target=\"_blank\" rel=\"noopener\">Make a map<\/a>. If you want to start in the middle, try <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/\" target=\"_blank\" rel=\"noopener\">Make an app<\/a>. But you can also start right here if you like, where I&#8217;ll show you how finish this <a href=\"https:\/\/experience.arcgis.com\/experience\/1fdbae8eca4f45c4b3feb341d4b2d8e2\" target=\"_blank\" rel=\"noopener\">web map experience<\/a> about pink lakes around the world.<\/p>\n<p>Today I&#8217;ll show you how to configure the list widget in ArcGIS Experience Builder, which allows you to give a guided tour of your map&#8217;s features and customize it however you like.<\/p>\n<ul>\n<li><a href=\"#list\">Add a list widget<\/a><\/li>\n<li><a href=\"#content\">Add content to the list<\/a><\/li>\n<li><a href=\"#actions\">Manage actions<\/a><\/li>\n<li><a href=\"#style\">Style the list<\/a><\/li>\n<\/ul>\n<p><em>As before,<\/em> <em>If you need more instructions on any of the steps below, I recommend trying this lesson: <a href=\"https:\/\/learn.arcgis.com\/en\/projects\/design-a-layout-for-a-thematic-map\/arcgis-experience-builder\/\">Design a layout for a thematic map in ArcGIS Experience Builder<\/a>. It goes through a very similar process in more detail.<\/em><\/p>\n<h2 id=\"list\">Add a list widget<\/h2>\n<p>1. Open your Pink Lakes experience from the last tutorial. If you don&#8217;t have one, you can catch up with the following steps:<\/p>\n<ol>\n<li>Open <a href=\"https:\/\/experience.arcgis.com\/\">Experience Builder<\/a>.<\/li>\n<li>Click <strong>Create new<\/strong>.<\/li>\n<li>Click <strong>ArcGIS Online <\/strong>and search for <em>b932826985a14dfaa4a8708f549f6bf9<\/em>.<\/li>\n<li>On the <strong>Pink Lakes Template<\/strong> card, click <strong>Create<\/strong>.<\/li>\n<\/ol>\n<p>2. In the <strong>Insert widget<\/strong> pane, click <strong>List<\/strong> and drag it onto the map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466372,"id":1466372,"title":"list-widget","filename":"list-widget.png","filesize":93378,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/list-widget","alt":"Drag list widget onto map","author":"7411","description":"","caption":"","name":"list-widget","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:04:41","modified":"2022-01-24 21:13:38","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":725,"height":383,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget.png","medium-width":464,"medium-height":245,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget.png","medium_large-width":725,"medium_large-height":383,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget.png","large-width":725,"large-height":383,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget.png","1536x1536-width":725,"1536x1536-height":383,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget.png","2048x2048-width":725,"2048x2048-height":383,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget.png","card_image-width":725,"card_image-height":383,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/list-widget.png","wide_image-width":725,"wide_image-height":383}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>3. In the <strong>List 1<\/strong> pane, choose the second template.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466382,"id":1466382,"title":"template","filename":"template.png","filesize":1255,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/template-3","alt":"List template choice","author":"7411","description":"","caption":"","name":"template-3","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:05:27","modified":"2022-01-24 21:05:34","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":306,"height":110,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template-213x110.png","thumbnail-width":213,"thumbnail-height":110,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template.png","medium-width":306,"medium-height":110,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template.png","medium_large-width":306,"medium_large-height":110,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template.png","large-width":306,"large-height":110,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template.png","1536x1536-width":306,"1536x1536-height":110,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template.png","2048x2048-width":306,"2048x2048-height":110,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template.png","card_image-width":306,"card_image-height":110,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/template.png","wide_image-width":306,"wide_image-height":110}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>4. Click <strong>Start<\/strong>.<\/p>\n<p>5. Click <strong>Select data<\/strong>. The <strong>Select data<\/strong> pane lists the map already present in the experience: <strong>Pink Lakes<\/strong>.<\/p>\n<p>6. Expand the <strong>Pink Lakes<\/strong> map and click the <strong>PinkLakes\u00a0<\/strong>layer.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466392,"id":1466392,"title":"layer","filename":"layer.png","filesize":16948,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/layer","alt":"PinkLakes layer in the Select data pane","author":"7411","description":"","caption":"","name":"layer","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:06:29","modified":"2022-01-24 21:13:24","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":519,"height":367,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer.png","medium-width":369,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer.png","medium_large-width":519,"medium_large-height":367,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer.png","large-width":519,"large-height":367,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer.png","1536x1536-width":519,"1536x1536-height":367,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer.png","2048x2048-width":519,"2048x2048-height":367,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer.png","card_image-width":519,"card_image-height":367,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/layer.png","wide_image-width":519,"wide_image-height":367}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Now your list has access to the <strong>PinkLakes<\/strong> data, and you can populate the list with attributes from this layer.<\/p>\n<h2 id=\"content\">Add content to the list<\/h2>\n<p>1. On the list, click the image. In the <strong>Image 2<\/strong> pane, click <strong>Dynamic<\/strong>.<\/p>\n<p>2. For <strong>URL<\/strong>, click the <strong>Attribute<\/strong> button and click <strong>Attribute<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466422,"id":1466422,"title":"attribute","filename":"attribute.png","filesize":9462,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/attribute","alt":"Connect to data settings","author":"7411","description":"","caption":"","name":"attribute","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:08:01","modified":"2022-01-24 21:08:32","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":261,"height":410,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute.png","medium-width":166,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute.png","medium_large-width":261,"medium_large-height":410,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute.png","large-width":261,"large-height":410,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute.png","1536x1536-width":261,"1536x1536-height":410,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute.png","2048x2048-width":261,"2048x2048-height":410,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute.png","card_image-width":261,"card_image-height":410,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/attribute.png","wide_image-width":261,"wide_image-height":410}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>3. In the <strong>Attribute<\/strong> pane, click the <strong>Picture\u00a0<\/strong>field.<\/p>\n<p>On the canvas, pictures appear for the first few list items.<\/p>\n<p>4. On the list, delete the top piece of text.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466452,"id":1466452,"title":"delete-text","filename":"delete-text.png","filesize":202504,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/delete-text","alt":"Deleting text from the list widget","author":"7411","description":"","caption":"","name":"delete-text","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:09:45","modified":"2022-01-24 21:10:29","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":747,"height":315,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text.png","medium-width":464,"medium-height":196,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text.png","medium_large-width":747,"medium_large-height":315,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text.png","large-width":747,"large-height":315,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text.png","1536x1536-width":747,"1536x1536-height":315,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text.png","2048x2048-width":747,"2048x2048-height":315,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text.png","card_image-width":747,"card_image-height":315,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/delete-text.png","wide_image-width":747,"wide_image-height":315}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>5. Double-click the bottom piece of text to edit it. On the toolbar above the text, click the <strong>Dynamic content\u00a0<\/strong>button.<\/p>\n<p>6. In the <strong>Dynamic content<\/strong> window, click <strong>Name<\/strong>. Press <strong><em>Enter<\/em><\/strong>, then click <strong>Notes<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466462,"id":1466462,"title":"dynamic","filename":"dynamic.png","filesize":119569,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/dynamic-4","alt":"Dynamic content button","author":"7411","description":"","caption":"","name":"dynamic-4","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:11:20","modified":"2022-01-24 21:13:07","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":686,"height":411,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic.png","medium-width":436,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic.png","medium_large-width":686,"medium_large-height":411,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic.png","large-width":686,"large-height":411,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic.png","1536x1536-width":686,"1536x1536-height":411,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic.png","2048x2048-width":686,"2048x2048-height":411,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic.png","card_image-width":686,"card_image-height":411,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/dynamic.png","wide_image-width":686,"wide_image-height":411}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Now your list contains a picture and text to describe each lake.<\/p>\n<h2 id=\"actions\">Manage actions<\/h2>\n<p>Actions in Experience Builder allow people to interact with your data through the app. There&#8217;s an action on your list by default, but it&#8217;s not the one you want.<\/p>\n<p>1. Select the list. In the <strong>List 1<\/strong> pane, click the <strong>Action<\/strong> tab. Click the <strong>Data action <\/strong>tab and turn off <strong>Enable data action<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466492,"id":1466492,"title":"data-action","filename":"data-action.png","filesize":6225,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/data-action","alt":"Turn off enable data action","author":"7411","description":"","caption":"","name":"data-action","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:12:49","modified":"2022-01-24 21:13:00","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":261,"height":197,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action-213x197.png","thumbnail-width":213,"thumbnail-height":197,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action.png","medium-width":261,"medium-height":197,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action.png","medium_large-width":261,"medium_large-height":197,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action.png","large-width":261,"large-height":197,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action.png","1536x1536-width":261,"1536x1536-height":197,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action.png","2048x2048-width":261,"2048x2048-height":197,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action.png","card_image-width":261,"card_image-height":197,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/data-action.png","wide_image-width":261,"wide_image-height":197}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>You&#8217;ll add an action that zooms to each lake on the map when they are clicked in the list.<\/p>\n<p>2. Click the <strong>Message action<\/strong> tab and click <strong>Add a trigger<\/strong>. In the <strong>Select a trigger<\/strong> pane, click <strong>Record selection changes<\/strong>.<\/p>\n<p>3. Click <strong>Map 1 <\/strong>and click <strong>Zoom to<\/strong>.<\/p>\n<p>4. Click <strong>Custom<\/strong> and type <em>20,000<\/em>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466522,"id":1466522,"title":"custom","filename":"custom.png","filesize":15265,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/custom","alt":"Custom scale set for Message action","author":"7411","description":"","caption":"","name":"custom","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:16:12","modified":"2022-01-24 21:16:28","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":509,"height":378,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom.png","medium-width":351,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom.png","medium_large-width":509,"medium_large-height":378,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom.png","large-width":509,"large-height":378,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom.png","1536x1536-width":509,"1536x1536-height":378,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom.png","2048x2048-width":509,"2048x2048-height":378,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom.png","card_image-width":509,"card_image-height":378,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/custom.png","wide_image-width":509,"wide_image-height":378}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>I settled on this scale by trial and error. It&#8217;s a &#8220;best fit&#8221; scale for viewing the different lakes in my map.<\/p>\n<p>5. On the top ribbon, click the <strong>Live view<\/strong> button. Explore the experience you have so far. You should be able to do the following:<\/p>\n<ul>\n<li>Scroll through the list.<\/li>\n<li>Pan and zoom on the map.<\/li>\n<li>Click features on the map and view their pop-ups.<\/li>\n<li>Click features on the list to zoom to places on the map.<\/li>\n<\/ul>\n<h2 id=\"style\">Style the list<\/h2>\n<p>You&#8217;ve already learned some skills for changing the size, position, and color of elements in the last tutorial. You&#8217;ll apply some of those skills, and more, to make the list look good.<\/p>\n<p>1. Turn off <strong>live view<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466532,"id":1466532,"title":"live-view","filename":"live-view.png","filesize":29773,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/live-view","alt":"Live view button","author":"7411","description":"","caption":"","name":"live-view","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:17:18","modified":"2022-01-24 21:18:45","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":586,"height":147,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view-213x147.png","thumbnail-width":213,"thumbnail-height":147,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view.png","medium-width":464,"medium-height":116,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view.png","medium_large-width":586,"medium_large-height":147,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view.png","large-width":586,"large-height":147,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view.png","1536x1536-width":586,"1536x1536-height":147,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view.png","2048x2048-width":586,"2048x2048-height":147,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view.png","card_image-width":586,"card_image-height":147,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/live-view.png","wide_image-width":586,"wide_image-height":147}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>1. Change the list&#8217;s rotation to <em>5 <\/em>degrees.<\/p>\n<p>2. Drag the corners of the list to change its size and shape. Reposition it on the map. Size and position the text boxes as well.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466562,"id":1466562,"title":"resize","filename":"resize.png","filesize":227973,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/resize","alt":"Resize text box","author":"7411","description":"","caption":"","name":"resize","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:18:30","modified":"2022-01-24 21:18:42","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":704,"height":357,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize.png","medium-width":464,"medium-height":235,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize.png","medium_large-width":704,"medium_large-height":357,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize.png","large-width":704,"large-height":357,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize.png","1536x1536-width":704,"1536x1536-height":357,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize.png","2048x2048-width":704,"2048x2048-height":357,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize.png","card_image-width":704,"card_image-height":357,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/resize.png","wide_image-width":704,"wide_image-height":357}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>4. Change the text&#8217;s color to pink.<\/p>\n<p>5. Highlight just the <strong>{Name}<\/strong> part of the text and make it <strong>Bold<\/strong> and <em>15<\/em> px.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466572,"id":1466572,"title":"text-properties","filename":"text-properties.png","filesize":201366,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/text-properties","alt":"Text properties for the Name field","author":"7411","description":"","caption":"","name":"text-properties","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:19:44","modified":"2022-01-24 21:19:53","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":709,"height":348,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties.png","medium-width":464,"medium-height":228,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties.png","medium_large-width":709,"medium_large-height":348,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties.png","large-width":709,"large-height":348,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties.png","1536x1536-width":709,"1536x1536-height":348,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties.png","2048x2048-width":709,"2048x2048-height":348,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties.png","card_image-width":709,"card_image-height":348,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/text-properties.png","wide_image-width":709,"wide_image-height":348}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>6. In the <strong>List 1 <\/strong>pane, on the <strong>Content <\/strong>tab, expand the <strong>States\u00a0<\/strong>section.<\/p>\n<p>7. Change <strong>Border <\/strong>to <em>0<\/em> px.<strong>\u00a0<\/strong>Next to <strong>Selected<\/strong>, click the <strong>On<\/strong> button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466582,"id":1466582,"title":"selected","filename":"selected.png","filesize":12692,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/selected","alt":"Selected state button","author":"7411","description":"","caption":"","name":"selected","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:20:48","modified":"2022-01-24 21:22:01","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":308,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected.png","medium-width":179,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected.png","medium_large-width":308,"medium_large-height":450,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected.png","large-width":308,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected.png","1536x1536-width":308,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected.png","2048x2048-width":308,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected.png","card_image-width":308,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/selected.png","wide_image-width":308,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Here you can change how list items appear once they are selected.<\/p>\n<p>8. Change <strong>Background Fill <\/strong>to a pale pink color. Change the border to <em>0 <\/em>px.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466612,"id":1466612,"title":"pink-state","filename":"pink-state.png","filesize":234462,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/pink-state","alt":"List item with pink background color","author":"7411","description":"","caption":"","name":"pink-state","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:22:59","modified":"2022-01-24 21:23: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":728,"height":326,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state.png","medium-width":464,"medium-height":208,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state.png","medium_large-width":728,"medium_large-height":326,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state.png","large-width":728,"large-height":326,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state.png","1536x1536-width":728,"1536x1536-height":326,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state.png","2048x2048-width":728,"2048x2048-height":326,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state.png","card_image-width":728,"card_image-height":326,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-state.png","wide_image-width":728,"wide_image-height":326}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>9. At the top of the <strong>List 1 <\/strong>pane, click the <strong>\u2190 Selected <\/strong>button to return to the other properties.<\/p>\n<p>You&#8217;ll also make the list items pink when someone hovers over them.<\/p>\n<p>10. Under <strong>States<\/strong>, next to <strong>Hover<\/strong>, click <strong>Off<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466652,"id":1466652,"title":"hover","filename":"hover.png","filesize":5557,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/hover-2","alt":"Hover state button","author":"7411","description":"","caption":"","name":"hover-2","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:25:25","modified":"2022-01-24 21:25:33","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":308,"height":179,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover-213x179.png","thumbnail-width":213,"thumbnail-height":179,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover.png","medium-width":308,"medium-height":179,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover.png","medium_large-width":308,"medium_large-height":179,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover.png","large-width":308,"large-height":179,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover.png","1536x1536-width":308,"1536x1536-height":179,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover.png","2048x2048-width":308,"2048x2048-height":179,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover.png","card_image-width":308,"card_image-height":179,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/hover.png","wide_image-width":308,"wide_image-height":179}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>11. Turn on <strong>Enable hover<\/strong>.<\/p>\n<p>12. Change the <strong>Background Fill <\/strong>to a pale pink, and change the <strong>Border <\/strong>to <em>0 <\/em>pt.<\/p>\n<p>Continue to adjust styling properties for the list until it suits your taste. Add, change, or remove elements to suit your taste.<\/p>\n<p>To test your experience, on the top ribbon, click <strong>Save <\/strong>and then click <strong>Preview<\/strong>. When your experience is complete, click <strong>Publish<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466682,"id":1466682,"title":"publish","filename":"publish.png","filesize":20465,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/publish-4","alt":"Save, Preview, and Publish buttons","author":"7411","description":"","caption":"","name":"publish-4","status":"inherit","uploaded_to":1466122,"date":"2022-01-24 21:26:21","modified":"2022-01-24 21:26:33","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":613,"height":124,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish-213x124.png","thumbnail-width":213,"thumbnail-height":124,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish.png","medium-width":464,"medium-height":94,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish.png","medium_large-width":613,"medium_large-height":124,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish.png","large-width":613,"large-height":124,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish.png","1536x1536-width":613,"1536x1536-height":124,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish.png","2048x2048-width":613,"2048x2048-height":124,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish.png","card_image-width":613,"card_image-height":124,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/publish.png","wide_image-width":613,"wide_image-height":124}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>ArcGIS Experience Builder offers cartographers important and powerful customization tools for making web maps and sharing geographic stories. This example of an all-pink map is something frivolous and fun, but I hope it gave you some ideas and skills to apply to your own mapping projects.<\/p>\n<p>You can view my completed web experience <a href=\"https:\/\/experience.arcgis.com\/experience\/1fdbae8eca4f45c4b3feb341d4b2d8e2\" target=\"_blank\" rel=\"noopener\">here<\/a>. You can examine all of its properties in this <a href=\"https:\/\/www.arcgis.com\/home\/item.html?id=5c8a9032e5ab409c8c9798479141cc62\" target=\"_blank\" rel=\"noopener\">template<\/a>.<\/p>\n<p>&nbsp;<\/p>\n"}],"authors":[{"ID":7411,"user_firstname":"Heather","user_lastname":"Smith","nickname":"Heather Smith","user_nicename":"heather-smith","display_name":"Heather Smith","user_email":"Heather_Smith@esri.com","user_url":"","user_registered":"2018-03-21 18:21:18","user_description":"Heather is a cartographer and artist. She creates resources for the tutorial gallery.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":1334392,"post_author":"7641","post_date":"2021-08-25 14:52:27","post_date_gmt":"2021-08-25 21:52:27","post_content":"","post_title":"Get started with ArcGIS Experience Builder: Ribbon template","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"get-started-with-arcgis-experience-builder-ribbon-template","to_ping":"","pinged":"","post_modified":"2021-09-19 11:24:19","post_modified_gmt":"2021-09-19 18:24:19","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1334392","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":702142,"post_author":"7641","post_date":"2021-08-10 18:41:59","post_date_gmt":"2021-08-11 01:41:59","post_content":"","post_title":"Get started with ArcGIS Experience Builder: Foldable template","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"get-started-experience-builder-foldable","to_ping":"","pinged":"","post_modified":"2021-08-24 12:57:30","post_modified_gmt":"2021-08-24 19:57:30","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=702142","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":720342,"post_author":"7641","post_date":"2020-02-19 08:40:54","post_date_gmt":"2020-02-19 16:40:54","post_content":"","post_title":"Get started with ArcGIS Experience Builder - Gallery template","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"get-started-experience-builder-gallery","to_ping":"","pinged":"","post_modified":"2021-08-12 18:19:55","post_modified_gmt":"2021-08-13 01:19:55","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=720342","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/exp-card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-banner-3.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>Pretty in pink part 3: Make a list widget<\/title>\n<meta name=\"description\" content=\"Configure a list widget in ArcGIS Experience Builder to guide users through your map.\" \/>\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\/experience-builder\/mapping\/pretty-in-pink-3\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pretty in pink part 3: Make a list widget\" \/>\n<meta property=\"og:description\" content=\"Configure a list widget in ArcGIS Experience Builder to guide users through your map.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2022\/01\/exp-card.png\" \/>\n\t<meta property=\"og:image:width\" content=\"826\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Configure a list widget in ArcGIS Experience Builder to guide users through your map.\" \/>\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\/experience-builder\/mapping\/pretty-in-pink-3#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\"},\"author\":{\"name\":\"Heather Smith\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263\"},\"headline\":\"Pretty in pink part 3: Make a list widget\",\"datePublished\":\"2022-02-14T15:50:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\"},\"wordCount\":8,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"cartographic design\",\"cartography\",\"interaction\",\"Tutorial\",\"Web Apps\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\",\"name\":\"Pretty in pink part 3: Make a list widget\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-02-14T15:50:01+00:00\",\"description\":\"Configure a list widget in ArcGIS Experience Builder to guide users through your map.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pretty in pink part 3: Make a list widget\"}]},{\"@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\/3f7e18133cad5b7cfa2633347f691263\",\"name\":\"Heather Smith\",\"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\/2024\/10\/heather900-465x465.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png\",\"caption\":\"Heather Smith\"},\"description\":\"Heather is a cartographer and artist. She creates resources for the tutorial gallery.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Pretty in pink part 3: Make a list widget","description":"Configure a list widget in ArcGIS Experience Builder to guide users through your map.","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\/experience-builder\/mapping\/pretty-in-pink-3","og_locale":"en_US","og_type":"article","og_title":"Pretty in pink part 3: Make a list widget","og_description":"Configure a list widget in ArcGIS Experience Builder to guide users through your map.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2022\/01\/exp-card.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_description":"Configure a list widget in ArcGIS Experience Builder to guide users through your map.","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3"},"author":{"name":"Heather Smith","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263"},"headline":"Pretty in pink part 3: Make a list widget","datePublished":"2022-02-14T15:50:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3"},"wordCount":8,"commentCount":2,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["cartographic design","cartography","interaction","Tutorial","Web Apps"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3","name":"Pretty in pink part 3: Make a list widget","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-02-14T15:50:01+00:00","description":"Configure a list widget in ArcGIS Experience Builder to guide users through your map.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Pretty in pink part 3: Make a list widget"}]},{"@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\/3f7e18133cad5b7cfa2633347f691263","name":"Heather Smith","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\/2024\/10\/heather900-465x465.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png","caption":"Heather Smith"},"description":"Heather is a cartographer and artist. She creates resources for the tutorial gallery.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith"}]}},"text_date":"February 14, 2022","author_name":"Heather Smith","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pink-banner-3.png","primary_product":"ArcGIS Experience Builder","tag_data":[{"term_id":23201,"name":"cartographic design","slug":"cartographic-design","term_group":0,"term_taxonomy_id":23201,"taxonomy":"post_tag","description":"","parent":0,"count":332,"filter":"raw"},{"term_id":26451,"name":"cartography","slug":"cartography","term_group":0,"term_taxonomy_id":26451,"taxonomy":"post_tag","description":"","parent":0,"count":558,"filter":"raw"},{"term_id":763822,"name":"interaction","slug":"interaction","term_group":0,"term_taxonomy_id":763822,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":27911,"name":"Tutorial","slug":"tutorial","term_group":0,"term_taxonomy_id":27911,"taxonomy":"post_tag","description":"","parent":0,"count":183,"filter":"raw"},{"term_id":32751,"name":"Web Apps","slug":"web-apps","term_group":0,"term_taxonomy_id":32751,"taxonomy":"post_tag","description":"","parent":0,"count":21,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"term_id":400032,"name":"ArcGIS Experience Builder","slug":"experience-builder","term_group":0,"term_taxonomy_id":400032,"taxonomy":"product","description":"","parent":36591,"count":161,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=experience-builder","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1466122","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\/7411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1466122"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1466122\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1466122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1466122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1466122"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1466122"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1466122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}