The next generation of Web AppBuilder, ArcGIS Experience Builder offers a powerful new way to build web apps by leveraging a mobile-adaptive design to build intelligent, user-friendly web apps with an easy drag-and-drop interface. Fully integrated with the ArcGIS system, ArcGIS Experience Builder allows users to integrate a variety of ArcGIS data, products, and applications into every project.
In this demonstration, we follow Dalton as he walks users through the process of starting a new app; demonstrating how to add pages, widgets, and actions to create a dynamic user experience. We start by opening Experience Builder from the App Launcher Dropdown menu within your ArcGIS Online account. Once opened, choose an Experience template to start off with, or start from scratch to create your own personalized Experience. For this tutorial, we’ll select the Blank page template to get our project started.
Upon opening, first-time users will have the opportunity to take a guided tour of the application, to learn a few tips and tricks, along with the fundamentals of the layout within the Experience Builder project. Once completed, give your new project a proper name. You can edit this on the top left corner of the screen. From here if we navigate to the left sidebar on the screen, we can see 4 different icons underneath the project name. The first tab we see is the Widget Tab.
The Widget tab allows users to add different widgets to the canvas, including the map, chart, legend, and image widgets. The next tab down is the Page Tab. Here users have the ability to view and add a variety of different page templates to the project. Once new pages have been added, make sure to give them a recognizable name. Next, we see the Add Data tab. This section gives users the ability to add data types to the Experience, including Web Maps, Web Scenes, Layers, or feature layer URLs. From the Add Data tab, users can choose data from their ArcGIS organization’s content and groups, or from the vast catalog of options available from ArcGIS Online and the Living Atlas. Finally, we have the Theme Tab. Here, Esri provides us with a variety of theme options to choose from, along with the ability to create your own custom theme or add an Organization Shared theme if this is set up for your organization.
In this tutorial, we start by adding a map widget to our page. With this widget, we have the ability to move the map anywhere we want on the page. With a given widget actively selected in the Experience, you’ll notice how the right-hand panel dynamically updates to display the available customization for the selected widget. This editing panel enables users to toggle or adjust the widget details within the Content, Style, and Action tabs.
Adjusting each page and widget layout is easily accomplished in the Experience Builder canvas. We can utilize the menu options on top of the widget, which allows users to quickly designate the sizing of each widget on the canvas. From the widget details panel, users have the ability to toggle multiple tool options and layout styles. Navigating from the Content tab to the Style tab, users also have the ability to adjust the size, positioning, and rotation of the widget by typing in their desired values. Staying in the Style tab, we can also add a border, a border color, border style, thickness, and radius to the widget.
Now that our Map widget is styled and detailed as we see fit, we have the ability to move it around the canvas. Once configured, we can navigate to the top of the page to find the “Live View” button. Live View enables us to interact with the Experience as an end user would. In this example, Live View offers the ability to interact with the map by scrolling, panning, and zooming. Toggling Live View back off will enable the widgets to be edited again. Located next to the Live View, we also see the Layout Lock button. This feature keeps the canvas and widgets locked in place so they don’t move around on the canvas once set.
Each Experience offers the ability to add a wide variety of widgets to our project, with new widgets being added either directly onto the canvas, or added on top of an existing widget (in this case a web map). Now that multiple widgets have been added to the canvas, users will want to manipulate the layers tab to determine in which order the widgets will be displayed (the layer order).
We hope you enjoyed this GeoMarvel Live tutorial focused on getting started with ArcGIS Experience Builder. We navigated the application interface and identified some of the key features and functions that Experience Builder has to offer. Hopefully, you learned something new, feel confident, and ready to start your own ArcGIS Experience Builder project. If you enjoyed this tutorial, make sure to leave a comment below to let us know your thoughts! Want to learn more about ArcGIS Experience Builder or another ArcGIS application? Reach out to let us know what you’d like to learn about next!
Ready to start leveraging the power of ArcGIS Experience Builder? Reach out to our industry experts to start a conversation about your unique needs today.
