1.2.3 Creating an App with the Experience Builder

1.2.3 Creating an App with the Experience Builder

As we saw with the Map Viewer and configurable app templates, there is also a newer technology for building apps from scratch -- Experience Builder.  Let's walk through creating a similar app on that platform.

1. Re-open your Buildings map using the current Map Viewer, click Create app, then Experience Builder.
   
   You'll be presented with several templates to use as a starting point.  Each one is shown in wireframe form to give you a quick preview of its widget layout.  Note that you can hover over these wireframes to get a description of the template or click the Preview buttons to get a better idea of the template's layout.  A number of templates could work here; let's go with Foldable.
2. Click the Create button associated with the Foldable template.
3. Feel free to go through the short tour of how Experience Builder works, or click Skip.
   
   Where Instant Apps are designed to get an app up and running quickly by walking through a short set of numbered steps, Experience Builder is much more open-ended and can appear overwhelming at first.  But let's break down the most important aspects of the interface.
   
   The largest panel, in the middle, shows your app in a sort of design view referred to as the canvas. 
   
   To the left of the canvas is the sidebar, a panel whose contents depends on which of the four tabs on the very left side of the window is selected.  These tabs, working from top to bottom, allow you to add new widgets to the app, access the widgets already included in it, define the data used by the app, and set an app theme.
   
   To the right of the canvas is a settings panel, which shows settings associated with whatever widget is selected either in the sidebar or the canvas.  
4. If it's not already selected, select the Page tab.
   
   Figure 1.19 Selecting the Page tab in Experience Builder
   
   On the canvas, you should note a "fixed window" -- having an ID of  Window -- resembling a splash screen.
5. If the canvas is zoomed in on your app and you'd prefer to see all of its elements, you might like the Fit width to current window button, the second button in from the right side of the window, in the narrow strip of controls running along the bottom of the window.
   
   "Window" contains placeholders for an image, two text elements (one for a title and one for the app description), and a button (to dismiss the window). 
    
6. Select Image 2, either in the sidebar or on the canvas.  This will populate the settings panel to the right with the settings associated with that image.
7. Working in the settings panel, modify Image 2 by going to Select an image > URL, and setting the URL to http://www.e-education.psu.edu/geog863/sites/www.e-education.psu.edu.geog863/files/PSU_UPO_RGB_2C.png.
8. Double-click on the Title element (Text 3) on the canvas to edit that text and set it to Campus Buildings Map.
9. Likewise, set the description (Text 4) to Enter a text string in the search box to find all buildings containing your search string.
   
   We won't change anything else in the Window widget, but note that the checkbox text and button label are customizable.  You might also choose to shrink the Window in size since the amount of text being displayed is small.
10. Finally, in the sidebar, hover your mouse over the Window entry.  You should see a small "word balloon" icon that is identified as the Set as splash button.  The Window widget should be set as a splash window by default, so you should not need to click this button.  If you do, you'll be disabling the splash behavior.  This isn't a very well designed setting as there doesn't appear to be any indicator for a window being set as splash or not...
11. To access the map and other widgets in the background, click on the Page tab at the top of the sidebar.  (The Window tab has been selected up to this point.)  Again, the Fit width to current window button could come in handy here.
12. Looking at the info in the sidebar, note that the app is composed of a single page, and that page contains a Sidebar widget (named Sidebar), not to be confused with the sidebar panel that is part of the larger Experience Builder interface.  The Sidebar widget covers the entire canvas and is a container for other widgets.  As its name implies, it can be used to display widgets in a primary panel and a secondary panel (on the side).  
    
    The widgets nested within "Sidebar" can be viewed by expanding the containers listed in the Experience Builder sidebar. 
    
    Figure 1.20 Contents of the Sidebar widget
    
    The First (primary) container holds a Fixed Panel widget (the strip running across the top of the app) and a Map widget.  The Second (collapsible side) container holds a Table widget.  
13. Click on Sidebar in the sidebar and note in the settings panel that, among many other settings, it's possible to specify which side the Second container is docked on, the size of the Second container, and whether it is Collapsed or Expanded by default.  Feel free to change any of these settings if you like.
    
    As noted, the Second container holds a Table.  Let's make sure that widget is configured properly.
14. Select Table in the sidebar to view its settings.
15. Click New sheet > Select data, then expand the list of layers/tables in your PSU Buildings web map.  
16. Finally click on the buildings layer to select it as the source for Table's data.  You should see the table become populated with data on the canvas.
    
    As we did earlier, let's limit the fields shown in the table.
17. Click on the 7 selected dropdown, which will display each of the table's fields alongside a checkbox.  
18. Since we want to toggle off most of these fields, click the Clear Selection button in the lower right of the list.
19. Toggle on the FID, BLDG_NAME_, and Shape_Area fields, then click again on the dropdown menu (which should now say 3 selected) to dismiss the field selection interface.
    
    The rows showing in the table have no BLDG_NAME_ value, unfortunately.  It would be nice if we could filter out unnamed buildings...
    
    In the Sheet configuration panel, where the buildings layer is shown as the data source, there is a dropdown list with Default selected.  The Default refers to the default view of the data.  If the scenario called for it, we could define custom views of the data (say, those with a Shape_Area greater than a certain threshold), assign names to those views, and choose to have the widget show the data associated with one of the views.  We don't need to do that, but let's look at configuring the Default view. 
20. Click on the view dropdown.  The Default view should appear with a small Settings button (gear icon) next to it.
    
    Figure 1.21 Accessing the Default view's settings
     
21. Click on this Settings button.  
    
    The resulting dialog contains 3 tabs: Filter, Sort, and Records.  Under the Filter tab, we could build a query that limits the rows returned to some subset, like just big buildings.  Under the Sort tab, we can define sorting rules, and under the Records tab, we can control the number of rows that the table displays.
    
    I encourage you to experiment with these capabilities.  I attempted to display only rows where BLDG_NAME_ is not blank, but that didn't filter out the ones that have no name.  I suspect those rows hold an empty string rather than a Null value, but had no luck with other attempts to filter them out.  If anyone figures out how to solve this problem, please post how you did it in the Discussion Forum.
    
    I also attempted to apply a useful sorting to the data.  Sorting on BLDG_NAME_ isn't particularly useful as the empty rows still show up at the top of the list.  And when I tried sorting in descending order on Shape_Area (putting the biggest buildings at the top), the data sorted properly in the dialog's preview, but not in the canvas.  It appears that this is a known bug.  
    
    With the table configured, let's shift our focus to the strip of widgets found along the top of the app.
22. Click on Image (nested within Fixed Panel) in the sidebar.  
23. Set this image to display the PSU shield we used earlier in the lesson.  Here's the URL again:
    https://www.e-education.psu.edu/geog863/sites/www.e-education.psu.edu.ge...
24. And let's make this image a link that opens the Penn State home page:
    Set link > Link to URL > https://www.psu.edu > Open in new window
25. Set the Title widget (named Text) to Penn State Campus Buildings and the Subtitle (named Text 2) to University Park.  You may need to widen the Text element and shift the Text 2 element a bit to the right to get the text to show up properly.
    
    As in our earlier apps, the Legend and Layer List widgets aren't really needed here.  They could be removed individually by hovering over them in the canvas and clicking the X that appears in their upper-right corner or via the 3 dots menu in the sidebar.  Or... 
26. Since we don't need any widgets here, click on the 3 dots menu next to Widget Controller in the sidebar, then Delete to remove that complete set of widgets from the app.  When asked whether you really want to do that, click Delete again.  
    
    The primary functionality that we want to build into this app is the ability to find a building by name.  You may notice that there's already a Search icon in the upper right of the map, which seems promising.  Let's see if we can configure that tool.
27. Select the Map widget in the sidebar.  In the settings panel, note that we could choose to use a different web map or web scene as the source for this widget.  
    
    Scrolling down through the settings, note the Tools section, where we can see that the Zoom and Home tools are toggled on.  Many other tools are available as well.  However, there doesn't appear to be a way to customize the Search tool.  Let's test out the app to see how that tool works.
28. First, give the app a more descriptive name by clicking on the Untitled experience 1 text in the upper left of the window and entering a new name like Penn State Main Campus Building Finder (Exp Builder).
29. Next, click the Save button in the upper right to save the work you've done.
30. Now, click the Preview button (the "Play" icon just to the right of Save) to open your app for testing in a new tab.
    
    You should see "Window" appear in the foreground as a splash screen.  (If you don't, you'll need to go back to Experience Builder, to the Window tab, then click the Set as splash button for the Window widget.)  And you should be able to access the table by clicking the small arrow in the bottom middle of the app.
31. Open the Search tool and enter a test search term (e.g., Walker, for Walker Building, home of the Geography Department on the west side of campus).  Depending on your search term, you may get a hit on a campus building, but you'll also get back matches on streets, towns, etc.  It appears that the Search tool built into the Map widget is hardwired to use the ArcGIS World Geocoding Service. 
    
    How will we provide a way to search for matches in the buildings layer then?  Well, we can configure the Map widget's built-in Search tool as we did earlier for the Instant App.  
32. Return to the Experience Builder tab in your browser and expand the widget list within the Map in the sidebar.  You should see an entry for the Search widget you just tested.
33. Click on the Search widget to open its properties.
34. Click on the New search source button and go through the same steps you followed earlier so that the widget is configured to search the BLDG_NAME_ field in the buildings layer.
35. Save your work and confirm that the app now allows for searching the building layer.

With that, you've built a few apps that could be implemented in real-world scenarios using both newer and older Esri technologies.  Best of all, you didn't have to write a line of code.  One thing I hope you'll take away from this exercise is to remember that these no-coding tools exist and to look for opportunities to take advantage of them.

Move on to the next page of the lesson to solidify what you've learned here with an assignment that requires you to build another app using data and requirements of your own choosing.