Introduction

UPDATED 12 October 2016 – mySmartApp is out of beta and now generally available.  Request access here to try it for yourself.

Long in the making, I’d like to introduce the story behind a soon to be released Design Studio extension, mySmartApp.  Although a commercial add-on, I thought it would be of educational value to share the journey and the end result.  I’ll talk about the challenges, design decisions and intent, as well as key features, with a view to receiving your opinions about the concept and encouraging further discussion.  For those that are interested in providing more direct, hands-on feedback, I’ll include information about the upcoming beta program towards the end of this blog.

 

mySmartApp in a Nutshell

 

mySmartApp is a single, self-contained, end-to-end component which allows the very rapid design and deployment of visually appealing, engaging analytical apps without the need for any coding, in a browser-based environment with run-time configuration wizard for easy definition of content using a variety of layout options and consumption patterns.

 

What It Is and What It Is Not

 

mySmartApp:

 

  • IS a tool for quickly deploying curated, lightweight yet sophisticated BI apps for the masses, by business users for business users
  • IS a complement to the existing “ready-to-run” standard apps

 

 

Target Audience and Use Case Scenarios

 

1)  Non-technical business users for creating code-free BI apps by focusing on business content rather than technical design

 

2)  Customers with small IT departments to allow them to be more productive by doing more with less

 

3)  Customers with large IT departments to allow rapid rollout of useful BI apps while freeing up resources in parallel to work on custom built specialised BI app requirements

 

4)  SAP Partners to package rapid deployment of BI apps with complementary value-added services for their clients

 

 

Features

 

No need to worry about properties or scripts

Based on various SAP presentations and feedback on the SCN, I think it’s safe to say that standard Design Studio is intended as an IT developer tool for creating professionally authored dashboards and BI apps rather than a tool for business users without coding experience.  While it’s true that with the latest features such as property binding, it is easier to create apps without coding (or at least with less code), more sophisticated apps still require coding.  This is one of the challenges mySmartApp seeks to address.       

 

mySmartApp does not have an Additional Properties Sheet (APS) with a huge selection of properties, nor does it include any script methods.  This is quite deliberate as the intent is to provide an easy to use, code-free environment for rapidly building useful BI apps which simplifies the process for business users and other non-programmers.

 

The philosophy here is to Run Simple, where less is more.

 

As you can see from the screenshot below, the mySmartApp component makes up the entire BI app.  The content is not rendered on the canvas at design-time because it is defined through a configuration wizard at run-time.

 

mySmartApp_DS_IDE.png

Easy to deploy for IT

 

Since mySmartApp is a single, comprehensive, self-service component only one Design Studio app with this component needs to be deployed to the BI Platform, after which multiple views can be configured and saved as needed at run-time.  This simplifies deployment and maintenance.

 

Stay organised with a built-in launchpad

 

As shown in the following screenshot, mySmartApp includes a tile-based Launchpad to access SmartViews (explained further along) available to the user:

mySmartApp_Launchpad.png

Combine the best of self-service and guided configuration

 

  • Initially create views with the Configuration Wizard

The Configuration Wizard guides the user through a step-by-step process to define the content of a SmartView, as shown in the example below:

 

mySmartApp_Wizard01.png

mySmartApp_Wizard02.png

  • Then edit them on-the-fly as needed

Once a SmartView has been created, end users have the option of adapting them further with the in-view editing feature.  Some examples are shown below:

 

mySmartApp_Editing01.png

mySmartApp_Editing02.png

mySmartApp_Editing03.png

The combination of Configuration Wizard and In-view Editing allows separate roles for designer and consumer if needed, whereby a designer can create SmartViews based on specific data sources and initial configuration, which can subsequently be shared with end users who can further refine these views for their specific needs.

Pick your own data source

 

The Configuration Wizard includes a step for selecting a data source from a BW or HANA backend system, based on a built-in data browser as shown below:

 

mySmartApp_DataBrowser.png

Select from multiple layouts with SmartViews

 

An important concept behind mySmartApp is that it takes an approach of providing a range of design patterns similar to templates, called SmartViews, with built-in configurable logic, to accelerate analytical app development.  The beta version includes two types of SmartViews as illustrated below but many more are in the pipeline and new ones will also be added based on feedback.

 

1. SmartTiles

 

This view presents a master-detail layout with a drill-down list on the left and a tile-based summary of KPIs on the main page.  It includes options to display the list as microcharts, bars and variances.  Similarly, the tiles may display either microcharts or variances.

 

mySmartApp_SmartTiles01.png

 

mySmartApp_SmartTiles03.png

 

mySmartApp_SmartTiles04.png

 

Clicking a tile displays the corresponding detail chart which is built-in to the view:

 

mySmartApp_SmartTiles02.png

 

2. SmartTree

 

This view allows the creation of a custom KPI hierarchy from selected measures.  The hierarchy nodes can be expanded and collapsed.  Zooming and panning is also supported.  The list on the left enables drill-down through dimensions.

 

mySmartApp_SmartTree01.png

Clicking a hierarchy node tile displays the corresponding detail chart, once again automatically included functionality:

mySmartApp_SmartTree02.png

Choose the look and feel from a range of themes

 

By default, mySmartApp implements the Blue Crystal Theme in conformance with the Fiori style.  However, it is clear from the SCN discussions and the customer feedback that there is also a desire to have the flexibility of alternative themes.  In particular, with standard functionality, theming an entire application with CSS can become quite a time-consuming process due to the need to research through debugging which style classes need to be overridden for each element.  mySmartApp provides a range of built-in themes to customise the look and feel of the app.

 

Below are some examples of a dark theme with gradients on the charts:

dark_theme_mp_detail31.JPG

dark_theme_mp_detail29.JPG

dark_theme_mp_detail32.JPG

Create once, run on any device: responsive and adaptive

 

One of the challenges of deploying Design Studio apps, as evidenced by various SCN discussions on the topic is to provide support for different types of devices such as smartphones, tablets and desktops, particularly in an increasingly mobile world where a mobile first design is encouraged.  mySmartApp addresses this issue with both a responsive and adaptive design.  There are various definitions of this terminology but I’ll define them as follows:

 

Responsive design keeps the same content for all target devices but simply changes the layout according to the form factor, whereas Adaptive design also includes logic to explicitly change the content for a particular target device such as smartphone or tablet.

 

View in your own language with built-in translation

 

To cater for a global user base, mySmartApp includes pre-translated menu texts.  The set of supported languages will continue to be expanded.

mySmartApp_Languages.png

 

Design Decisions

 

In this section I’ll discuss the main design decisions that were made in the course of the development of mySmartApp and why.

 

1.  Apply the Fiori Design Guidelines

SAP’s User Experience Strategy clearly sets the Fiori UX as the future direction of SAP applications.  This has been reinforced with the recent announcement of SAP’s partnership with Apple whereby the Fiori Design Guidelines now also include a standard for iOS.  Furthermore, from a Design Studio perspective this commitment to the Fiori design has been implemented with the new M Mode introduced in Design Studio 1.6.

 

Taking these factors into account, the main reasons for this decision were:

 

  • to ensure consistency with SAP’s stated future UX direction;

 

  • the adoption of a well-defined, enterprise grade standard like Fiori saves a considerable amount of time in terms of having a foundation to build on rather than creating one from scratch;

 

  • since Design Studio apps can be integrated as a tile on the Fiori Launchpad, the look and feel of mySmartApp will be consistent with the look and feel of the Fiori Launchpad and other Fiori apps thereby providing a familiar, coherent user experience as defined in the Fiori Design Principles.

 

2.  Provide flexible theming support

 

Although the Fiori Design Guidelines include what I consider to be an effective style based on a flat design with subdued colours as recommended by best practices, feedback from customers has brought attention to the need for providing flexibility in this area.  I confess that personally I have certainly been an advocate of such best practices in visualisation design but have come to realise that perhaps this stance could be a little idealistic.  In particular, it became quite clear that end users such as managers and C-level executives love their dashboards with gradients, lively colours and black backgrounds and that in the real world, this habit can be difficult to break.  Rightly or wrongly, it has a genuine influence on management support, adoption of one tool over another and the proliferation of BI within an organisation.  This need is also fuelled by the “consumerization of IT” whereby business users are now accustomed to using highly engaging and visually appealing apps on their smartphones and tablets and so expect the same in business apps. 

 

In light of this feedback, it was decided to include a theming feature with mySmartApp to provide a balanced approach for look and feel.

 

3.  Allow analytics based on configurable design patterns rather than free form design

 

Standard Design Studio already provides a developer environment for building custom BI apps through a free form WYSIWYG drag and drop interface and script coding.  The intent of mySmartApp is to complement this with the ability to rapidly create analytics through configuration of visually appealing and engaging design patterns, allowing non-technical business users to focus on the business content rather than the details of traditional custom app development.

 

4.  Implement run-time configuration rather than design-time configuration

 

Two main reasons drove this design decision:

 

  • By implementing run-time configuration we are able to move the design process into the browser, providing a more immersive, in-app user experience tailored for business users, whereas the Design Studio client is based on Eclipse, an Integrated Development Environment more suited to technical developers

 

  • Run-time configuration allows for a dynamic app where both design and consumption are within the same environment, providing a seamless experience for business users

 

5.  Implement as a composite component rather than a standalone app 

 

mySmartApp is effectively a complete app within a component i.e. a composite component.  A natural question arises which asks why not then implement the mySmartApp add-on as a standalone UI5/Fiori app on the HANA Cloud Platform?  The main reasons for this design decision were as follows:

 

  • Design Studio offers very important built-in BI plumbing for OLAP processing and data source access, including hierarchy support, navigation and drill-down which are not as easily reproducible with OData services for UI5/Fiori.  To replicate OLAP capabilities via web services for consumption in a UI5/Fiori app, the XMLA interface comes the closest but this adds the complexity of having to generate appropriate MDX queries on-the-fly to perform the desired manipulation

 

  • When deployed on the BI Platform there are additional advantages such as security and mobile BI

 

  • Implementing as an add-on for Design Studio complements a customer’s existing BI stack rather than presenting “yet another BI tool” which has to be separately deployed and managed

 

Matthew Shaw provides a very good review of choice of technology for implementing dashboards, covering SAPUI5, SAP Fiori and the SAP BusinessObjects BI Platform, in the blog post Custom SAP Fiori for my dashboard application?  mySmartApp aims to combine the best of each of these three options into a single add-on for Design Studio.

 

6.  Implement as a single composite component rather than multiple discrete components

 

Typically a Design Studio SDK component is implemented as a discrete component, such as a chart or a table, for a specific purpose, which is integrated with the overall BI app via scripting.  However, mySmartApp is implemented as a composite component for the following reasons:

 

  • To allow the implementation of code-free design patterns whereby the logic integrating each of the elements is embedded in the component

 

  • To allow much tighter integration of the elements that make up the design pattern than would be possible through “wiring” of separate components via scripting

 

  • To allow the implementation of a standardised theming architecture across all elements of the design pattern

 

7.  Provide Support only for BusinessObjects BI Platform Deployment

 

Although technically Design Studio apps can be deployed on 3 platforms: BusinessObjects BI, NetWeaver and HANA, each of these options offer support for a different set of overlapping features, with BusinessObjects BI offering the most comprehensive.  SAP’s future direction for Design Studio platform support was clearly described in the blog The Future of Design Studio Platform Development whereby all future investment will go into deployment on the BI Platform.  In order to future-proof mySmartApp and take maximum advantage of Design Studio features, aligning with the BI Platform was a natural choice.

 

8.  Maximise the use of technology that is included with the SDK framework rather than relying on 3rd-party libraries

 

The Design Studio SDK already includes the SAPUI5 and D3 libraries.  The combination of the robust SAPUI5 app framework with the flexibility of D3 custom visualisations provided a comprehensive foundation for building mySmartApp without the need for specialised proprietary libraries.

 

Experience mySmartApp
Interested in providing direct feedback?  Sign Up for the Beta Program 

UPDATED 12 October 2016 – mySmartApp is out of beta and now generally available.  Request access here to try it for yourself.

If you’d like to provide hands-on feedback and influence the future development of mySmartApp, please sign up for the beta program here.  A limited number of registrations are available.  Your input and participation would be greatly appreciated.

Conclusion

 

I hope you’ve found this to be an informative story of the journey and thought process behind the development of a particular Design Studio add-on.  This is just the beginning for mySmartApp as we move forward with exciting plans for the future.

 

I look forward to receiving your questions and comments for further discussion.

 

To report this post you need to login first.

8 Comments

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

  1. Karol Kalisz

    Mustafa, I would say “I am speechless” on the first view on this blog. As I comment it here, I hope “write-less” is a good synonyme for it 😉 It is really impressing “app”.

    (0) 
    1. Mustafa Bensan Post author

      Hi Karol.  Thanks for the inspiration.  I like the synonym suggestion too 🙂   I have to admit, this project has certainly been a passionate adventure in seeing just how creatively the SDK could be leveraged.

      (0) 

Leave a Reply