{"id":313291,"date":"2020-03-08T16:50:41","date_gmt":"2020-03-08T23:50:41","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&p=313291"},"modified":"2020-03-11T17:03:36","modified_gmt":"2020-03-12T00:03:36","slug":"experience-counts","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/experience-counts","title":{"rendered":"Experience Counts"},"content":{"rendered":"","protected":false},"author":1172,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[425582,10392,91],"tags":[425592,163382,209772,271],"arcwatch_issues":[416622],"class_list":["post-313291","arcwatch","type-arcwatch","status-publish","format-standard","hentry","category-arcgis-experience-builder","category-arcgis-online","category-mapping","tag-arcgis-experience-builder","tag-arcgis-online","tag-esri","tag-mapping","arcwatch_issues-april-2020","arcwatch_sections-the-headlines"],"acf":{"short_description":"Esri technology evangelist Bern Szukalski shows you how to build your first web experience with ArcGIS Experience Builder.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Get Started Building Web Apps with ArcGIS Experience Builder, Using the Foldable Template<\/strong>\r\n\r\nEsri recently released ArcGIS Experience Builder<\/a>, a cloud-based app that enables you to deliver responsive web experiences without writing any code. You can create apps and\/or pages that contain 2D and 3D maps, text, and media. You can focus on a single type of content or combine and link many types of content to create a complete experience and destination for your audience.\r\n\r\nTo create an experience, you just drag, position, and configure widgets such as maps, images, text, and tools. You also can add triggers and actions to make widgets work together within a single app and across multiple pages. To start an experience, use an existing template or create one from scratch. You can also save your work as a new reusable template. ArcGIS Experience Builder is built into ArcGIS Online<\/a>, so you can leverage all your existing content.\r\n\r\nGet more information on the basics: the ArcGIS Experience Builder user interface and feature overview<\/a> and the ArcGIS Experience Builder product description<\/a>.\r\n\r\nThe tutorial that follows shows you how to get started working with ArcGIS Experience Builder<\/a>\u00a0by building a simple, mapcentric experience using the Foldable template.\r\n\r\nYou can\u00a0view the completed experience<\/a>\u00a0and follow along by using the\u00a0Places to See in Washington D.C.<\/a>\u00a0web map. Sign in to your ArcGIS account and save the web map to use it in this tutorial.\r\n\r\nCreate a Mapcentric Experience<\/strong>\r\n\r\nYou can use Experience Builder to build a variety of apps. Follow these steps to create a simple, mapcentric experience.\r\n\r\nStep 1\u2014<\/strong>Open the app launcher and click Experience Builder.\r\n\r\n "},{"acf_fc_layout":"image","image":314891,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"You will see a gallery where you will find experiences that have been created by or shared with you or are publicly available.\r\n\r\nStep 2\u2014<\/strong>Click\u00a0Create New.\r\n\r\n "},{"acf_fc_layout":"image","image":314901,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"This step advances you to the template gallery, where you can choose from the available templates and begin creating a new experience.\r\n\r\nStep 3\u2014<\/strong>Choose a template.\r\n\r\nThe template gallery contains a variety of default templates as well as templates that have been shared with you. To get more information about any template, point to the thumbnail."},{"acf_fc_layout":"image","image":314911,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"You can also\u00a0preview\u00a0the template."},{"acf_fc_layout":"image","image":314921,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Locate the Foldable template and click\u00a0Create\u00a0to begin."},{"acf_fc_layout":"image","image":314941,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 4\u2014<\/strong>Explore the template.\r\n\r\nFoldable\u00a0is a basic template for an appcentric experience. It includes widgets for a title, subtitle, map (including standard zoom tools), legend, and layer list.\r\n\r\nIf you can't see all the widgets, fit the app to the current window."},{"acf_fc_layout":"image","image":314951,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"In the panel on the left-hand side, you will see the outline of the current page. Click the arrows to expand the view to show all the widgets in the template. Click any widget\u2014or select one in the outline\u2014to view its current settings and make changes in the settings to the panel on the right."},{"acf_fc_layout":"image","image":314971,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Additional tools on the Experience Builder header bar will be used to create the experience.\r\n\r\nLock layout<\/strong>\u00a0prevents accidentally moving and removing some widgets.\u00a0Live view<\/strong>\u00a0lets you work with the app using its current settings. Additional tools let you preview the app on different-sized devices, and there are also undo\/redo, save, and publish tools.\r\n\r\nIn the steps that follow, each widget will be configured to create your appcentric experience.\r\n\r\nConfigure the Map Widget\u00a0<\/strong>\r\n\r\nFirst you will connect to a map and add tools. You will do this by adding a map to the map widget, and adjusting settings to add a search tool, zoom tools, and a home button.\r\n\r\nStep 1\u2014<\/strong>Select the map widget to view its settings.\r\n\r\nIn the center of the builder, you will see the map widget with a placeholder map. Click the map widget to select it or select it from the outline panel to display the current settings.\r\n\r\nStep 2\u2014<\/strong>Select the map used by the map widget.\r\n\r\nIn the settings panel, click\u00a0Select map."},{"acf_fc_layout":"image","image":314991,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"At the bottom of the\u00a0Select data\u00a0panel, click\u00a0Add new data. Note that you can also search or filter for type."},{"acf_fc_layout":"image","image":315001,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"The Add data panel will display available maps. If you have saved the example map used in this tutorial, locate it and select it, or choose any map you have. When finished, click\u00a0Done."},{"acf_fc_layout":"image","image":315011,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Click the map in\u00a0the\u00a0Select data panel. The settings panel for the map widget will update and the map will be displayed in the application."},{"acf_fc_layout":"image","image":315031,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 3\u2014<\/strong>Review other settings.\r\n\r\nNow that the map has been added to the widget, you can change other settings such as the initial view, the tools that appear, and the tool layout. Choose the settings you prefer. Below you will see the Tools section showing the toggles. Choose Zoom, Home, Search, and Fullscreen."},{"acf_fc_layout":"image","image":315041,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Configure the Legend Widget<\/strong>\r\n\r\nNext, you will configure the legend. The template contains the Legend widget at the upper right-hand side of the application. It displays the legend for visible layers in the map. Follow the steps below to change the title.\r\n\r\nStep 1\u2014<\/strong>Select the Legend widget.\r\n\r\nClick the Legend widget or select it from the outline to view the current settings."},{"acf_fc_layout":"image","image":315061,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 2\u2014<\/strong>Change the title.\r\n\r\nClick the\u00a0Style\u00a0tab and edit the\u00a0Label title. By default the Label title is the widget name\u2014in this case, Legend 1. Change the title to Legend."},{"acf_fc_layout":"image","image":315071,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Configure the Map Layers Widget<\/strong>\r\n\r\nThe Map Layers widget displays the layers in the map and lets you choose what options are available to interact with them, such as toggling visibility, zoom, and transparency. In the following steps, you will add the ability to toggle layer visibility and change the title of the widget.\r\n\r\nStep 1\u2014<\/strong>Select the Map Layers widget.\r\n\r\nStep 2\u2014<\/strong>On the\u00a0Content\u00a0tab of the widget settings, adjust the slider to enable\u00a0Toggle layer visibility."},{"acf_fc_layout":"image","image":315091,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"You can experiment with other options and use\u00a0Live view\u00a0to examine how they work.\r\n\r\nStep 3\u2014<\/strong>Change the widget label.\r\n\r\nOn the\u00a0Style\u00a0tab, edit the label to change it from the widget name, Map Layers 1, to Layer Visibility."},{"acf_fc_layout":"image","image":315101,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Click the Close button to dismiss the Map Layer widget.\r\n\r\nConfigure the Widget Controller Widget<\/strong>\r\n\r\nThe Widget Controller widget is a container for other widgets\u2014in this case the legend and map layer widgets. In the next steps, you will change the shape and size settings that will be applied to all widgets within the widget controller.\r\n\r\nStep 1\u2014<\/strong>Select the\u00a0Widget Controller 1 widget from the outline."},{"acf_fc_layout":"image","image":315111,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 2\u2014<\/strong>Change the size and shape of tools in the container.\r\n\r\nIn the Content tab's Appearance section, set the icon style to\u00a0circular\u00a0and the size to\u00a0Large."},{"acf_fc_layout":"image","image":315121,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 3\u2014<\/strong>Give the app user the ability to open multiple tools at once.\r\n\r\nBy default, only one widget at a time can be opened from the widget controller. For example, the app user can open the legend tool or the layer tool, but not both at once.\r\n\r\nIn the\u00a0Behavior\u00a0section of the settings panel, choose\u00a0Multiple\u00a0to enable more than one widget to open at once, and set them to stack when opened."},{"acf_fc_layout":"image","image":315131,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"You can also set one of the widgets to open automatically when the user opens the app. Experiment to see what you like, using\u00a0Live view\u00a0to see how your settings work.\r\n\r\nEdit Title and Subtitle Text Widgets<\/strong>\r\n\r\nNext, you will edit the title bar. Two text widgets\u2014one containing the title and the other the subtitle\u2014can be found within the fixed panel widget above the map. You will remove the subtitle and expand the title.\r\n\r\nStep 1\u2014<\/strong>Unlock the layout.\r\n\r\nTo remove the subtitle and make other adjustments, you must unlock the layout. Turn off\u00a0Lock layout, on the Experience Builder header bar."},{"acf_fc_layout":"image","image":315141,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 2\u2014<\/strong>Remove the subtitle.\r\n\r\nSelect the subtitle text widget. Click the\u00a0Delete\u00a0symbol on the layout toolbar."},{"acf_fc_layout":"image","image":315151,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 3\u2014<\/strong>Change the title.\r\n\r\nSelect the title text widget and click\u00a0the Edit\u00a0symbol on the layout toolbar."},{"acf_fc_layout":"image","image":315161,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Change the title to Places to See in Washington D.C. You will have to resize the text widget to display the entire string. Click the Text widget to show the handles, then grab and drag the middle right-hand side handle to widen the text widget."},{"acf_fc_layout":"image","image":315171,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 4\u2014<\/strong>Lock the layout again to avoid any accidental movement of widgets as you work with them."},{"acf_fc_layout":"image","image":315181,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Configure the Image Widget<\/strong>\r\n\r\nThe image widget is at the top left-hand side of the application and is contained within the fixed panel widget. In the steps that follow, you will change the image that's displayed and add a link from the image to a website.\r\n\r\nStep 1\u2014<\/strong>Select the image widget by clicking it or selecting it from the page outline."},{"acf_fc_layout":"image","image":315191,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 2\u2014<\/strong>Add the image using a URL.\r\n\r\n(a) In the settings panel, click\u00a0Select an image.\r\n\r\n(b) Select\u00a0URL.\r\n\r\n(c) Copy the following and paste it into the\u00a0URL input:\r\n\r\nhttps:\/\/www.arcgis.com\/sharing\/rest\/content\/items\/98e813b8f5914ea7b88fe312f207e525\/data\r\n\r\nEnter a carriage return after you paste the URL."},{"acf_fc_layout":"image","image":315201,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 3\u2014<\/strong>Add a link to a website.\r\n\r\n(a) In the settings panel, click\u00a0Set link.\r\n\r\n(b) Choose\u00a0Web address\u00a0from the drop-down list.\r\n\r\n(c) Copy the following and paste it into the URL input: https:\/\/washington.org\/\r\n\r\n(d) Click New window\u00a0so the URL will open in a new window.\r\n\r\n(e) Click\u00a0OK\u00a0when finished."},{"acf_fc_layout":"image","image":315211,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Configure the Fixed Panel Widget<\/strong>\r\n\r\nThe top of the application is a fixed panel widget. In the next steps, you will change the color settings of the widget.\r\n\r\nStep 1\u2014<\/strong>Click the Fixed Panel 1 from the outline."},{"acf_fc_layout":"image","image":315221,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 2\u2014<\/strong>In the widget settings, choose a different background fill color to highlight the tools and text."},{"acf_fc_layout":"image","image":315231,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Finalize the App<\/strong>\r\n\r\nYou can go back and make additional adjustments or reconsider settings, using\u00a0Live view<\/strong>\u00a0to see how things work. To create the final app shown below, the layout was unlocked and the heights of the fixed panel and map widgets were adjusted within the application body. The image widget and title were also resized."},{"acf_fc_layout":"image","image":315241,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"When finished, click\u00a0Save. Click\u00a0Publish."},{"acf_fc_layout":"image","image":315251,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"It's a best practice to provide the item details for the experience by adding a summary, description, and thumbnail. You can edit the name, title, and thumbnail by clicking the options symbol on the experience card and selecting\u00a0Edit info,or edit the item pages by clicking\u00a0View details."},{"acf_fc_layout":"image","image":315261,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"This is the completed item page."},{"acf_fc_layout":"image","image":315271,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"For more information, see the following:\r\n