{"id":602182,"date":"2023-07-17T14:20:08","date_gmt":"2023-07-17T21:20:08","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&p=602182"},"modified":"2023-07-17T14:20:08","modified_gmt":"2023-07-17T21:20:08","slug":"filter-your-experience","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/filter-your-experience","title":{"rendered":"Filter Your Experience"},"content":{"rendered":"","protected":false},"author":8132,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","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],"tags":[425592,486002,177982,170422,192832],"arcwatch_issues":[485822],"class_list":["post-602182","arcwatch","type-arcwatch","status-publish","format-standard","hentry","category-arcgis-experience-builder","tag-arcgis-experience-builder","tag-filter-widget","tag-tutorial","tag-web-app","tag-widgets","arcwatch_issues-july-2023","arcwatch_sections-the-tip"],"acf":{"short_description":"Learn how to create an interactive web app in ArcGIS Experience Builder using the Filter widget.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"ArcGIS Experience Builder is a dynamic tool for building interactive web apps without getting bogged down in code\u2014all you need is a few clicks to get your web app up and running. One of the many useful widgets in ArcGIS Experience Builder is the Filter widget, which allows you to limit the visibility of features in one or more layers to only those that meet specific criteria. In this tip, you\u2019ll learn how to make an app with the Experience Builder Filter widget and a little bit of Structured Query Language (SQL).\r\n\r\nImagine you\u2019re a GIS analyst for a federal agency that oversees national energy policy. Part of your agency\u2019s mission is to improve public understanding of the energy supply chain. Your role in achieving that mission is to curate map and data resources. Today, you are tasked with providing an interactive map that shows the locations and primary fuel types of North American power plants. Here\u2019s how to do that using the Filter widget in ArcGIS Experience Builder.\r\n\r\nUse the Filter Widget<\/strong>\r\n\r\nStep 1:<\/strong> Sign in to ArcGIS or\u00a0create a free trial account<\/a>. Go to\u00a0experience.arcgis.com<\/a>. Click\u00a0Create new\u00a0in the upper right corner."},{"acf_fc_layout":"image","image":602232,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 2:<\/strong> Browse to the\u00a0ArcGIS Online\u00a0tab. Search for\u00a0North American Electricity\u00a0and click\u00a0Create."},{"acf_fc_layout":"image","image":602242,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"This is a fixed page template with a header, a Divider widget, and a Map widget."},{"acf_fc_layout":"image","image":602252,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"The map shows power plants in the United States, Mexico, and Canada. Plants are symbolized by size based on megawatt capacity and by color based on primary energy source. Right now, the only way this web map differs from a static printed map is that you can zoom in and out. You\u2019ll add more interactivity with the Filter widget.\r\n\r\nStep 3:<\/strong> From the\u00a0Insert\u00a0pane, scroll down to the Data-centric section and drag a Filter widget onto the Divider widget\u2014the black bar just above the map. This ensures the added filter widget won\u2019t obscure the map. Red guidelines appear to help you center it."},{"acf_fc_layout":"image","image":602262,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 4:<\/strong> Click the\u00a0Style\u00a0tab in the settings panel to the right. Under\u00a0Size & Position, change\u00a0Width\u00a0to\u00a0Auto\u00a0and\u00a0Height\u00a0to\u00a0Custom. Set the height to 9%. Auto width means that the total widget width will adjust automatically as you add new filters."},{"acf_fc_layout":"image","image":602272,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 5:<\/strong> Next, you\u2019ll add filters to the widget. Click the Filter widget\u2019s\u00a0Content\u00a0settings tab.\r\n\r\nStep 6:<\/strong> Click\u00a0+New filter. The\u00a0Create new filter\u00a0panel appears."},{"acf_fc_layout":"image","image":602282,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":602292,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 7:<\/strong> Click\u00a0Select data, then click the add button (+) to the left of the\u00a0Electricity\u00a0web map. Select the\u00a0Power Plants - 100 MW or more\u00a0point layer."},{"acf_fc_layout":"image","image":602302,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 8:<\/strong> Under Label, delete \u201cPower Plants - 100 MW or more\u201d and type \u201cState\/Province\/Territory\"."},{"acf_fc_layout":"image","image":602312,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 9:<\/strong> Under\u00a0Icon, click the filter icon. By default, ArcGIS Experience Builder includes several general icons and arrow icons. You can also upload your own icons. For this tip, choose the pin."},{"acf_fc_layout":"image","image":602322,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"The Filter widget evaluates the connected data using logical expressions. Those expressions are written in SQL. Here, you will learn how to create a filter with a simple SQL expression. Learn more about how Experience Builder uses SQL in\u00a0Experience Builder documentation<\/a>.\r\n\r\nStep 10:<\/strong> Click\u00a0SQL Expression Builder. The expression builder window appears."},{"acf_fc_layout":"image","image":602332,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 11:<\/strong> Click\u00a0+Add clause.\r\n\r\nStep 12:<\/strong> Using the drop-down arrows, choose\u00a0State \/ Province \/ Territory\u00a0for the field and choose\u00a0\u201cis any of\u201d\u00a0for the operator.\r\n\r\nYou want your users to select locations from a list at runtime, so instead of selecting specific values you\u2019ll ask for user input.\r\n\r\nStep 13: <\/strong>Click\u00a0the More input settings button in the upper right corner.\r\n\r\nStep 14:<\/strong> Select\u00a0Ask for values. If necessary, for List values based on, select\u00a0All unique values of this field. Click\u00a0OK."},{"acf_fc_layout":"image","image":602342,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"You have now successfully created a filter for your web app. However, the\u00a0Power Plants - 100 MW or more\u00a0layer has plenty of attributes that you can use to set filters.\r\n\r\nStep 15:<\/strong> In the widget\u2019s\u00a0Content\u00a0settings, under Arrangement style, choose\u00a0Horizontal.\u00a0Under Activation style, choose\u00a0Button."},{"acf_fc_layout":"image","image":602352,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 16:<\/strong> Next, you\u2019ll make one more filter to let users navigate the app based on the primary energy source of each state, province, or territory. Make sure you place this filter in a different location than the first filter.\r\n\r\nRepeat steps 3-9 to make the second filter that will enable users to filter not only location, but also the primary energy source of each location. Label it\u00a0Primary energy source\u00a0and choose the icon\u00a0Share 4.\r\n\r\nStep 17:<\/strong> Repeat steps 10-14 to write an SQL expression\u00a0for your second filter. Choose\u00a0Primary energy source\u00a0for the field and\u00a0\u201cis any of\u201d\u00a0for the operator. Make sure to click More input settings to select Ask for values."},{"acf_fc_layout":"image","image":602362,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Now you have created a web app you can filter by location and primary energy source. Make sure to save your app."},{"acf_fc_layout":"image","image":602382,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Since your filters and the map are both connected to the\u00a0Electricity\u00a0web map (and specifically the power plants layer), the filters affect the map.\r\n\r\nYou can further connect the two widgets using\u00a0message actions<\/a>. Next, you\u2019ll make your filters trigger the map to automatically zoom and pan to the filter result.\r\n\r\nMake the Filters Zoom and Pan the Map<\/strong>\r\n\r\nStep 1:<\/strong> In Filter settings pane, click the Action tab.\r\n\r\nStep 2:<\/strong> Click\u00a0Add a trigger. Click Data filtering changes.\r\n\r\nStep 3:<\/strong> Click Map as the target.\r\n\r\nStep 4:<\/strong> Click Zoom to. Optionally, you can set a custom zoom scale."},{"acf_fc_layout":"image","image":602392,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 5:<\/strong> Under the\u00a0Data filtering changes\u00a0trigger, click\u00a0+Add action."},{"acf_fc_layout":"image","image":602402,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 6:<\/strong> Click\u00a0Map\u00a0as the target widget.\r\n\r\nStep 7:<\/strong> Click\u00a0Pan to.\r\n\r\nNow your web app will automatically pan and zoom to the area indicated by the filter. Save your app, then click\u00a0the Live view\u00a0button at the top of the interface to test out your filters or click the button with an arrow (Preview) to open the app in a new window.\r\n\r\nView final result<\/a>"},{"acf_fc_layout":"image","image":602412,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"More Information<\/strong>\r\n\r\nFor more information about Experience Builder, see the following resources:\r\n