The Sidebar widget is a layout container that provides two adjacent panels, allowing you to control the layout and allocation of nested widgets. This widget allows users to view collections of information simultaneously.
Examples
Use this widget to support app design requirements such as the following:
- You want users to be able to hide and show a filter or list of features while continuing to display the adjacent map.
- You want to allocate widgets in adjacent panels and resize the panels to show content in a larger or smaller space.
Usage notes
You can configure the Sidebar widget to align panels horizontally or vertically. For example, users can compare the content of different layers or datasets in adjacent panels. You can allow end users to resize and collapse the docked panel. If you exclude the button for collapsing the panel, ensure that the panel is expanded by default.
In the Page panel’s Outline section, this widget has two default child containers to organize the nested widgets in the layout. First corresponds to the left or top panel and Second corresponds to the right or bottom panel, depending on the dock side you configure.
Settings
The Sidebar widget includes the following settings:
-
Side panel—The side panel can be collapsed and expanded to show or hide its content.
- Dock side—Choose a position for the collapsible side panel.
- Size—Set the size of the collapsible panel in pixels (px) or percent of the widget panel (%).
- Overlay—Make the side panel cover part of the main panel.
- Resizable—Allow users to resize the side panel by dragging the divider.
- Default state—Specify whether the sidebar is expanded or collapsed when end users first open the page.
-
Collapse button—The collapse button is used to show or hide the side panel. You can remove the button or specify settings to change its appearance, such as the background color, icon color, and icon shape. You can choose the button style and its position in the panel (center, top, or bottom). You can also define the button and icon sizes in pixels, as well as horizontal and vertical offset.
-
Divider—Change the appearance of the divider between the adjacent panels, such as the line style, color, and weight.
-
Panel properties—Choose a fill color or image for the background of each panel. If you choose an image, you can position it in the panel using Fit, Fill, Center, Tile, or Stretch.
Interaction options
The Sidebar widget can be the target of two message actions, Open sidebar and Toggle sidebar. The former opens the widget if it is closed and does nothing if it is open. The latter can both open and close the widget. The following table lists each action's supported triggers.
| Action | Triggers |
|---|---|
| Open sidebar | Button click, Record selection changes, Views change |
| Toggle sidebar | Button click |
You can add these actions on the Action tab in other widgets' settings. Examples of widgets that you can connect to the Sidebar widget include the Button widget, Views Navigation widget, and Map widget.
When you configure the Open sidebar action with the Record selection changes trigger, you are prompted to choose trigger data. Trigger data is the data source that triggers the message action. You can choose one of the following options:
- All data— Open the sidebar when the user selects features from any of the data sources connected to the source widget.
- Custom—Use specific layers as the trigger data. Custom trigger data is useful if you only want a specific data source to trigger the message action. For example, if you want the sidebar to only open when the user selects a city on a map, you can select the cities layer as the trigger data.
To connect a Button widget to a Sidebar widget, add both to your app. On the Action tab of the Button widget's settings, click Add a trigger, then select the Button click trigger. Select the Sidebar widget as the target, then select either the Open sidebar or Toggle sidebar action.