Here are some SAPUI5 highlights from December 2016. See the new default Belize theme, the Dynamic Page control in the sap.f library, as well as a criticality calculation using SmartMicroCharts. For more information, see the cloud Development Toolkit version at the link above (note that there may be a brief disparity in feature availability until the SAPUI5 version on the SAP HANA Cloud Platform is updated. The up-to-date documentation is also available here).
The default theme in SAPUI5 has changed from Blue Crystal to the new Belize theme. All UIs and controls are now available in this new default visual design.
You can select it in the Demokit settings or using a URL parameter. Belize is part of the updated Fiori design, offering better color balance and a consistent visual rhythm.
Its simplified semantic parameter structure makes theme customizations done with the UI theme designer for instance *much* easier.
Belize comes in two distinct color schemes - a default light scheme and the darker Belize Deep.
Using CSS scoping classes to show light and dark areas on the same screen lets you control exactly which parts of your app are displayed with stronger contrast. A new sap.f library has been created for new SAP Fiori related UI5 controls. This library now contains the new Dynamic Page control.
This basic layout control for SAP Fiori floorplans consists of a title, snapping header, content, and a floating footer.
The title has a heading on the left-hand side, middle content, and actions on the right.
Middle content is shown whenever the header is snapped, showing a summary of the selected header values.
You can expand and collapse the header with a title click, or pin it so that it’s always expanded.
The floating footer at the bottom displays finalizing actions for the respective workspace.
The header and the content area can contain any type of content.
Smart Micro Charts let you visualize your business data using different chart types.
A really special feature lets you highlight the criticality of thresholds by linking the color change to them.
Here, the metadata file and the OData Model of the application are used for the Criticality Calculation.
Let’s look at a SmartRadialMicroChart example in Explored.
For the Maximize Direction sample, the Deviation Range Low and Tolerance Range Low properties are used. This is how it looks using real data.
If less than 30 products are sold, this is critical and displayed in red.
Any value that’s higher than 30 but lower than the defined tolerance is shown in orange, while values higher than 75 are displayed in green.
Check it out for yourself, get your data at a glance using SmartMicroCharts.
For these and other highlights in SAPUI5, check out the demo kit or visit the link shown.