Add keyboard shortcut guidance in ArcGIS Experience Builder

Summary

In ArcGIS Experience Builder, adding a keyboard shortcuts menu for map navigation provides a quick reference for available keyboard controls and supports more efficient map navigation. This article provides workflow to display keyboard shortcut guidance using the Widget Controller or Sidebar widget in Experience Builder.

Procedure

Use the Widget Controller widget

1. Open the web experience in Experience Builder.
2. In the Insert widget panel, search for the Widget Controller widget, drag the widget, and drop it onto the canvas.
3. Click the Widget Controller on the canvas, then click the Add widget icon, and add the Image widget into the Widget Controller. Refer to ArcGIS Experience Builder: Usage notes for instructions.
4. Click the Image widget within the Widget Controller to open the configuration panel.
5. Configure the Image widget in the configuration panel.
1. On the Content tab, for Image source, click the Select an image button.
2. In the Select an image pane, click Upload to upload the keyboard shortcut guidance image for the widget.

6. Save, preview, and publish the experience.

The web experience below displays the keyboard shortcut guidance when the Widget Controller icon is clicked.

Use the Sidebar widget

1. Open the web experience in Experience Builder.
2. In the Insert widget panel, search for the Sidebar widget, drag the widget, and drop it onto the canvas.
3. Configure the Sidebar widget in the configuration panel.
1. On the Content tab, for Default state, click the drop-down menu and select Collapsed.
2. Toggle Collapse button and Divider off.

4. Add and configure the Image widget.
1. In the Insert widget panel, search for the Image widget, drag the widget, and drop it into the Sidebar widget.
2. Click the Image widget within the Sidebar widget to open the configuration panel.
3. On the Content tab, for Image source, click the Select an image button.
4. In the Select an image pane, click Upload to upload the keyboard shortcut guidance image for the widget.

5. Add and configure the Button widget.
1. In the Insert widget panel, search for the Button widget, drag the widget, and drop it onto the canvas.
2. In the Button widget configuration panel, on the Action tab, click the Add a trigger button.
3. In the Select a trigger pane, click Button click.
4. In the Select a target pane, click Sidebar.
5. In the Select an action pane, click Toggle sidebar.

6. Save, preview, and publish the experience.

The web experience below displays the keyboard shortcut guidance in the sidebar when the button is clicked.

Note:
Ensure the map is selected before using the keyboard shortcuts.