-
KX Dashboards: An Introduction to the Overlay Panel component
The latest release of KX Dashboards introduces the new Overlay Panel component. While existing panel components like the Flex Panel and Layout Panel can group elements together, the Overlay Panel takes it a step further by enabling the overlaying of components on top of each other.
How to use the Overlay Panel
- Begin by adding the first component to the panel, which will function as the base layer. This takes up the full width and height of the component.
- Once this base component has been added, drag another component onto either the left or right side. Components can be added to both sides or just one. These components will serve as overlays on top of the base layer.
Customising the Overlay Panel
The left and right overlays can be customised in the property panel. Users can change the position of each panel to Top or Bottom, which will place the panel at either end of the component.
Users can also define the height and width of each panel. Users have the option to choose between Percentage or Fixed for Height/Width Type, allowing them to specify the dimensions as either a percentage of the component, or measured in pixels.
Comparison with other panel components
Some of the other panel components in KX Dashboards include the Layout Panel and Flex Panel. The Layout Panel groups multiple components together, nesting them within the dashboard. The Flex Panel has the option to group two components together, with the size and position configured on the property panel. The Overlay Panel has some similarities to these components, as it has the ability to nest components, and determine the size and position with the properties. However it also differs from them as the components are stacked on top of each other. This distinction makes it favourable in certain use cases, which will be outlined below.
A more efficient presentation
The Overlay Panel can enhance user experience, by efficiently presenting information without taking up unnecessary space. It can display the primary component on the entire screen, while still being able to add other components on top of it for any specific details and related information. This enables a smoother experience without cluttering the screen, promoting a clean and organised UI. It can also add hierarchy and focus, having the ability to guide the users attention to what is deemed the most important elements.
One example of where this could be used is displaying a map as the base component.
Multiple panel components
Using the Overlay Panel does not have to sacrifice any behaviour from the other panel components. The Overlay Panel can use these components within it, to display more than one widget per side. For example, a Layout Panel component can be added as the overlay, which can host multiple components. This is demonstrated below in the left panel at the bottom, containing a Dropdown List, Datagrid and Text component.
Interactive panel elements
Elements that can interact with the background component could also be used, such as a button to trigger an action event or a dropdown to display different columns of the data.
In summary, the Overlay Panel component improves user experience by offering efficient, contextual and visually appealing ways to present and interact with information. This comprehensive exploration aims to equip users with an in-depth understanding of the Overlay Panel components capabilities, inspiring innovative dashboard designs and user experiences within KX Dashboards.
Try out KX Dashboards for free, and download the latest version at: https://code.kx.com/dashboards/gettingstarted/
-
1 Reply
-
Thank you for sharing !
Log in to reply.