Going by their name, it’s a bit of a mystery to me why they weren’t used by UI5 in the first place. We looked a bit around in the UI5 Icon explorer and decided we’d rather use these icons instead: While I don’t really have a problem with these icons, some of our users had a problem recognizing the collapse/expand functionality for Panels.
(This screenshot is taken from UI5’s sap.ui.table.TreeTable JSONTreeBinding sample) A look at the icons
In this article, we will learn how to create a simple collapsible section using CSS and JavaScript. They are a popular way to organize content in such a manner that the user will be able to see the content of a section only if he wishes. The sap.ui.table.TreeTable is just like a regular data grid table ( sap.ui.table.Table), but with an added functionality to hierarchically organize the rows in the table, and with the ability to expand or collapse rows according to the hierarchy. Collapsible sections are sections of content that can shrink and expand by clicking on them.
(This screenshot is taken from UI5’s Tree – Basic sample) TreeTable The browser implements theThe sap.m.Tree is a classical way of presenting hierarchically organized items like a folder structure. (This screenshot is taken from UI5’s Panel – Expand / Collapse sample) Tree If true the Panel renders a button which the user can use to hide and show the contents of the panel. The sap.m.Panel has an expandable property. UI5 exandable/collapsible Controlsįirst, lets take a look at the standard UI5 controls. In Expand-collapse menus, when you click a menu item it opens by expanding down(therefore expands) and shows the sub-menu. You can then navigate to index.html to see the sample app in effect.
If you want to check out this tip yourself, download the app from the expandcollapse directory and expose it to your webserver. In this tip, you’ll learn how you can replace them with more appropriate icons using only a few lines of CSS. The standard icons that UI5 renders for the expand/collapse button are navigation arrows, which some of our users disliked. To do that, these controls render a button with an icon that indicates the current state, and which the user can click to toggle the state. UI5 offers a couple of widgets that can expand and collapse.