You can use the Floating Content UI Pattern to display content on top of other screen elements, such as a map with navigation instructions.
How to use the Floating Content UI Pattern
In Service Studio, in the Toolbox, search for
The Floating Content widget is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
From the Toolbox, drag the Floating Content widget into the Main Content area of your application's screen.
In this example, the Main Content area of already contains an image of a map.
By default, the Floating Content widget contains a Content placeholder.
Add the relevant content to the placeholder.
In this example, we add a Search widget.
Select the Floating Content widget, and on the Properties tab, set the mandatory Position property. This defines where the widget is displayed. You can customize the Section's look and feel by setting any of the (optional) properties.
After following these steps and publishing the module, you can test the pattern in your app.
|Position (Position Identifier): Mandatory||The position the floating content is displayed on screen.|
|UseFullHeight (Boolean): Optional||If True, the widget takes up the full height of the screen. If False, the widget doesn't take up the full height of the screen. This is the default.|
|UseFullWidth (Boolean): Optional||If True, the widget takes up the full width of the screen. If False, the widget doesn't take up the full width of the screen. This is the default.|
|UseMargin (Boolean): Optional||If True, a margin is applied to the widget. This is the default. If False, there is no margin applied to the widget.|
|ExtendedClass (Text): Optional||Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.