Overview
The AI Container is a relatively significant visual element on the screen. As it takes space, it can often reduce the product width or cover other essential content. The possibility to move, minimize, and resize AI containers can alleviate some of the issues. However, more can be done when the showing of the AI interacts with the rest of the UI to provide space.
Docked AI Container
Docked AI containers squeeze the product horizontally. Sometimes, this results in an unwanted behavior. Other times, the docked container fights for space with other external docked containers like SAP Web Companion or the Built-in Support.
Replacing Other Docked Containers
Introducing multiple docked containers is not recommended, as the space left for the product will be severely diminished. This is why we recommend closing other docked containers when showing the AI.
- Close other containers when showing docked AI
- Toggle the button that triggers the AI Container
- Provide close action on the AI container
- Trigger docked AI container from the shell
- Don't show multiple docked containers
- Don't stack multiple docked containers
- Don't minimize docked containers
Snap the Vertical Navigation
As the docked AI container takes up space, it is advisable to transition the side navigation (if available) to snapped mode. This way, only the minimum amount of horizontal space will be lost.
- Snap the vertical navigation when showing the docked AI Container.
- Don't expand the vertical navigation when closing the docked AI Container.
Floating AI Container
Having the AI Container flowing over the product canvas is an alternative option to the docked placement. While floating elements do not reduce the width of the product itself, consider that they cover other UI elements that might be important.
- Place the floating container in the product area below the page header.
- Fit the AI Container within the page height.
- Allow resizing and minimization of the AC container.
- Provide close action on the AI container.
- Don't cover global or page actions with the floating AI Container.
- Don't show AI Container in popups.
- Don't cover navigation options.
Replacing Side Panels
The floating AI Container might not be the only floating element on the screen. Often the AI Container may need to "fight" for space with panels. When that happens, close the panel and show the AI.
- Close other panels when showing the AI Container.
- Don't automatically show the side panels when closing the AI Cotnainer.
Extending Flexible Columns
Sometimes, the layout of the product is divided into multiple columns. A typical example is the Flexible Column Layout. When showing the AI Container in such a layout, expand the column that is the receiver of the AI operations to full screen.
- Expand the column that is the target of AI to full screen when showing the floating AI Container.
- Allow the user to collapse the column without closing the floating AI Container.
- Closing the target column should close the floating AI Container, as the context is lost.
- Don't collapse the column to its original size when closing the floating AI Container.
Floating over Splitters
Splitter layouts are custom-defined and specific to each product. In addition, the layout itself can be personalized by the user. So when showing the floating AI Container, treat the splitter layout as a page and show the container over the content.
- Show the floating AI Container as if the splitter is a page.
- Allow move, resize, minimize, and close actions on the floating AI Container.
- Don't resize or re-arrange splitter panes when showing the floating AI Container.
Maximized AI Container
It is not uncommon to use a maximized AI Conainer for complex to data heavy responses (such as charts, code and, table generation). A maximized container covers the entire page or splitter layout. In the case of a Flexible Column Layout expand the target column and cover it.
- Cover the entire product canvas.
- Allow the move, collapse, minimize, and close options on the AI Container.
- Don't allow resizing when the AI container is maximized.
- Don't change the canvas layout when the AI Container is maximized and collapsed.