{"id":1506072,"date":"2022-03-11T17:08:19","date_gmt":"2022-03-12T01:08:19","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1506072"},"modified":"2022-03-16T16:42:21","modified_gmt":"2022-03-16T23:42:21","slug":"create-a-web-experience-using-screen-groups-on-a-scrolling-page","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page","title":{"rendered":"Create a web experience using screen groups on a scrolling page"},"author":8001,"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":[101302,27911],"industry":[],"product":[36591,400032],"class_list":["post-1506072","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-get-started","tag-tutorial","product-apps","product-experience-builder"],"acf":{"short_description":"Use Experience Builder to create an app from a template that organizes content in a screen group with custom layouts for small devices.","flexible_content":[{"acf_fc_layout":"content","content":"<p>ArcGIS Experience Builder allows you to deliver responsive web app experiences without writing code. You can create apps and pages that contain 2D and 3D maps, text, and media. Experiences can focus on one type of content or can combine and link many types of content to create a complete experience and destination for your audience. ArcGIS Experience Builder is built into ArcGIS Online and ArcGIS Enterprise, so you can use all your existing content. For more information, see the following:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/experience-builder-overview\/\">ArcGIS Experience Builder UI and feature overview<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/en-us\/arcgis\/products\/arcgis-experience-builder\/overview\">ArcGIS Experience Builder product description<\/a><\/li>\n<\/ul>\n<h2>This tutorial<\/h2>\n<p>This tutorial takes you through the steps of creating and configuring an app from a custom template that uses a <a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/build-apps\/add-screen-groups.htm\">screen group<\/a> layout with two screens to organize the content in a scrolling page. You\u2019ll add a Map widget, configure a Filter widget, and modify the layout for multiple screen sizes.<\/p>\n<p>In this scenario, the government of the United Kingdom launched a new program called Creating Homes for Future Growth. This initiative provides homebuilders with the opportunity to build high quality homes that the local areas need. As the public information coordinator, you&#8217;ve been tasked with getting this information to the general public. You&#8217;ll create an immersive web experience to find the availability of land for housing and development, including land sites that are on the market, in the pipeline, and that have been sold.<\/p>\n<p>You can view the <a href=\"https:\/\/experience.arcgis.com\/experience\/cf32b4fde8bd4760a88aee3882cf7a26\" target=\"_blank\" rel=\"noopener\">completed experience<\/a> and follow along using the <a href=\"https:\/\/www.arcgis.com\/home\/item.html?id=31ffa030ead14be49f6e13f768bcfac1\" target=\"_blank\" rel=\"noopener\">LandTour template<\/a>, which also already includes the data source. The <a href=\"https:\/\/hub.arcgis.com\/datasets\/73a6d3c8101a44b68bb04d2f77622c3b_1\" target=\"_blank\" rel=\"noopener\">data used<\/a> in this template was acquired from <a href=\"https:\/\/www.gov.uk\/government\/organisations\/homes-england\" target=\"_blank\" rel=\"noopener\">Homes England<\/a> through ArcGIS Hub and slightly modified to use in this tutorial.<\/p>\n<h2>Create a web experience from a custom template<\/h2>\n<p>To create apps with Experience Builder, you need an ArcGIS organizational account with <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/reference\/roles.htm\">privileges<\/a> to create content. (If you don\u2019t have an applicable ArcGIS account, <a href=\"https:\/\/www.esri.com\/en-us\/arcgis\/products\/arcgis-online\/trial\" target=\"_blank\" rel=\"noopener\">get a free trial<\/a>.) To save time, you\u2019ll create an app using a template that was generated from a partially completed web experience that already has several configured widgets and a data connection.<\/p>\n<p>1. Open the item page for the <strong>LandTour tutorial<\/strong> web experience template: <a href=\"https:\/\/www.arcgis.com\/home\/item.html?id=31ffa030ead14be49f6e13f768bcfac1\" target=\"_blank\" rel=\"noopener\">https:\/\/www.arcgis.com\/home\/item.html?id=31ffa030ead14be49f6e13f768bcfac1<\/a><\/p>\n<p>2. Click <strong>Sign in<\/strong> at the top of the page and sign in with your account.<\/p>\n<p>3. Click <strong>Create Web Experience<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508542,"id":1508542,"title":"create-web-experience-button-item-page","filename":"create-web-experience-button-item-page.png","filesize":3835,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/create-web-experience-button-item-page","alt":"Create Web Experience button on the Overview tab of the template item page","author":"8001","description":"","caption":"","name":"create-web-experience-button-item-page","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 22:46:30","modified":"2022-03-11 22:46:57","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":365,"height":201,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page.png","medium-width":365,"medium-height":201,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page.png","medium_large-width":365,"medium_large-height":201,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page.png","large-width":365,"large-height":201,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page.png","1536x1536-width":365,"1536x1536-height":201,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page.png","2048x2048-width":365,"2048x2048-height":201,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page.png","card_image-width":365,"card_image-height":201,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-web-experience-button-item-page.png","wide_image-width":365,"wide_image-height":201}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Your new web experience opens and is created as an item in your content. The app uses the configuration that was saved in the template. The item name is the same as the template with a number appended.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508572,"id":1508572,"title":"created-app-start","filename":"created-app-start.png","filesize":31897,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/created-app-start","alt":"New experience opened in the builder","author":"8001","description":"","caption":"","name":"created-app-start","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 22:53:53","modified":"2022-03-11 22:54:04","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":1459,"height":823,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start.png","medium_large-width":768,"medium_large-height":433,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start.png","large-width":1459,"large-height":823,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start.png","1536x1536-width":1459,"1536x1536-height":823,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start.png","2048x2048-width":1459,"2048x2048-height":823,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start-824x465.png","card_image-width":824,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start.png","wide_image-width":1459,"wide_image-height":823}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/created-app-start.png"},{"acf_fc_layout":"content","content":"<p>4. Click the <strong>LandTour tutorial 1<\/strong> item name at the top of the window to optionally change the name.<\/p>\n<p>5. Click the <strong>Page<\/strong> button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508582,"id":1508582,"title":"page-panel","filename":"page-panel.png","filesize":5811,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/page-panel","alt":"Page button with Page panel including the outline","author":"8001","description":"","caption":"","name":"page-panel","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 22:57:34","modified":"2022-03-11 22:57:46","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":334,"height":463,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel.png","medium-width":188,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel.png","medium_large-width":334,"medium_large-height":463,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel.png","large-width":334,"large-height":463,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel.png","1536x1536-width":334,"1536x1536-height":463,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel.png","2048x2048-width":334,"2048x2048-height":463,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel.png","card_image-width":334,"card_image-height":463,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/page-panel.png","wide_image-width":334,"wide_image-height":463}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Widgets in the current layout are listed in the body node of the page outline. The outline is a good place to review and understand the layout. The outline also makes it easier to find and select widgets in the screen groups.<\/p>\n<p>This template already includes the screen group in the app. To add a screen group to your web experiences, use the <strong>Insert screen group<\/strong> button in an empty block on a scrolling page. You can choose from several screen group templates that you can then customize. Point to the thumbnail for each template to preview its layout.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508602,"id":1508602,"title":"scrolling-insert-screen-group","filename":"scrolling-insert-screen-group.gif","filesize":186841,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/scrolling-insert-screen-group","alt":"Insert screen group button in scrolling page block with preview of templates","author":"8001","description":"","caption":"","name":"scrolling-insert-screen-group","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:00:14","modified":"2022-03-11 23:01:09","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":922,"height":686,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group.gif","medium-width":351,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group.gif","medium_large-width":768,"medium_large-height":571,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group.gif","large-width":922,"large-height":686,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group.gif","1536x1536-width":922,"1536x1536-height":686,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group.gif","2048x2048-width":922,"2048x2048-height":686,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group-625x465.gif","card_image-width":625,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group.gif","wide_image-width":922,"wide_image-height":686}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/scrolling-insert-screen-group.gif"},{"acf_fc_layout":"content","content":"<p>6. In the outline, expand the screen group, screens, and their contents to see the widgets that are used in this template.<\/p>\n<p><strong>TIP<\/strong>: Point to a widget in the outline to highlight it in the canvas. Click a widget in the outline to select it in the canvas and open its settings panel.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508612,"id":1508612,"title":"outline-screen-group-split","filename":"outline-screen-group-split.png","filesize":5300,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/outline-screen-group-split","alt":"Outline view showing expanded screens and the widgets they contain","author":"8001","description":"","caption":"","name":"outline-screen-group-split","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:03:20","modified":"2022-03-11 23:03:40","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":510,"height":393,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split.png","medium-width":339,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split.png","medium_large-width":510,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split.png","large-width":510,"large-height":393,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split.png","1536x1536-width":510,"1536x1536-height":393,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split.png","2048x2048-width":510,"2048x2048-height":393,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split.png","card_image-width":510,"card_image-height":393,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/outline-screen-group-split.png","wide_image-width":510,"wide_image-height":393}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The screens in this screen group include a main stage for a hero banner with widgets for the title and subtitle, a Filter widget that you\u2019ll configure, and a List widget connected to public data for displaying feature information. Content in the list is connected to a window to show more detail from the data. You&#8217;ll also add a Map widget to the empty column and configure it to automatically filter data in the app based on the map extent. This template also includes a header.<\/p>\n<h2>Update the header with a title and icon<\/h2>\n<p>The header will include a logo and title for your web experience.<\/p>\n<p>1. In the outline, expand <strong>Header<\/strong>, and click <strong>Text 1<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508732,"id":1508732,"title":"text-header-title","filename":"text-header-title.png","filesize":10271,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/text-header-title","alt":"Text widget selected in the outline and canvas","author":"8001","description":"","caption":"","name":"text-header-title","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:14:21","modified":"2022-03-11 23:14:30","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":665,"height":387,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title.png","medium-width":448,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title.png","medium_large-width":665,"medium_large-height":387,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title.png","large-width":665,"large-height":387,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title.png","1536x1536-width":665,"1536x1536-height":387,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title.png","2048x2048-width":665,"2048x2048-height":387,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title.png","card_image-width":665,"card_image-height":387,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/text-header-title.png","wide_image-width":665,"wide_image-height":387}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The Text widget in the header is now selected in the canvas and the settings panel displays the properties and options for configuring the widget.<\/p>\n<p>2. Replace the existing text with Land Tour.<\/p>\n<p>3. In the header, click the image thumbnail (or click <strong>Image 11<\/strong> in the page outline) to access its settings.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508742,"id":1508742,"title":"image-in-outline-header","filename":"image-in-outline-header.png","filesize":5395,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/image-in-outline-header","alt":"Header image selected in the outline and canvas","author":"8001","description":"","caption":"","name":"image-in-outline-header","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:16:17","modified":"2022-03-11 23:16:23","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":472,"height":266,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header.png","medium_large-width":472,"medium_large-height":266,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header.png","large-width":472,"large-height":266,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header.png","1536x1536-width":472,"1536x1536-height":266,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header.png","2048x2048-width":472,"2048x2048-height":266,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header.png","card_image-width":472,"card_image-height":266,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-in-outline-header.png","wide_image-width":472,"wide_image-height":266}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The image settings include options to connect the widget to data, select an image source, and add a link. You can also provide a tooltip and alt text for accessibility.<\/p>\n<p>4. Download and extract the <a href=\"http:\/\/www.arcgis.com\/home\/item.html?id=07177f636f94482e9c1fc3eff601b1d6\" target=\"_blank\" rel=\"noopener\">Images for this app<\/a> (Images.zip file).<\/p>\n<p>5. In the <strong>Content<\/strong> panel for the selected Image widget, click <strong>Select an image<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508832,"id":1508832,"title":"image-select-an-image","filename":"image-select-an-image.png","filesize":8266,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/image-select-an-image","alt":"Image settings with Select an image button that opens respective panel","author":"8001","description":"","caption":"","name":"image-select-an-image","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:19:04","modified":"2022-03-11 23:19:09","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":516,"height":399,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image.png","medium-width":338,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image.png","medium_large-width":516,"medium_large-height":399,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image.png","large-width":516,"large-height":399,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image.png","1536x1536-width":516,"1536x1536-height":399,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image.png","2048x2048-width":516,"2048x2048-height":399,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image.png","card_image-width":516,"card_image-height":399,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-select-an-image.png","wide_image-width":516,"wide_image-height":399}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>6. Click <strong>Upload<\/strong> and browse to and select <strong>exb-logo.png<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508852,"id":1508852,"title":"image-uploaded-selected","filename":"image-uploaded-selected.png","filesize":9679,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/image-uploaded-selected","alt":"Uploaded image selected as the image source","author":"8001","description":"","caption":"","name":"image-uploaded-selected","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:24:22","modified":"2022-03-11 23:24: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":509,"height":276,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected.png","medium-width":464,"medium-height":252,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected.png","medium_large-width":509,"medium_large-height":276,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected.png","large-width":509,"large-height":276,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected.png","1536x1536-width":509,"1536x1536-height":276,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected.png","2048x2048-width":509,"2048x2048-height":276,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected.png","card_image-width":509,"card_image-height":276,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/image-uploaded-selected.png","wide_image-width":509,"wide_image-height":276}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>7. Provide a description for the <strong>Alt text<\/strong> setting, such as Company logo.<\/p>\n<p>8. On the builder toolbar, click the <strong>Save<\/strong> button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508862,"id":1508862,"title":"save-button","filename":"save-button.png","filesize":3054,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/save-button","alt":"Builder toolbar with green box identifying the Save button","author":"8001","description":"","caption":"","name":"save-button","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:27:06","modified":"2022-03-11 23:27:12","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":714,"height":46,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button-213x46.png","thumbnail-width":213,"thumbnail-height":46,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png","medium-width":464,"medium-height":30,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png","medium_large-width":714,"medium_large-height":46,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png","large-width":714,"large-height":46,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png","1536x1536-width":714,"1536x1536-height":46,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png","2048x2048-width":714,"2048x2048-height":46,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png","card_image-width":714,"card_image-height":46,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png","wide_image-width":714,"wide_image-height":46}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/save-button.png"},{"acf_fc_layout":"content","content":"<h2>Configure the main stage with a hero banner<\/h2>\n<p>Your audience is interested in land development. It\u2019s important that the content on the cover page reflect the purpose of the app. You\u2019ll use a high-resolution image for the hero banner with a high-contrast title and description.<\/p>\n<p>1. In the outline, in the <strong>Body<\/strong> section, click <strong>Screen group 1<\/strong> to select it in the canvas and display its settings.<\/p>\n<p>2. In the settings panel, click <strong>Screen 1<\/strong> to access the <strong>Main stage<\/strong> style properties.<\/p>\n<p>You can choose a fill color for the background or use an image.<\/p>\n<p>3. For <strong>Image<\/strong>, click <strong>Browse<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508872,"id":1508872,"title":"screen-main-stage-image-browse","filename":"screen-main-stage-image-browse.png","filesize":5722,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/screen-main-stage-image-browse","alt":"Main stage style properties with Browse button highlighted to use an image for the background fill","author":"8001","description":"","caption":"","name":"screen-main-stage-image-browse","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:29:52","modified":"2022-03-11 23:29: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":514,"height":262,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse.png","medium-width":464,"medium-height":237,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse.png","medium_large-width":514,"medium_large-height":262,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse.png","large-width":514,"large-height":262,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse.png","1536x1536-width":514,"1536x1536-height":262,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse.png","2048x2048-width":514,"2048x2048-height":262,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse.png","card_image-width":514,"card_image-height":262,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-main-stage-image-browse.png","wide_image-width":514,"wide_image-height":262}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>4. In the <strong>Select an image<\/strong> panel, click<strong> Upload<\/strong> and add and select the <strong>landtourhero.jpg<\/strong> file that you downloaded.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508882,"id":1508882,"title":"background-image-uploaded-selected","filename":"background-image-uploaded-selected.png","filesize":11814,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/background-image-uploaded-selected","alt":"Image uploaded and selected","author":"8001","description":"","caption":"","name":"background-image-uploaded-selected","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:31:09","modified":"2022-03-11 23:31:14","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":510,"height":241,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected.png","medium-width":464,"medium-height":219,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected.png","medium_large-width":510,"medium_large-height":241,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected.png","large-width":510,"large-height":241,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected.png","1536x1536-width":510,"1536x1536-height":241,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected.png","2048x2048-width":510,"2048x2048-height":241,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected.png","card_image-width":510,"card_image-height":241,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/background-image-uploaded-selected.png","wide_image-width":510,"wide_image-height":241}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>5. Close the <strong>Select an image<\/strong> panel.<\/p>\n<p>6. Change the <strong>Position<\/strong> setting to <strong>Fill<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508892,"id":1508892,"title":"hero-image-uploaded-fill","filename":"hero-image-uploaded-fill.png","filesize":144037,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/hero-image-uploaded-fill","alt":"Main stage background for Screen 1 filled with the hero banner image","author":"8001","description":"","caption":"","name":"hero-image-uploaded-fill","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:32:34","modified":"2022-03-11 23:32:47","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":1395,"height":671,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill.png","medium-width":464,"medium-height":223,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill.png","medium_large-width":768,"medium_large-height":369,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill.png","large-width":1395,"large-height":671,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill.png","1536x1536-width":1395,"1536x1536-height":671,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill.png","2048x2048-width":1395,"2048x2048-height":671,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill-826x397.png","card_image-width":826,"card_image-height":397,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill.png","wide_image-width":1395,"wide_image-height":671}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/hero-image-uploaded-fill.png"},{"acf_fc_layout":"content","content":"<p>7. In the canvas, double-click <strong>Hero title<\/strong> to edit the Text widget. Replace the default text with the new title: Creating homes for future growth.<\/p>\n<p>8. Double-click <strong>Hero description<\/strong> and type the following text: LandTour provides homebuilders with the opportunity to build high quality homes that the local areas need.<\/p>\n<p>9. In the toolbar above the text, click the alignment button and choose <strong>Horizontal center<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508902,"id":1508902,"title":"screen-text-completed","filename":"screen-text-completed.png","filesize":50461,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/screen-text-completed","alt":"Text widgets populated and alignment button identified with a green circle","author":"8001","description":"","caption":"","name":"screen-text-completed","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:34:24","modified":"2022-03-11 23:34:31","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":744,"height":157,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed-213x157.png","thumbnail-width":213,"thumbnail-height":157,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png","medium-width":464,"medium-height":98,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png","medium_large-width":744,"medium_large-height":157,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png","large-width":744,"large-height":157,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png","1536x1536-width":744,"1536x1536-height":157,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png","2048x2048-width":744,"2048x2048-height":157,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png","card_image-width":744,"card_image-height":157,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png","wide_image-width":744,"wide_image-height":157}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-text-completed.png"},{"acf_fc_layout":"content","content":"<p>10. Save the app.<\/p>\n<h2>Test and modify a preconfigured List widget<\/h2>\n<p>The List widget and its Image and Text widgets have been preconfigured with data connections to the LandTour site layer in a web map that was added as the data source in the template. First, you\u2019ll test how the list works in the app.<\/p>\n<p>1. In the outline, in the <strong>Body<\/strong> section, click <strong>Screen 2<\/strong> to scroll the canvas down to the second screen in the screen group layout.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508922,"id":1508922,"title":"screen-outline-list-canvas","filename":"screen-outline-list-canvas.png","filesize":72981,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/screen-outline-list-canvas","alt":"Screen 2 selected in the outline and shown in the canvas with its settings panel open","author":"8001","description":"","caption":"","name":"screen-outline-list-canvas","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:38:49","modified":"2022-03-11 23:38: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":1411,"height":704,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas.png","medium-width":464,"medium-height":232,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas.png","medium_large-width":768,"medium_large-height":383,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas.png","large-width":1411,"large-height":704,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas.png","1536x1536-width":1411,"1536x1536-height":704,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas.png","2048x2048-width":1411,"2048x2048-height":704,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas-826x412.png","card_image-width":826,"card_image-height":412,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas.png","wide_image-width":1411,"wide_image-height":704}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/screen-outline-list-canvas.png"},{"acf_fc_layout":"content","content":"<p>Screen 2 includes two Column widgets. One contains the preconfigured List widget, which displays information from the data. Later, you\u2019ll add a Map widget to the empty column.<\/p>\n<p>2. Click <strong>List 1<\/strong> to select the widget in the canvas and display its settings. (<strong>Screen 2<\/strong> &gt; <strong>Main stage<\/strong> &gt; <strong>Column 2<\/strong>)<\/p>\n<p>The list contains two Image widgets that display data from the layer: one shows the parcel image and one shows the symbol style. It also includes two Text widgets: one for the parcel name and one to include the status of the feature and the acres of the parcel. The parcel image includes a link to open a <a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/build-apps\/add-windows.htm\">window<\/a>\u00a0configured to show more feature information using <a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/build-apps\/select-data.htm#ESRI_SECTION1_038D8FEB11624711BC699313573F1FCC\">dynamic text<\/a>. All these widgets are connected to the data source in the app.<\/p>\n<p>3. Click the <strong>Data<\/strong> button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1508932,"id":1508932,"title":"data-tab","filename":"data-tab.png","filesize":5062,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/data-tab","alt":"Data button that opens Data panel showing connected data source","author":"8001","description":"","caption":"","name":"data-tab","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:42:07","modified":"2022-03-11 23:42:16","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":321,"height":292,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab.png","medium-width":287,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab.png","medium_large-width":321,"medium_large-height":292,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab.png","large-width":321,"large-height":292,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab.png","1536x1536-width":321,"1536x1536-height":292,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab.png","2048x2048-width":321,"2048x2048-height":292,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab.png","card_image-width":321,"card_image-height":292,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-tab.png","wide_image-width":321,"wide_image-height":292}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The data that\u2019s added to an experience is listed in the <strong>Data<\/strong> panel. Labels with icons help you differentiate between data types. This template includes a web map data source that\u2019s used throughout the app.<\/p>\n<p>4. In the <strong>Data<\/strong> panel, click the <strong>Web Map<\/strong> item card to see more information.<\/p>\n<p>The <strong>Layers<\/strong> tab displays the data sources in the map, which are connected to widgets. The In use section identifies layers that are selected in widget settings. The <strong>Widgets<\/strong> tab displays widgets that are directly connected to the web map. For example, when you add the Map widget later and connect it to this data source, it will be listed here. Clicking the <strong>Feature Layer<\/strong> item card displays similar information for the layer and provides additional settings, including options to define sort fields and filters and create <a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/build-apps\/select-data.htm#ESRI_SECTION2_E34F786585A54AF59A8BCBBE44515A60\">data views<\/a>.<\/p>\n<p>Notice that the <strong>Content<\/strong> panel for the List widget settings shows that the <strong>LandTour sites<\/strong> layer is the data source being used by the list.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509002,"id":1509002,"title":"data-panel-list-settings","filename":"data-panel-list-settings.png","filesize":46197,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/data-panel-list-settings","alt":"List widget settings with arrow pointing from connected feature layer to corresponding data source in the Data panel","author":"8001","description":"","caption":"","name":"data-panel-list-settings","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:45:04","modified":"2022-03-11 23:45:13","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":1458,"height":442,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings.png","medium-width":464,"medium-height":141,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings.png","medium_large-width":768,"medium_large-height":233,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings.png","large-width":1458,"large-height":442,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings.png","1536x1536-width":1458,"1536x1536-height":442,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings.png","2048x2048-width":1458,"2048x2048-height":442,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings-826x250.png","card_image-width":826,"card_image-height":250,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings.png","wide_image-width":1458,"wide_image-height":442}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/data-panel-list-settings.png"},{"acf_fc_layout":"content","content":"<p>5. On the builder toolbar, click <strong>Live view<\/strong> to test the linked images in the list.<\/p>\n<p>6. Click an image in the list to display the preconfigured window with more information about the feature.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509032,"id":1509032,"title":"live-view-linked-window","filename":"live-view-linked-window.png","filesize":80785,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/live-view-linked-window","alt":"Live view test result showing the window that opens when you click an image in the list","author":"8001","description":"","caption":"","name":"live-view-linked-window","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:48:42","modified":"2022-03-11 23:48:51","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":1130,"height":573,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window.png","medium-width":464,"medium-height":235,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window.png","medium_large-width":768,"medium_large-height":389,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window.png","large-width":1130,"large-height":573,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window.png","1536x1536-width":1130,"1536x1536-height":573,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window.png","2048x2048-width":1130,"2048x2048-height":573,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window-826x419.png","card_image-width":826,"card_image-height":419,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window.png","wide_image-width":1130,"wide_image-height":573}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/live-view-linked-window.png"},{"acf_fc_layout":"content","content":"<p>The window is configured as a fixed window with several widgets, including Image, Text, Divider, Share, and Button. You can select each widget in the window to explore the settings and how they\u2019re configured.<\/p>\n<p>7. Close the window and click <strong>Live view<\/strong> to turn it off.<\/p>\n<p>Next, you\u2019ll modify the list settings to display twenty items at a time instead of a scrolling list of approximately 150 features.<\/p>\n<p>8. In the <strong>Content<\/strong> panel for the List widget, expand <strong>Arrangement<\/strong>.<\/p>\n<p>9. For <strong>Paging style<\/strong>, choose <strong>Multi-page<\/strong>. For <strong>Items per page<\/strong>, type 20.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509042,"id":1509042,"title":"list-arrangement-settings","filename":"list-arrangement-settings.png","filesize":6441,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/list-arrangement-settings","alt":"Arrangement section of the List widget settings","author":"8001","description":"","caption":"","name":"list-arrangement-settings","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:50:46","modified":"2022-03-11 23:50:54","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":245,"height":412,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings.png","medium-width":155,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings.png","medium_large-width":245,"medium_large-height":412,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings.png","large-width":245,"large-height":412,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings.png","1536x1536-width":245,"1536x1536-height":412,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings.png","2048x2048-width":245,"2048x2048-height":412,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings.png","card_image-width":245,"card_image-height":412,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/list-arrangement-settings.png","wide_image-width":245,"wide_image-height":412}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>10. Save the app.<\/p>\n<h2>Add a Map widget to the second screen<\/h2>\n<p>Next, you\u2019ll add a Map widget and connect it to the web map <a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/build-apps\/select-data.htm\">data source<\/a>. The map will display the same land tour sites that appear in the list.<\/p>\n<p>1. Click the <strong>Insert<\/strong> button. Drag a <strong>Map<\/strong> widget into the empty <strong>Column<\/strong> widget on the canvas.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509052,"id":1509052,"title":"drag-map-to-column","filename":"drag-map-to-column.png","filesize":48308,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/drag-map-to-column","alt":"Insert button that opens the Insert widget panel with a green box and arrow showing where to drag the Map widget into the Column on the canvas","author":"8001","description":"","caption":"","name":"drag-map-to-column","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:52:52","modified":"2022-03-11 23:53: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":1181,"height":511,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column.png","medium-width":464,"medium-height":201,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column.png","medium_large-width":768,"medium_large-height":332,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column.png","large-width":1181,"large-height":511,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column.png","1536x1536-width":1181,"1536x1536-height":511,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column.png","2048x2048-width":1181,"2048x2048-height":511,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column-826x357.png","card_image-width":826,"card_image-height":357,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column.png","wide_image-width":1181,"wide_image-height":511}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/drag-map-to-column.png"},{"acf_fc_layout":"content","content":"<p>2. In the <strong>Content<\/strong> panel for the Map widget, click <strong>Select map <\/strong>and click<strong> LandTour Tutorial<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509072,"id":1509072,"title":"selected-map-widget-populated","filename":"selected-map-widget-populated.png","filesize":32413,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/selected-map-widget-populated","alt":"Map widget populated in the canvas with the selected web map as the data source","author":"8001","description":"","caption":"","name":"selected-map-widget-populated","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:54:12","modified":"2022-03-11 23:54: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":880,"height":459,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated.png","medium-width":464,"medium-height":242,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated.png","medium_large-width":768,"medium_large-height":401,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated.png","large-width":880,"large-height":459,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated.png","1536x1536-width":880,"1536x1536-height":459,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated.png","2048x2048-width":880,"2048x2048-height":459,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated-826x431.png","card_image-width":826,"card_image-height":431,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated.png","wide_image-width":880,"wide_image-height":459}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/selected-map-widget-populated.png"},{"acf_fc_layout":"content","content":"<p>3. In the <strong>Tools<\/strong> section, turn off <strong>Zoom<\/strong>, <strong>Home<\/strong>, and <strong>Search<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509082,"id":1509082,"title":"map-tools-off","filename":"map-tools-off.png","filesize":2944,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/map-tools-off","alt":"Tools section of the Map widget settings with tools turned off","author":"8001","description":"","caption":"","name":"map-tools-off","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:55:17","modified":"2022-03-11 23:55:23","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":253,"height":265,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off.png","medium-width":249,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off.png","medium_large-width":253,"medium_large-height":265,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off.png","large-width":253,"large-height":265,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off.png","1536x1536-width":253,"1536x1536-height":265,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off.png","2048x2048-width":253,"2048x2048-height":265,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off.png","card_image-width":253,"card_image-height":265,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-tools-off.png","wide_image-width":253,"wide_image-height":265}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>4. In the <strong>Options<\/strong> section at the bottom, turn on <strong>Disable pop-up<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509092,"id":1509092,"title":"map-options-disable-popup","filename":"map-options-disable-popup.png","filesize":2517,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/map-options-disable-popup","alt":"Options section of the Map widget settings with Disable pop-up turned on","author":"8001","description":"","caption":"","name":"map-options-disable-popup","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:56:14","modified":"2022-03-11 23:56:19","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":252,"height":144,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup-213x144.png","thumbnail-width":213,"thumbnail-height":144,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup.png","medium-width":252,"medium-height":144,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup.png","medium_large-width":252,"medium_large-height":144,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup.png","large-width":252,"large-height":144,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup.png","1536x1536-width":252,"1536x1536-height":144,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup.png","2048x2048-width":252,"2048x2048-height":144,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup.png","card_image-width":252,"card_image-height":144,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-options-disable-popup.png","wide_image-width":252,"wide_image-height":144}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>5. Click the <strong>Style<\/strong> tab in the settings panel.<\/p>\n<p>The Column widget, like other layout widgets, controls the position of the Map widget nested within it, including how much space is used for the gap and padding around the inner edge of the column. You\u2019ll set the height of the map to occupy all the space in the column.<\/p>\n<p>6. For <strong>Size<\/strong>, change the <strong>Height<\/strong> setting to <strong>Stretch<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509102,"id":1509102,"title":"map-style-height-settings","filename":"map-style-height-settings.png","filesize":5969,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/map-style-height-settings","alt":"Style tab of the Map widget settings with Stretch identified as the option to choose for the Height setting","author":"8001","description":"","caption":"","name":"map-style-height-settings","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:57:21","modified":"2022-03-11 23:57:27","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":256,"height":345,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings.png","medium-width":194,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings.png","medium_large-width":256,"medium_large-height":345,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings.png","large-width":256,"large-height":345,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings.png","1536x1536-width":256,"1536x1536-height":345,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings.png","2048x2048-width":256,"2048x2048-height":345,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings.png","card_image-width":256,"card_image-height":345,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-style-height-settings.png","wide_image-width":256,"wide_image-height":345}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Configure data interactions<\/h2>\n<p>Experience Builder apps are data-driven, which allows the data displayed in widgets to change across the app based on different interactions. You can define interactions between a widget and the data by <a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/configure-widgets\/action-triggers.htm\">adding actions<\/a> in response to triggers. You\u2019ll add a trigger to the map and configure a message action to filter data throughout the app when the extent changes in the Map widget. The other widgets connected to the same feature layer source, such as the List widget, will only display content for features within the current map extent. For example, when users zoom in the map, the list updates to show only features that appear in the map.<\/p>\n<p>1. Click the <strong>Action <\/strong>tab in the settings panel for the Map widget and click <strong>Add a trigger<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509122,"id":1509122,"title":"map-add-trigger-button","filename":"map-add-trigger-button.png","filesize":6577,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/map-add-trigger-button","alt":"Action tab of the Map widget settings with Add a trigger button that opens the Select a trigger panel","author":"8001","description":"","caption":"","name":"map-add-trigger-button","status":"inherit","uploaded_to":1506072,"date":"2022-03-11 23:58:53","modified":"2022-03-11 23:58:59","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":515,"height":328,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button.png","medium-width":410,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button.png","medium_large-width":515,"medium_large-height":328,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button.png","large-width":515,"large-height":328,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button.png","1536x1536-width":515,"1536x1536-height":328,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button.png","2048x2048-width":515,"2048x2048-height":328,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button.png","card_image-width":515,"card_image-height":328,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-add-trigger-button.png","wide_image-width":515,"wide_image-height":328}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>2. In the <strong>Select a trigger<\/strong> panel, click <strong>Extent changes.<\/strong><\/p>\n<p>3. In the <strong>Select a target<\/strong> panel, click <strong>Framework<\/strong>.<\/p>\n<p>4. In the<strong> Select an action<\/strong> panel, click<strong> Filter data records<\/strong>.<\/p>\n<p>5. In the <strong>Action settings<\/strong> panel, click <strong>Select data.<\/strong><\/p>\n<p>6. Click the <strong>Open <\/strong>button next to the <strong>LandTour Tutorial<\/strong> web map and click the<strong> LandTour sites<\/strong> feature layer.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509132,"id":1509132,"title":"map-actions-layer-selected","filename":"map-actions-layer-selected.png","filesize":7680,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/map-actions-layer-selected","alt":"Data selected for the action settings","author":"8001","description":"","caption":"","name":"map-actions-layer-selected","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:00:10","modified":"2022-03-12 00:00:16","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":512,"height":332,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected.png","medium-width":403,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected.png","medium_large-width":512,"medium_large-height":332,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected.png","large-width":512,"large-height":332,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected.png","1536x1536-width":512,"1536x1536-height":332,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected.png","2048x2048-width":512,"2048x2048-height":332,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected.png","card_image-width":512,"card_image-height":332,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-actions-layer-selected.png","wide_image-width":512,"wide_image-height":332}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>7. Save the app.<\/p>\n<p>8. Click <strong>Live view<\/strong> to test the interactive components on the page.<\/p>\n<p>9. Scroll down to the Map widget, if necessary, and zoom in to a few of the point features.<\/p>\n<p>The List widget updates as you zoom in the map to show only the sites that appear in the map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509142,"id":1509142,"title":"map-zoomed-list-filtered","filename":"map-zoomed-list-filtered.png","filesize":80218,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/map-zoomed-list-filtered","alt":"Live view test result showing the map zoomed to a few features and the list filtered to match","author":"8001","description":"","caption":"","name":"map-zoomed-list-filtered","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:02:13","modified":"2022-03-12 00:02:21","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":840,"height":641,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered.png","medium-width":342,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered.png","medium_large-width":768,"medium_large-height":586,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered.png","large-width":840,"large-height":641,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered.png","1536x1536-width":840,"1536x1536-height":641,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered.png","2048x2048-width":840,"2048x2048-height":641,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered-609x465.png","card_image-width":609,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered.png","wide_image-width":840,"wide_image-height":641}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-zoomed-list-filtered.png"},{"acf_fc_layout":"content","content":"<h2>Configure a Filter widget<\/h2>\n<p>Next, you\u2019ll configure a Filter widget for users to find land tour sites based on status. The filter applied by this widget affects what appears in the app\u2019s other widgets that use the same data source. You\u2019ll use the <strong>SQL Expression Builder<\/strong> window, which provides several options for creating interactive queries for the filter criteria.<\/p>\n<p>1. In the outline, click the <strong>Filter<\/strong> widget to select it on the canvas. (<strong>Screen 2 &gt; Main stage &gt; Row 1<\/strong>).<\/p>\n<p>2. In the <strong>Content<\/strong> panel, click <strong>+New filter<\/strong>. In the <strong>Create new filter<\/strong> panel, click<strong> Select data<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509162,"id":1509162,"title":"filter-select-data","filename":"filter-select-data.png","filesize":6998,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/filter-select-data","alt":"Filter widget settings with the Select data button highlighted","author":"8001","description":"","caption":"","name":"filter-select-data","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:04:04","modified":"2022-03-12 00:04: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":515,"height":306,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data.png","medium-width":439,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data.png","medium_large-width":515,"medium_large-height":306,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data.png","large-width":515,"large-height":306,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data.png","1536x1536-width":515,"1536x1536-height":306,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data.png","2048x2048-width":515,"2048x2048-height":306,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data.png","card_image-width":515,"card_image-height":306,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-select-data.png","wide_image-width":515,"wide_image-height":306}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>3. Click the <strong>Open<\/strong> button next to the <strong>LandTour Tutorial<\/strong> web map and click<strong> LandTour sites<\/strong>.<\/p>\n<p>4. In the <strong>Create new filter<\/strong> panel, for the <strong>Icon<\/strong> setting, click the <strong>Remove icon<\/strong> button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509172,"id":1509172,"title":"filter-remove-icon","filename":"filter-remove-icon.png","filesize":12896,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/filter-remove-icon","alt":"Remove icon button identified with a green box in the Create new filter panel","author":"8001","description":"","caption":"","name":"filter-remove-icon","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:05:02","modified":"2022-03-12 00:05: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":515,"height":419,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon.png","medium-width":321,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon.png","medium_large-width":515,"medium_large-height":419,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon.png","large-width":515,"large-height":419,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon.png","1536x1536-width":515,"1536x1536-height":419,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon.png","2048x2048-width":515,"2048x2048-height":419,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon.png","card_image-width":515,"card_image-height":419,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/filter-remove-icon.png","wide_image-width":515,"wide_image-height":419}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>5. Click<strong> SQL Expression Builder <\/strong>and click<strong> +Add clause<\/strong>.<\/p>\n<p>6. In the first menu, choose <strong>Marketing Status<\/strong>. In the second menu, choose<strong> is any of<\/strong>.<\/p>\n<p>7. Click the<strong> More input settings <\/strong>button and select<strong> Ask for values<\/strong>.<\/p>\n<p>8. Click <strong>Choose input style <\/strong>and click<strong> Pill selector<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509182,"id":1509182,"title":"sql-more-input-ask-pills","filename":"sql-more-input-ask-pills.png","filesize":10626,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/sql-more-input-ask-pills","alt":"SQL Expression Builder window with buttons and options to click identified with green boxes","author":"8001","description":"","caption":"","name":"sql-more-input-ask-pills","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:06:19","modified":"2022-03-12 00:06:25","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":808,"height":358,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png","medium-width":464,"medium-height":206,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png","medium_large-width":768,"medium_large-height":340,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png","large-width":808,"large-height":358,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png","1536x1536-width":808,"1536x1536-height":358,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png","2048x2048-width":808,"2048x2048-height":358,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png","card_image-width":808,"card_image-height":358,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png","wide_image-width":808,"wide_image-height":358}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/sql-more-input-ask-pills.png"},{"acf_fc_layout":"content","content":"<p>9. Delete the text in the<strong> Label <\/strong>setting and click<strong> OK<\/strong>. Close the<strong> Create new filter <\/strong>panel and save.<\/p>\n<p>10. In <strong>Live view<\/strong>, zoom the map to see all the features and click the new filters for <strong>On market<\/strong> and <strong>Pipeline<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509192,"id":1509192,"title":"map-filtered","filename":"map-filtered.png","filesize":66461,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/map-filtered","alt":"Live view test result with filters set that update the map and list","author":"8001","description":"","caption":"","name":"map-filtered","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:07:20","modified":"2022-03-12 00:07:26","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":695,"height":677,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered.png","medium-width":268,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered.png","medium_large-width":695,"medium_large-height":677,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered.png","large-width":695,"large-height":677,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered.png","1536x1536-width":695,"1536x1536-height":677,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered.png","2048x2048-width":695,"2048x2048-height":677,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered-477x465.png","card_image-width":477,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered.png","wide_image-width":695,"wide_image-height":677}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/map-filtered.png"},{"acf_fc_layout":"content","content":"<p>The content that appears in the map and the list is filtered to hide sites that have been sold, so users can explore land sites that are on the market or in the pipeline.<\/p>\n<h2>Support multiple screen sizes<\/h2>\n<p>When designing a web experience, the layout might be different when viewed on a large screen compared to a small screen. The configuration of each separate layout is based on adaptive design; you can create unique designs for large, medium, and small screen sizes. The <a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/build-apps\/add-a-page.htm#ESRI_SECTION1_6581E275AB864FB19089D8D4D8B83E53\">templates<\/a> included in Experience Builder have been built and designed to work with multiple screen sizes. To ensure that your app works seamlessly across all screen sizes, the tutorial template was saved with a custom layout enabled. When custom layout is enabled, widgets added in one device mode aren\u2019t automatically added to other device modes. You\u2019ll need to add your Map widget from the pending list to the medium and small device layouts. You\u2019ll also change a setting in the List widget for small devices.<\/p>\n<p>1. On the builder toolbar, click the <strong>Edit your page for<\/strong> <strong>medium screen devices <\/strong>button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509202,"id":1509202,"title":"medium-device-button","filename":"medium-device-button.png","filesize":3337,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/medium-device-button","alt":"Builder toolbar with medium screen button identified","author":"8001","description":"","caption":"","name":"medium-device-button","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:09:11","modified":"2022-03-12 00:09:16","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":781,"height":46,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button-213x46.png","thumbnail-width":213,"thumbnail-height":46,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png","medium-width":464,"medium-height":27,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png","medium_large-width":768,"medium_large-height":45,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png","large-width":781,"large-height":46,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png","1536x1536-width":781,"1536x1536-height":46,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png","2048x2048-width":781,"2048x2048-height":46,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png","card_image-width":781,"card_image-height":46,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png","wide_image-width":781,"wide_image-height":46}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-device-button.png"},{"acf_fc_layout":"content","content":"<p>2. Turn off <strong>Live view<\/strong>.<\/p>\n<p>3. In the outline, expand <strong>Screen group 1<\/strong> and click <strong>Screen 2<\/strong> to scroll to the second screen in the canvas.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509222,"id":1509222,"title":"medium-screen-2","filename":"medium-screen-2.png","filesize":70686,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/medium-screen-2","alt":"Screen 2 selected and shown in the canvas with medium screen size layout","author":"8001","description":"","caption":"","name":"medium-screen-2","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:16:44","modified":"2022-03-12 00:16:51","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":1069,"height":761,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2.png","medium-width":367,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2.png","medium_large-width":768,"medium_large-height":547,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2.png","large-width":1069,"large-height":761,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2.png","1536x1536-width":1069,"1536x1536-height":761,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2.png","2048x2048-width":1069,"2048x2048-height":761,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2-653x465.png","card_image-width":653,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2.png","wide_image-width":1069,"wide_image-height":761}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-screen-2.png"},{"acf_fc_layout":"content","content":"<p>4. Click the <strong>Insert<\/strong> button. In the <strong>Insert widget<\/strong> panel, click the <strong>Pending <\/strong>tab and drag the <strong>Map 1<\/strong> widget into the empty <strong>Column<\/strong> widget on the canvas.<\/p>\n<p>The <strong>Pending<\/strong> tab is also useful when you need to design your app for multiple-screen sizes. For instance, you might have a design requirement for which the Map widget is implemented on large and medium screen sizes, but not small screen sizes, in which case, you could exclude the Map widget from the small screen size design and move it to the pending list.<\/p>\n<p>Notice that the <strong>Content<\/strong> and <strong>Action<\/strong> settings for the widget are the same: the data is connected, the map tools are off, pop-ups are disabled, and the extent changes trigger is set. But you need to make changes in the <strong>Style<\/strong> settings specific to the layout for this screen size.<\/p>\n<p>5. Click the <strong>Style<\/strong> tab for the selected Map widget. For <strong>Size<\/strong>, set <strong>Height <\/strong>to <strong>Stretch <\/strong>so the map fills the column container.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509232,"id":1509232,"title":"medium-map-stretch","filename":"medium-map-stretch.png","filesize":94490,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/medium-map-stretch","alt":"Style settings for the Map widget on medium screens set to stretch and the map updated on the canvas","author":"8001","description":"","caption":"","name":"medium-map-stretch","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:18:19","modified":"2022-03-12 00:18:26","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":882,"height":785,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch.png","medium-width":293,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch.png","medium_large-width":768,"medium_large-height":684,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch.png","large-width":882,"large-height":785,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch.png","1536x1536-width":882,"1536x1536-height":785,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch.png","2048x2048-width":882,"2048x2048-height":785,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch-522x465.png","card_image-width":522,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch.png","wide_image-width":882,"wide_image-height":785}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/medium-map-stretch.png"},{"acf_fc_layout":"content","content":"<p>6. On the builder toolbar, click the <strong>Edit your page for<\/strong> <strong>small screen devices <\/strong>button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509242,"id":1509242,"title":"small-device-button","filename":"small-device-button.png","filesize":3344,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/small-device-button","alt":"Builder toolbar with small screen button identified","author":"8001","description":"","caption":"","name":"small-device-button","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:19:18","modified":"2022-03-12 00:19: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":781,"height":46,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button-213x46.png","thumbnail-width":213,"thumbnail-height":46,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png","medium-width":464,"medium-height":27,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png","medium_large-width":768,"medium_large-height":45,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png","large-width":781,"large-height":46,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png","1536x1536-width":781,"1536x1536-height":46,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png","2048x2048-width":781,"2048x2048-height":46,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png","card_image-width":781,"card_image-height":46,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png","wide_image-width":781,"wide_image-height":46}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-device-button.png"},{"acf_fc_layout":"content","content":"<p>7. In the<strong> Insert widget <\/strong>panel<strong>,<\/strong> on the <strong>Pending<\/strong> tab, drag the <strong>Map 1<\/strong> widget into the <strong>Column<\/strong> widget.<\/p>\n<p>8. In the <strong>Style<\/strong> settings, set <strong>Height<\/strong> to <strong>Stretch<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509282,"id":1509282,"title":"small-map-stretch","filename":"small-map-stretch.png","filesize":37246,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/small-map-stretch","alt":"Style settings for the Map widget on small screens with the map updated on the canvas","author":"8001","description":"","caption":"","name":"small-map-stretch","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:30:19","modified":"2022-03-12 00:30:26","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":681,"height":528,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch.png","medium-width":337,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch.png","medium_large-width":681,"medium_large-height":528,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch.png","large-width":681,"large-height":528,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch.png","1536x1536-width":681,"1536x1536-height":528,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch.png","2048x2048-width":681,"2048x2048-height":528,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch-600x465.png","card_image-width":600,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch.png","wide_image-width":681,"wide_image-height":528}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/small-map-stretch.png"},{"acf_fc_layout":"content","content":"<p>The small screen layout in this template was designed to use a <a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/configure-widgets\/sidebar-widget.ht\">Sidebar widget<\/a> as a container for the filter, map, and list. (You can see this in the Page panel\u2019s outline.) The Sidebar widget has two containers. The top one includes the filter, which is nested in a row for alignment, and the map is nested in a column. Both the filter and the map share the space allocated in the top container. The bottom container includes the list, which uses 100% of the space.<\/p>\n<p>9. Click the <strong>List widget<\/strong> on the canvas to access its settings.<\/p>\n<p>10. In the <strong>Content<\/strong> panel, expand <strong>Arrangement<\/strong> and turn off the <strong>Scroll bar <\/strong>setting.<\/p>\n<h2>Publish and test your web experience<\/h2>\n<p>Now that you\u2019ve created your web experience, the final step is to preview and test your app, publish it, and share it.<\/p>\n<p>1. Save the app.<\/p>\n<p>2. On the builder toolbar, click the <strong>Preview<\/strong> button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509302,"id":1509302,"title":"preview-button","filename":"preview-button.png","filesize":3034,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/preview-button","alt":"Builder toolbar with the Preview button identified","author":"8001","description":"","caption":"","name":"preview-button","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:32:23","modified":"2022-03-12 00:32: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":714,"height":46,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button-213x46.png","thumbnail-width":213,"thumbnail-height":46,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png","medium-width":464,"medium-height":30,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png","medium_large-width":714,"medium_large-height":46,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png","large-width":714,"large-height":46,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png","1536x1536-width":714,"1536x1536-height":46,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png","2048x2048-width":714,"2048x2048-height":46,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png","card_image-width":714,"card_image-height":46,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png","wide_image-width":714,"wide_image-height":46}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/preview-button.png"},{"acf_fc_layout":"content","content":"<p>3. In the browser window that opens, test the web experience by scrolling to the second screen and navigating the multipage list.<\/p>\n<p>4. Zoom in the map to see the list update with fewer records.<\/p>\n<p>5. Use the filter to show sites that are on the market.<\/p>\n<p>6. Click images in the list to view more information in a pop-up window.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509312,"id":1509312,"title":"app-result-test","filename":"app-result-test.png","filesize":87981,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/app-result-test","alt":"Test result for app preview showing map zoomed, list filtered, and window opened for clicked image","author":"8001","description":"","caption":"","name":"app-result-test","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:33:43","modified":"2022-03-12 00:33:51","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":1056,"height":870,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test.png","medium-width":317,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test.png","medium_large-width":768,"medium_large-height":633,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test.png","large-width":1056,"large-height":870,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test.png","1536x1536-width":1056,"1536x1536-height":870,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test.png","2048x2048-width":1056,"2048x2048-height":870,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test-564x465.png","card_image-width":564,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test.png","wide_image-width":1056,"wide_image-height":870}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/app-result-test.png"},{"acf_fc_layout":"content","content":"<p>7. Close the app preview window.<\/p>\n<p>8. In Experience Builder, click <strong>Publish<\/strong>.<\/p>\n<p>The <strong>Published<\/strong> status badge appears next to the item title.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509342,"id":1509342,"title":"published-badge-next-to-title","filename":"published-badge-next-to-title.png","filesize":4241,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/published-badge-next-to-title","alt":"Published badge next to the experience item name in the corner of the builder window","author":"8001","description":"","caption":"","name":"published-badge-next-to-title","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:35:19","modified":"2022-03-12 00:35:26","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":353,"height":165,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title-213x165.png","thumbnail-width":213,"thumbnail-height":165,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title.png","medium-width":353,"medium-height":165,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title.png","medium_large-width":353,"medium_large-height":165,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title.png","large-width":353,"large-height":165,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title.png","1536x1536-width":353,"1536x1536-height":165,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title.png","2048x2048-width":353,"2048x2048-height":165,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title.png","card_image-width":353,"card_image-height":165,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/published-badge-next-to-title.png","wide_image-width":353,"wide_image-height":165}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The <strong>More<\/strong> button on the builder toolbar includes item options, such as changing the share settings, copying the item link, and opening the published app. (This menu also includes options to save a copy, generate a template, and create a new app.) To view all your experiences and templates, click the icon in the corner next to the item name to open the <a href=\"https:\/\/experience.arcgis.com\/\">Experience Builder Home page<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1509362,"id":1509362,"title":"more-options-menu","filename":"more-options-menu.png","filesize":8021,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\/more-options-menu","alt":"More button identified on the builder toolbar with its menu of options","author":"8001","description":"","caption":"","name":"more-options-menu","status":"inherit","uploaded_to":1506072,"date":"2022-03-12 00:36:14","modified":"2022-03-12 00:36:22","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":384,"height":292,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu.png","medium-width":343,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu.png","medium_large-width":384,"medium_large-height":292,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu.png","large-width":384,"large-height":292,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu.png","1536x1536-width":384,"1536x1536-height":292,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu.png","2048x2048-width":384,"2048x2048-height":292,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu.png","card_image-width":384,"card_image-height":292,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/more-options-menu.png","wide_image-width":384,"wide_image-height":292}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>In this tutorial, you used ArcGIS Experience Builder to create a web experience that shares information about the availability of land for housing and development in the United Kingdom. You added and configured several common widgets nested in a screen group on a scrolling page. You also finalized the layout to support smaller screen sizes.<\/p>\n<h2>More information<\/h2>\n<p>For more examples of how to create and configure web experiences like this one, try the following blog articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-public-info-app-with-exb\/\"><strong>Create a Public Information App Using Experience Builder<\/strong><\/a>: This article discusses a public template that\u2019s designed differently for all three screen sizes.<\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/\"><strong>Make an app<\/strong><\/a>: Part 2 of this Pink Lakes project goes over how to add and configure a window that opens when users click a button in your app.<\/li>\n<li><strong><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/\">Make a list widget<\/a><\/strong>: Part 3 of the same Pink Lakes project steps through how to configure a List widget with dynamic text and images and an action that zooms the corresponding map to a selected item.<\/li>\n<\/ul>\n<p>For more information about Experience Builder, see the following resources:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.esri.com\/en-us\/arcgis\/products\/arcgis-experience-builder\/overview\">ArcGIS Experience Builder<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/experience-builder-overview\/\">ArcGIS Experience Builder overview and concepts<\/a><\/li>\n<li><a href=\"https:\/\/doc.arcgis.com\/en\/experience-builder\/configure-widgets\/widgets-overview.htm\">Widgets overview<\/a><\/li>\n<li><a href=\"https:\/\/learn.arcgis.com\/en\/paths\/try-arcgis-experience-builder\/\">Try ArcGIS Experience Builder<\/a><\/li>\n<\/ul>\n"}],"authors":[{"ID":6411,"user_firstname":"David","user_lastname":"Martinez","nickname":"dmart","user_nicename":"dmart23","display_name":"David Martinez","user_email":"dmartinez@esri.com","user_url":"","user_registered":"2018-03-02 00:18:21","user_description":"David is a Product Engineer on the Web AppBuilder and Experience Builder team. Father, coder, runner, traveler, and tech geek.","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/e4ac131b870329c97588d22e0bb8c51d68c1c9d5f684087d8ee75f4d73e05a07?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/e4ac131b870329c97588d22e0bb8c51d68c1c9d5f684087d8ee75f4d73e05a07?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"},{"ID":8001,"user_firstname":"Brandy","user_lastname":"Perkins","nickname":"bperkins","user_nicename":"bperkins","display_name":"Brandy Perkins","user_email":"bperkins@esri.com","user_url":"","user_registered":"2018-05-17 20:18:07","user_description":"Product Engineer who currently creates content for Instant Apps and Maps for Adobe Creative Cloud. Previously created documentation for Experience Builder and supported Web AppBuilder, Configurable Apps, ArcGIS Online, and ArcGIS Companion updates (since 2018). For 13 years prior, supported, designed, developed, and maintained Esri courses, workbooks, and tutorials for desktop, mobile, server, online, and developer products.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/02\/bperkins.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/create-experience-with-screen-group-tutorial-result.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/exbr-b.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>Create a web experience using screen groups on a scrolling page<\/title>\n<meta name=\"description\" content=\"Use Experience Builder to create an app from a template that organizes content in a screen group with custom layouts for small devices.\" \/>\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\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a web experience using screen groups on a scrolling page\" \/>\n<meta property=\"og:description\" content=\"Use Experience Builder to create an app from a template that organizes content in a screen group with custom layouts for small devices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\" \/>\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=\"2022-03-16T23:42:21+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\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\"},\"author\":{\"name\":\"Brandy Perkins\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/4e8cb89ccd594e9bb52b511aa15ffc56\"},\"headline\":\"Create a web experience using screen groups on a scrolling page\",\"datePublished\":\"2022-03-12T01:08:19+00:00\",\"dateModified\":\"2022-03-16T23:42:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"get started\",\"Tutorial\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\",\"name\":\"Create a web experience using screen groups on a scrolling page\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-03-12T01:08:19+00:00\",\"dateModified\":\"2022-03-16T23:42:21+00:00\",\"description\":\"Use Experience Builder to create an app from a template that organizes content in a screen group with custom layouts for small devices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a web experience using screen groups on a scrolling page\"}]},{\"@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\/4e8cb89ccd594e9bb52b511aa15ffc56\",\"name\":\"Brandy Perkins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/02\/bperkins.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/02\/bperkins.png\",\"caption\":\"Brandy Perkins\"},\"description\":\"Product Engineer who currently creates content for Instant Apps and Maps for Adobe Creative Cloud. Previously created documentation for Experience Builder and supported Web AppBuilder, Configurable Apps, ArcGIS Online, and ArcGIS Companion updates (since 2018). For 13 years prior, supported, designed, developed, and maintained Esri courses, workbooks, and tutorials for desktop, mobile, server, online, and developer products.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/bperkins\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a web experience using screen groups on a scrolling page","description":"Use Experience Builder to create an app from a template that organizes content in a screen group with custom layouts for small devices.","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\/create-a-web-experience-using-screen-groups-on-a-scrolling-page","og_locale":"en_US","og_type":"article","og_title":"Create a web experience using screen groups on a scrolling page","og_description":"Use Experience Builder to create an app from a template that organizes content in a screen group with custom layouts for small devices.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2022-03-16T23:42:21+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\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page"},"author":{"name":"Brandy Perkins","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/4e8cb89ccd594e9bb52b511aa15ffc56"},"headline":"Create a web experience using screen groups on a scrolling page","datePublished":"2022-03-12T01:08:19+00:00","dateModified":"2022-03-16T23:42:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page"},"wordCount":11,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["get started","Tutorial"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page","name":"Create a web experience using screen groups on a scrolling page","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-03-12T01:08:19+00:00","dateModified":"2022-03-16T23:42:21+00:00","description":"Use Experience Builder to create an app from a template that organizes content in a screen group with custom layouts for small devices.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Create a web experience using screen groups on a scrolling page"}]},{"@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\/4e8cb89ccd594e9bb52b511aa15ffc56","name":"Brandy Perkins","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/02\/bperkins.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/02\/bperkins.png","caption":"Brandy Perkins"},"description":"Product Engineer who currently creates content for Instant Apps and Maps for Adobe Creative Cloud. Previously created documentation for Experience Builder and supported Web AppBuilder, Configurable Apps, ArcGIS Online, and ArcGIS Companion updates (since 2018). For 13 years prior, supported, designed, developed, and maintained Esri courses, workbooks, and tutorials for desktop, mobile, server, online, and developer products.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/bperkins"}]}},"text_date":"March 11, 2022","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/create-a-web-experience-using-screen-groups-on-a-scrolling-page","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/exbr-b.jpg","primary_product":"ArcGIS Experience Builder","tag_data":[{"term_id":101302,"name":"get started","slug":"get-started","term_group":0,"term_taxonomy_id":101302,"taxonomy":"post_tag","description":"","parent":0,"count":16,"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"}],"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":36591,"name":"Apps","slug":"apps","term_group":0,"term_taxonomy_id":36591,"taxonomy":"product","description":"","parent":0,"count":649,"filter":"raw"},{"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\/1506072","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\/8001"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1506072"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1506072\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1506072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1506072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1506072"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1506072"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1506072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}