The Future is Now: Utilizing Smart Forms Within Experience Builder

Esri’s Web AppBuilder application is on its way out, so now is the time to find a way to recreate apps and workflows using their Experience Builder application. One popular widget in Web AppBuilder is the Smart Editor Widget. The Smart Editor allows for advanced editing configurations like creating auto calculations between different layers and dynamically configuring attributes to be hidden, required, or disabled. The solution to transition this widget to Experience Builder lies with the smart forms.

What are Smart Forms and Where are they Located?

Smart forms provide a place to build out extensive forms tailored for editing operations. By utilizing Arcade expressions within the smart forms, the user can streamline editing processes and customization. Smart forms are available across various applications on the ArcGIS platform including ArcGIS Field Maps, Survey123, Web Map Viewer, and Web Apps utilizing the JavaScript 4x Editor Widget such as Experience Builder. To use smart forms in Experience Builder, the forms must first be configured in the web map connected to the Experience Builder app. For more on creating forms in the map viewer click here

Transitioning the Smart Editor to the Smart Forms

The Smart Editor’s two main functions are Smart Actions and Attribute Actions. Smart Actions use expressions to determine different aspects of a field, like the field's visibility. Attribute Actions allow the configuration of expressions for auto-calculating field values. These are the functions that will be replaced by smart forms. Smart forms can be accessed in the web map by selecting the layer to be edited and clicking the lightning forms icon on the right. Fields can be added to the form section, reordered, renamed for better clarity in the editor, and supplemented with descriptions.

Transition Smart Editor’s Smart Actions 

To replicate Smart Actions, the desired field must first be selected. The logic section of the form, located in the bottom-right, allows designers to configure logic using Arcade expressions for when certain fields should become editable, require an input, and be shown/hidden. Clicking the gear icon next to one of these options opens the Arcade expression builder. For example, a visibility expression can be set to make a "Purchase Date" field visible only when the "Owner" field is not empty. 

Transition Smart Editor’s Attribute Actions 

To replicate the Attribute Actions, Arcade expressions are utilized. These can be added to fields by selecting the field and navigating to the bottom-right corner to configure a calculated expression. While working with Arcade may initially appear complex, sample code is available to simplify the transition. Using Arcade, a wide range of automatic calculations can be implemented, far exceeding the four attribute action options previously available in the Smart Editor. For instance, it is now possible to auto-calculate a field with a feature’s related data utilizing Arcade. The Arcade expression below is auto-calculating a field within a Graves layer with its related burial records data. 

To utilize the smart forms in Experience Builder, the app needs to contain a Map widget and an Editor widget. The Map widget must contain the web map with the configured smart forms and the Editor widget should be configured in the settings to “Interact with a Map widget”. This will ensure the Editor will interact with the web map and the associated smart forms. After adding these two widgets and configuring them, the smart form configurations should be present in the Editor widget within Experience Builder. 

To talk more about our services or get help transitioning from Web AppBuilder to Experience Builder, contact us. The team at Cloudpoint Geospatial is always ready to help.