Design Studio Innovation Series: Topic 8 – Introducing the new M Mode for rendering Fiori-style apps in Design Studio 1.6
One of the important new features introduced with Design Studio 1.6 is the SAPUI5 M rendering mode. In this blog I’ll summarise the important aspects of the new feature based on the available documentation and my experience so far.
When Design Studio was first released, its rendering framework was based on the UI5 Commons library, the only suitable library available at the time. Since then UI5 has evolved considerably, with the addition of the sap.m library, initially with a focus on mobile while also supporting desktop. When Fiori apps were introduced, they were based on the sap.m library, which is where the development effort is going now and the library has become known as the “main” library instead of “mobile”. Given SAP’s UX strategy to converge all applications and UI technologies to the SAP Fiori UX it certainly makes sense that Design Studio should follow this direction with the addition of the M Mode for rendering.
How Does It Work in Practice?
Now, when creating a BI app, we are presented with two rendering options, SAPUI5 and SAPUI5 M, as shown below, with corresponding templates and component palettes:
SAPUI5 M Mode
The components and templates in both modes are compared in the following sections. Once a rendering mode is selected it cannot be changed manually. However, there is an option to migrate from SAPUI5 mode to SAPUI5 M mode from the Tools menu:
For the most part, components are available in both modes but there are some exceptions, as shown in the table below:
|Component Group||Component||New||SAPUI5 M Mode||SAPUI5 Mode|
|Chart Type Picker||➕||➕|
|Formatted Text View||➕||➕|
|Info Chart Feeding Panel||Yes||➕||➕|
|Radio Button Group||➕||➕|
|Container Components||Grid Layout||➕||➕|
|Split Cell Container||➖||➕|
|Technical Components||Action Sheet||Yes||➕||➖|
|Global Scripts Object||➕||➕|
A number of new components have been added as described below:
|Action Sheet||This is a technical component which consists of a list of actions that can be opened beside another component such as a button or icon. It is documented in the blog Design Studio 1.6 – View on Action Sheet Technical Component.|
|Icon||Displaying icons previously required a CSS trick applied to a text component. There is now a dedicated Icon component to allow the easy selection and display of icons. The icon library is the same as the one demonstrated in the SAPUI5 Icon Explorer app. This component is documented in the blog Design Studio 1.6 – View on Icon & Custom Font.|
This is the new preferred alternative to the previous Chart component. It is documented in the following blogs:
|Info Chart Feeding Panel||This component complements the Info Chart by providing a user-friendly means of configuring the chart. It is also documented in the above blog. Related custom styling is discussed in the blog Styling the Info Chart Feeding Panel Component.|
|Scorecard||This component allows the display of a table with embedded microcharts as well as data, suitable for a dashboard. It is documented in the blog Design Studio 1.6 – View on Scorecard Component.|
|Spreadsheet||This component is mainly intended for planning applications. As far as I am aware, at the moment is doesn’t include any spreadsheet calculation functions similar to Excel.|
|Timer||This is now a standard technical component, previously requiring installation of the Real-time Package add-on.|
|Tree||This component allows the display of hierarchical data from a bound data source as well as bookmark folder hierarchies.|
Both rendering modes now default to the Blue Crystal theme, the importance of which is described in the blog Why Use Blue Crystal Style in Design Studio Apps?
Also, there is a Compact Form Factor property in M Mode for choosing between the “Compact” style which is optimised for desktop and the “Cozy” style which is optimised for touch devices. For those that are interested in further background about these modes, the Cozy and Compact Form Factors section of the Fiori Design Guidelines provides a comparison of the two.
The differences in component properties across the two rendering modes are summarised in the table below:
|Item||Property / Event||New||SAPUI5 M Mode||SAPUI5 Mode|
|Application||SAPUI5 m Mode||Yes||➕||➕|
|Position of Message Window||➖||➕|
|Compact Form Factor||Yes||➕||➖|
|Dimension Filter||Display Mode||➖||➕|
|Popup is Modal||➖||➕|
|Filter Panel||Display Mode||➖||➕|
|Drag and Drop||➖||➕|
|Direct Input for Filter||➖||➕|
|Desktop Style for Popup||➖||➕|
|On Cancel event||➖||➕|
|List Box||Multi Selection||➖||➕|
The templates have been rationalised as shown in the table below:
|Template Group||Template||New||SAPUI5 M Mode||SAPUI5 Mode|
|Basic Analysis Layout||Yes||➖||➕|
|Ready-To-Run||Data Discovery and Visualization||➖||➕|
You’ll notice that there are only two templates available in SAPUI5 M Mode. Presumably the Basic Analysis Layout and Ready-To-Run templates are not available as the Filter Line, Fragment Gallery and Split Cell Container components required by these templates are not yet supported in SAPUI5 M Mode. I expect we’ll see support for these in a future version of Design Studio.
Furthermore, the following templates have been removed:
Ad-Hoc Analysis Template
Basic Analysis Template
KPI Dashboard Template
KPI Details Template
iPad Template 1
iPad Template 2
iPad Template 3
iPhone Template 1
iPhone Template 2
Implications for SDK Components
With the two rendering modes, SDK components must now specify which rendering mode they support. This can be either or both. In my view though, a more important benefit of the new SAP M mode is that it means the sap.m library is now officially supported for SDK component development. In the past, there have been many discussions on the SCN about the use of sap.m controls in SDK components, with issues related to click events and mobile scrolling requiring workarounds to be implemented. With Design Studio 1.6 it’s great to see that these issues appear to have been resolved and we should now be able to take advantage of sap.m controls more freely when needed. This is especially relevant for the Fiori-style components in the SCN Design Studio SDK Development Community component set.
More information can be found in the blog What’s New in Design Studio 1.6 SDK.
SDK Development Community Fiori Components
The M Mode contains a subset of Fiori-style components from the UI5 sap.m library. To complement these in the development of Fiori-style BI applications I recommend considering the following components from the SCN Design Studio SDK Development Community. I expect a version 3.0 adapted for M Mode will be released when ready.
I think the M Mode rendering is a very welcome new feature in Design Studio 1.6 which brings us significantly more capability for easily building Fiori-style BI apps combined with related SDK components such as those listed above. Going forward, I would recommend that at least for new applications, you give serious consideration to using SAPUI5 M Mode. It should fulfil most requirements compared to the standard SAPUI5 mode, with the current exception of online composition scenarios but I expect we’ll see support for this in future.
Blog Series Index: Design Studio Innovation Series – Welcome