Skip to Content

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_M_MODE.jpg

SAPUI5_M_MODE_COMPONENTS.jpg



SAPUI5 Mode

SAPUI5_MODE.jpg

SAPUI5_MODE_COMPONENTS.jpg

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:

DS_Migrate_To_M_Mode.jpg

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
PDF
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.

Action Sheet Button 2.0

Fiori App Header

Fiori Bar

Fiori Toolbar

Launch Pad

Segmented Button 2.0

Multi ComboBox

KPI Tile 2.0

Area Micro Chart 2.0

Bullet Micro Chart 2.0

Harvey Ball Micro Chart 2.0

Process Flow 2.0

Radio Button Group 2.0

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

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Carlos Weffer

    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.

    (0) 
    1. Mustafa Bensan Post author

      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.

      (0) 
  2. Michael Simon

    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

    (0) 

Leave a Reply