Design Studio Innovation Series: Topic 8 – Introducing the new M Mode for rendering Fiori-style apps in Design Studio 1.6
Introduction
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.
Background
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
SAPUI5 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:
Component Comparison
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 |
|---|---|---|---|---|
| Analytic Components | Chart | ➖ | ➕ | |
| Crosstab | ➕ | ➕ | ||
| Dimension Filter | ➕ | ➕ | ||
| Filter Line | ➖ | ➕ | ||
| Filter Panel | ➕ | ➕ | ||
| Geo Map | ➕ | ➕ | ||
| Info Chart | Yes | ➕ | ➕ | |
| Navigation Panel | ➕ | ➕ | ||
| Scorecard | Yes | ➕ | ➕ | |
| Spreadsheet | Yes | ➕ | ➕ | |
| Basic Components | Button | ➕ | ➕ | |
| Chart Type Picker | ➕ | ➕ | ||
| Checkbox | ➕ | ➕ | ||
| Checkbox Group | ➕ | ➕ | ||
| Date Field | ➕ | ➕ | ||
| Dropdown Box | ➕ | ➕ | ||
| Formatted Text View | ➕ | ➕ | ||
| Fragment Gallery | ➖ | ➕ | ||
| Icon | Yes | ➕ | ➕ | |
| Image | ➕ | ➕ | ||
| Info Chart Feeding Panel | Yes | ➕ | ➕ | |
| Input Field | ➕ | ➕ | ||
| List Box | ➕ | ➕ | ||
| Radio Button Group | ➕ | ➕ | ||
| Text | ➕ | ➕ | ||
| Tree | Yes | ➕ | ➕ | |
| Container Components | Grid Layout | ➕ | ➕ | |
| Pagebook | ➕ | ➕ | ||
| Panel | ➕ | ➕ | ||
| Popup | ➖ | ➕ | ||
| Split Cell Container | ➖ | ➕ | ||
| Tabstrip | ➕ | ➕ | ||
| Technical Components | Action Sheet | Yes | ➕ | ➖ |
| Backend Connection | ➕ | ➕ | ||
| Global Scripts Object | ➕ | ➕ | ||
| ➕ | ➕ | |||
| Text Pool | ➕ | ➕ | ||
| Timer | Yes | ➕ | ➕ |
New Components
A number of new components have been added as described below:
| New Component | Description |
|---|---|
| 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. |
| Info Chart |
This is the new preferred alternative to the previous Chart component. It is documented in the following blogs: Introducing Info Charts in Design Studio 1.6 Introduction to SAP Design Studio 1.6 Scorecard Component (Part 1) Introduction to SAP Design Studio 1.6 Scorecard Component (Part 2) |
| 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. |
Properties
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 Width | ➖ | ➕ | ||
| Popup Height | ➖ | ➕ | ||
| Popup Position | ➖ | ➕ | ||
| Popup is Modal | ➖ | ➕ | ||
| Auto Apply | ➖ | ➕ | ||
| Filter Panel | Display Mode | ➖ | ➕ | |
| Drag and Drop | ➖ | ➕ | ||
| Auto Apply | ➖ | ➕ | ||
| Direct Input for Filter | ➖ | ➕ | ||
| Desktop Style for Popup | ➖ | ➕ | ||
| On Cancel event | ➖ | ➕ | ||
| List Box | Multi Selection | ➖ | ➕ | |
| Selection Mode | New | ➕ | ➖ | |
| Pagebook | Transition Effect | ➖ | ➕ | |
| Transition Direction | ➖ | ➕ |
Templates
The templates have been rationalised as shown in the table below:
| Template Group | Template | New | SAPUI5 M Mode | SAPUI5 Mode |
|---|---|---|---|---|
| Standard | Blank | ➕ | ➕ | |
| Basic Analysis Layout | Yes | ➖ | ➕ | |
| Basic Layout | Yes | ➕ | ➕ | |
| Planning Layout | ➖ | ➕ | ||
| Ready-To-Run | Data Discovery and Visualization | ➖ | ➕ | |
| Generic Analysis | ➖ | ➕ | ||
| Online Composition | ➖ | ➕ |
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.
Conclusion
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.
Recommended Reading:
Design Studio 1.6: What’s New in? A (Technical) View
Blog Series Index: Design Studio Innovation Series – Welcome
Hi Mustafa
Thanks for this great summary about the new M mode. I reckon this is a good step forward to unify design frameworks by SAP.
My expectation is to see more Fiori UI Elements/Components available in Design Studio. My wish list:
Responsive Table - specially the growing feature.
Filter Bar
Toolbars - with the generic search box
Action Sheet
and to have Filter Line, Fragment Gallery and Split Cell available in M mode too.
Cheers,
Carlos W.
Hi Carlos,
Thanks for the feedback. Yes, I think the first release of the M mode is a very good start. I'm sure we can expect it to be enhanced in future versions of Design Studio with other components being added, hopefully including ones from your wish list too.
Let's see,
Mustafa.
Hi Mustafa,
Could you provide more information about how mobile scrolling is solved with sap.m?
Thank you!
Best,
Alfred
Hi Mustafa,
Thank you for the detailed description. I'm missing one important (at least for our users) property difference for the Navigation panel: In m Mode the option "Pause refresh" is not available anymore (the button in the navigation panel on runtime is missing as well as the setting in design time). This means the users cannot pause the refresh in order to do several navigation steps at once (e.g. add 4 drilldown characteristics) and then execute only once.
Because of this huge drawback we won't migrate to m Mode in the next months.
Best regards,
Michael