Summary
In ArcGIS Experience Builder, when configuring the icon type in the Menu widget, a modal window is displayed. Ensuring the modal window is more compact prevents it from occupying excessive space or covering other information in the web experience. However, it is important to note that there is no direct option in the Menu widget settings to change the size of the modal window in ArcGIS Experience Builder.
This article provides an example and instructions using the Widget Controller widget or anchored window to customize the desired size of the web experience modal window.
Procedure
Use the Widget Controller widget
- In ArcGIS Experience Builder, open the created web experience.
- On the Insert widget panel, drag and drop the Widget Controller widget to a desired position on the canvas.
- Drag and drop a new Menu widget to the existing Widget Controller widget.
- On the Menu panel, for Type, select Vertical. Configure other Menu settings.
- Click the existing Widget Controller widget to open the Widget Controller panel.
- Under Widget panel arrangement, select Floating to set the widget panels to appear floating next to the controller, anchored to the widget's icon. Select Fixed to fix the widget panels to appear at one of nine anchor points on the canvas.
Note:
Skip Step 7 if the Floating option is selected in Step 6.
- Under Position & size, adjust the panel width and height by typing the percentage values (%) or the pixels (px) for W and H. In this example, 10.00% and 35.00% are set for W and H. Alternatively, resize the widget panel on the canvas.
- Configure other necessary settings.
- Repeat Steps 2 through 8 on other pages. Click Save > Publish.
The map shows the compact widget panel displayed after clicking the Menu widget.
Use the anchored window
- In ArcGIS Experience Builder, open the created web experience.
- Click the Page icon > Window > Add window > Blank window.
- Click the Insert icon. Drag and drop the Menu widget into the newly created window.
- On the Menu panel, for Type, select Vertical. Configure other Menu settings.
- Click the new window to open the Window panel.
- On the Window panel, for Mode, select Anchored.
- Under Size, edit the desired size for W and H. Alternatively, resize the window on the canvas.
- Under Close options, check the Click outside to close Window check box.
- Navigate to the main page and drag and drop the Button widget from the Insert widget panel to a desired position on the canvas.
- On the Button panel, configure the following settings.
- Click Set link, under Link to, select Window from the drop-down menu. For Select a window, select Window from the drop-down menu. Click OK.
- Edit the Tooltip, Text and Icon sections as required.
- Toggle the Advanced option on to configure other settings.
- Repeat Steps 9 through 10 to add the Button widget to the other pages. Click Save > Publish.
The map shows the compact anchored window displayed after clicking the Menu button.