Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
MustafaBensan
Active Contributor

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 GroupComponentNewSAPUI5 M ModeSAPUI5 Mode
Analytic ComponentsChart
Crosstab
Dimension Filter
Filter Line
Filter Panel
Geo Map
Info ChartYes
Navigation Panel
ScorecardYes
SpreadsheetYes
Basic ComponentsButton
Chart Type Picker
Checkbox
Checkbox Group
Date Field
Dropdown Box
Formatted Text View
Fragment Gallery
IconYes
Image
Info Chart Feeding PanelYes
Input Field
List Box
Radio Button Group
Text
TreeYes
Container ComponentsGrid Layout
Pagebook
Panel
Popup
Split Cell Container
Tabstrip
Technical ComponentsAction SheetYes
Backend Connection
Global Scripts Object
PDF
Text Pool
TimerYes

New Components

A number of new components have been added as described below:

New ComponentDescription
Action SheetThis 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.
IconDisplaying 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 PanelThis 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.
ScorecardThis 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.
SpreadsheetThis 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.
TimerThis is now a standard technical component, previously requiring installation of the Real-time Package add-on.
TreeThis 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:

ItemProperty / EventNewSAPUI5 M ModeSAPUI5 Mode
ApplicationSAPUI5 m ModeYes
Position of Message Window
Compact Form FactorYes
Dimension FilterDisplay Mode
Popup Width
Popup Height
Popup Position
Popup is Modal
Auto Apply
Filter PanelDisplay Mode
Drag and Drop
Auto Apply
Direct Input for Filter
Desktop Style for Popup
On Cancel event
List BoxMulti Selection
Selection ModeNew
PagebookTransition Effect
Transition Direction

Templates

The templates have been rationalised as shown in the table below:

Template GroupTemplateNewSAPUI5 M ModeSAPUI5 Mode
StandardBlank
Basic Analysis LayoutYes
Basic LayoutYes
Planning Layout
Ready-To-RunData 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

4 Comments
Labels in this area