The elements that could be displayed in the UrsAI2SideBar extension were limited to those programmed in the extension. This is a different way of designing a SideBar. The basis is a layout (an arrangement) that is superimposed on the screen display. This means that everything that can be placed on an arrangement can also be used in the sidebar. Control is also simplified.
The UrsAI2SideBar2 ZIP archive for download. The archive contains the source code, the compiled binary for uploading to the App Inventor and a sample application.
First, an arrangement must be created with the components that are to be displayed in the SideBar. It makes sense to use a VerticalScrollArrangement. The arrangement is registered with the extension using the Layout function. This is best done in the Screen.initialize event.
It is possible to use this function to define a different arrangement as SideBar content during the course of the application.
During the creation of the (constructor), the extensions places an additional small transparent view over the left edge of the display. Swiping from the left edge of the display to the right to open the SideBar is detected via this strip. The width of the strip can be set using the SwipeDetectorWidth property.
After opening the SideBar, the entire display is covered by the SideBar (yellow). The SideBar is divided into two areas. Arrangement (green) on the left for the visible elements of the SideBar and a semi-transparent field (purple) on the right that covers the rest of the display.
When opening and closing, the arrangement is moved into the screen from left to right. At the same time, the shadow field darkens the rest of the screen. The color of the shadow field can be set using the ShadowColor property. The ShadowAlpha property defines the transparency of the shadow field. 0.0 for completely transparent and 1.0 for completely opaque.
The SideBar can be opened in two ways, either by program using the Show function or by the user swiping from the left to the right edge of the display. Opening by swiping can be disabled via the Enabled property.
The SideBar is closed by calling up the Hide function. The user closes the SideBar by tapping on the shadow field (see SideBar structure) or swiping from right to left on the SideBar. The BackPressed event cannot be intercepted by the extension. A corresponding program block must be integrated here.
Closing the sidebar by swiping or tapping the shadow field can be prevented using the PreventFromClosing property.
The BeforeOpening, AfterOpening, BeforeClosing and AfterClosing events accompany these processes. BeforeOpening can be used, for example, to adjust the SideBar. BeforeClosing allows you to check the content, for example.
The IsOpened property can be used to query whether the SideBar is currently open.
The example is not particularly demanding. It allows you to switch between two variants of the SideBar. It also shows how to use the BeforeClosing event to check the input.
I have collected some tips for creating your own extensions: AI2 FAQ: Developing extensions. On the page you can find further details too.