1.2.3 Creating an App with the Experience Builder

1.2.3 Creating an App with the Experience Builder jed124 Wed, 03/02/2022 - 20:00

As you may have seen while working through the earlier parts of the lesson, another platform where your web maps can be utilized is the Experience Builder. This is a good option if you're looking for greater flexibility than is available with the Instant App templates, though that comes with the cost of having to handle more of the development yourself. Let's walk through creating a similar building finder app on that platform.

Re-open your Buildings map using the Map Viewer, select More > 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.
Click the Create button associated with the Foldable template.
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 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, set an app theme, and make general app settings.

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.
If it's not already selected, select the Page tab.

Figure 1.19 Selecting the Page tab in Experience Builder
Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0

On the canvas, you should note a "fixed window" -- having an ID of Window -- resembling a splash screen.
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 a placeholder text element with a default ID of "Text 5" that you can modify to your liking.
Double-click on the Text 5 element to enter editing mode on the element.
Highlight the title text at the top of the element and set it to Campus Buildings Map.
Click on the image embedded within the Text 5 element to select it. You should see that many of the properties in the Text format section of the Properties panel become grayed out because they don't apply to images. However, if you look closely, you should be able to find the Image button in the middle right of the Properties panel.
Click the Image button, then in the Select an image pop-out panel, go to the URL tab and set the URL to /geog863/sites/geog863/files/PSU_UPO_RGB_2C.png.
Replace the paragraphs of Latin placeholder text below the image with 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 you may want to take a moment to check out some of the other settings available to you, such as the additional settings that appear if you toggle on the Interaction switch.
Finally, looking again at the sidebar panel (to the left of the canvas), hover your mouse over the Window entry. You should see a small "word balloon" icon that is identified as the Set as splash button. Click on this icon to turn the Window widget into a splash screen. (You should see the word balloon icon persist in a lit-up state after clicking, indicating that the splash setting is turned on.)

Having made the Window into a splash screen, you'll want to make it possible for the user to dismiss that screen!
Select the Window widget, then check the Click outside to close Window checkbox in the Properties panel.
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.
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 (yours may look slightly different as the EB templates are under continual development)
Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0
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.
Click on Sidebar in the sidebar and note in the Properties 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 the widget is configured properly.
Select Table in the sidebar to view its settings.

You should see that the table is automatically in Interact with a Map widget mode and wired up to your PSU Buildings web map. You can confirm this by clicking the Expand button running along the bottom of the map, which should bring the buildings attribute table into view.

The info displayed in the table is less than ideal in a couple of ways: a) it includes several fields that aren't really of interest, and b) the first several records are associated with unnamed buildings. Let's address these issues, starting with filtering out the unnamed buildings. To do that, we'll need to create a new "view" of the buildings layer.
Change the Table widget's Mode from Interact with a Map widget to Select layers.
Click the New Sheet button, then Select data on the Sheet configuration pop-out panel. You should see the name of your PSU Buildings map appear.
Click the + icon to the left of the map name to reveal the layers it contains. (We only added 1 layer -- the one from PASDA whose title starts with PSU Campus...)
Click on that layer to select it, then click the X to close the Select data panel. You should be seeing the Sheet configuration panel again.
At the top of the Sheet configuration panel, where the PSU Campus 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. Let's modify the default view so that it includes only named buildings.
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
Credit: J. Detwiler © Penn State is licensed under CC BY-NC-SA 4.0
Click on the 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.
Add a new clause under the Filter tab, specifying BLDG_NAME_ in the first box, followed by is none of in the second box.
Before entering anything in the third box, select Unique from the Source type dropdown. This will generate a list of unique values for you to choose from, throwing them into the third box as options in a dropdown.

The first two options will both appear empty. I'm not sure exactly what's going on there; the first could be an empty string (''), while the second is a single space (' '). Whatever the case, select both of those options, indicating that you want to exclude rows with those values from the table. You should see unnamed buildings disappear in the preview of the table to the right.
Switch to the Sort tab and sort the records on BLDG_NAME_ in ascending order. This will make the table much more user-friendly.
Click Apply Changes to finalize your changes to the default view of the buildings layer.

Back in the Sheet configuration panel, let's ensure that only fields of interest are being shown.
Under the Configure fields heading, select Customize. You should see that there are several fields selected for initial display. A field's visibility can be toggled off by clicking on the "eye" icon to the right of its name.
Toggle off the visibility of most of the fields, leaving only the following visible: BLDG_NAME_ and Shape_Area.

The table widget is now much improved. Unfortunately, the settings made to filter out unnamed buildings and sort the table don't show up on the canvas when doing configuration of the experience.
To confirm that those settings produced the desired effect, let's look at a preview of it. 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).
Next, click the Save button in the upper right to save the work you've done.
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.

Now let's shift our focus to other parts of the app. (Don't worry, we're almost done!)
Click on Image in the sidebar (found at Sidebar > First > Fixed Panel > Flow Row).
Set this image to display the PSU shield we used earlier in the lesson by going to the Properties panel > Select an image > URL tab. Here's the URL again:
/geog863/sites/geog863/files/psu-facebook-avatar-180x180.jpg
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
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.

Tip: If copying/pasting the title and subtitle text, try using Ctrl-Shift-V instead of Ctrl-V. That will paste the text without also including the formatting.

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...
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.
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.
Click Save and Preview again.
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.
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.
Click on the Search widget to open its properties.
Click Add custom search sources, then 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.
Save your work and confirm that the app now allows for searching the building layer.

One thing we haven't mentioned to this point is the device being used to view the app. In your testing so far, you've probably viewed it using a relatively large screen (e.g., on a laptop). However, apps may be, and often are, viewed on smaller-screen devices such as tablets and smartphones.
Looking at the app preview window/tab, slowly shrink the size of the window (particularly the width). This is a relatively simple UI, so you won't see much difference at smaller sizes. However, at roughly half the width of an average laptop screen, you should see that the Text 2 widget (which we set to display the text "University Park") should disappear. This is the behavior you should expect when viewing the app on a typical tablet (e.g., an iPad).

If you continue shrinking the window to 1/4-1/3 your laptop width, you should see the UI change again, with the Zoom and Home buttons shifting from the upper left of the map to the lower right.
Return to the Experience Builder and note the three screen icons in the top middle region of the interface. The leftmost, selected by default, is the button to select to configure the app for viewing on large screens. The middle button is for configuring the app for medium (tablet-sized) screens, while the rightmost button is for small (phone-sized) screens.
Switch to the medium view and note that the Text 4 widget (subtitle) disappears, consistent with what you should have seen when resizing the app preview window. In Esri's terminology, the widget's been moved to the app's Pending list.
To see this list, toggle off the Lock Layout switch (top-middle of the EB GUI). Then open the Insert widget panel (+ icon) and select the Pending tab. It's important to note that widgets on the Pending list should not be deleted altogether or they won't be visible on any device.

Depending on the complexity of your app, you may need to switch to the medium and/or small views and reconfigure aspects of the UI. As a very simple example, you might adjust the sizes of the Text and Text 4 widgets and shift the Text 4 widget beneath the Text widget in the medium and small views (and leaving them side by side in the large view). (Alternatively, you might also be able to adjust the sizes such that they can fit next to each other at all screen sizes.) You should experiment with adjusting the interface in the medium and/or small view to get a feel for the design process.

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.