Skip to Content
Author's profile photo Michael Howles

Sneak Peak – SCN Design Studio 1.6 SDK Components

Now that Design Studio 1.6 is available and Reiner Hille-Doering has shared some of the new goodies for the SDK in his post What’s New in Design Studio 1.6 SDK, Karol Kalisz and I are getting closer to releasing the next version of our components that are bundled in our releases as the SCN Design Studio SDK Development Community.

What is New?

  • About sap.m…

    As mentioned by Reiner, Design Studio 1.6 now offers ‘official’ support for sap.m components (aka the Fiori-like components.)  Before, we had a number of Fiori/sap.m-based extensions that we were “hacking” to work in terms of loading, and forcing the events to register.  Now that Design Studio supports two ‘modes’ of BI Applications, the old ‘commons’ mode, and now the new ‘m’ (or Main) mode, we have made some adjustments to our existing components and included some new ones, also.

    Since the direction is to move eventually to the new ‘m’ mode, I’ve chosen to deprecate the sap.m components at this point.  I’ve made sure they continue to work in ‘commons’ mode for 1.6, but due to eventing and loading differences in ‘commons’ and ‘m’ mode, I’ll not be maintaining ‘commons’ mode for any fixes or enhancements for long.  I’d suggest if you are looking to use these types of components to consider migrating to ‘m’ mode when you can.

    Now along with the old ‘Fiori-like’ components, I’ve added a few new ones:

    • Fiori Switch
      Fiori Switch.png

    • Fiori Slider

      Fiori Slider.png

    • Fiori Input Field

      Fiori Input Field.png

    • Fiori Segmented Button

      Fiori Segmented Button.png

  • About new Complex Property Types and the Additional Properties Sheet…

    During Design Studio 1.4/1.5, I wanted to cut down on a lot of the work that it takes to create the Additional Properties Sheet (APS).  There are many reasons to need an APS instead of the Default Properties sheet, especially when it comes to complex properties or nested/array-like properties.  There’s some good potential that has come with 1.6 complex properties which even make the Default Property Sheet a little more usable for properties defined in the new Object/Array format, however there are some limitations such as you cannot set a default value for these new types, and you have to stick to the structure in contribution.xml which means you cannot build deeply nested properties that go down to arbitrary depths for something like a menu path component, etc.

    So for 1.6, we still use String properties that are JSON-serialized, with our APS that can express these types of properties in an easy to use way.  In the future, our APS will support ‘true’ complex types, but for now we did not want to introduce regressions for people using our components in existing dashboards.

    All that being said, I’ve taken the opportunity to port some of my older components over to the new APS for consistent look & feel, as well as some of the components developed by others in our SCN development community that didn’t have an APS.  Examples:

    • Bring Your Own Data Datasource Component


    • Base-64 Encoding Image

      (For those unfamiliar, clicking the Upload (Browse) button will base64-encode your image without having to upload it.)
      When clicking ‘Details’:


    • Rapid Prototyping Component

      I’m working on including some ‘Preset’ HTML, shown below that will render some common boiler-plate HTML as you see below on the right.  On the left is the HTML that is rendered.  But that’s not all that is new…

      I’ve moved the term placeholders and replacements to a ‘Find/Replace’ category, along with now an optional new data selections (the ones labeled ‘KPI Replacement’ to cut down BIAL scripting when you just want to use a KPI selection.  The older replacements still exist as ‘Manual Replacement’.  In the example below, you can see the placeholder term {kpi1} has been replaced by KPI Replacement 1.


    • Tag Cloud

      I’ve also enhanced James Rapp‘s Design Studio Extension: D3 Word Cloud to support the new APS and enhanced it with more properties.

      Tag Cloud.png

    • Arrowed Line

      Donnie Burhan‘s Design Studio SDK – Line with Arrow also now works with this new APS:

    • Bullet Chart

      Like Tag Cloud, I ported over Jeroen van der A‘s Design Studio Extension: Bullet Chart to the new APS pattern.

      *Something to note before release, the Measure selectors and Dimension selectors will come as drop downs for ease of use, also we can take the long list and apply sub-tabs for quick location, etc.


    • D3 Tree

      As a final example, we can see Manfred Schwarz‘s D3 Hierarchy component now works with this APS:


    • Others

      There are definitely other components that Karol or I are in process of porting over to make more consistent but these were just a few examples I’ve worked through.  Our goal is a more consistent collection.

  • Optimizations & RequireJS

    We’re also taking this opportunity to fully embrace the 1.6 full RequireJS support.  These are mostly internal changes that nobody will care about expect those of us contributing to this project.  Basically, we are using the Require modularization methodology of loading JS and CSS files as-needed per-component.  I’ve actually taken this concept all the way to the APS which means depending on what types of property controls are needed in APS, only those are loaded.  This should translate into faster loading APSs and less memory usage.

When is it Coming?

“Soon”  🙂   We need to finalize some internal house-keeping topics and plugin clean-up, but my goal would be before end of December.


Have a problem, idea, question?  As always, feel free to drop a line in comments!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Mike,

      This all looks great! Thank you.

      I have recently downloaded the SDK components 3.0 and was wondering if all the components mentioned above are included in the 3.0 update. I was not able to find some of them such as Fiori Switch, Fiori slider, Fiori input field, etc. If it is not included, could you please let me know where I can find them?

      Appreciate your help.



      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi Pranoti,

      I have the same issue (I don't found of the mentioned firori components). Were you able to clarify what was wrong?



      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      They are only available in M Mode.

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      I imagined.


      Author's profile photo Frank Gerken
      Frank Gerken

      I am trying the FIORI Slider in UI5m mode, but I am not able to get the selected value of the slider, meaning the values position of the pointer. I tried it by "FIORISLIDER_1.getValue()", but it always gives back the Initial value of the property "value".

      Is there any way to get the selected value (e.g. if the pointer in in the center, min is set to 0, max is set to 100 the given value should be 50)?

      Author's profile photo Former Member
      Former Member

      Hi Mike,

      I'm using the Bring Your Own Data Source Component and I see the deprecated section that contains the sorting methods for de data source and it doesn´t work anymore.
      I've looking for a method to sort by dimension but I couldn’t find it, in universe data source I could edit the initial view or sort by sortByMember but no in the BYO Data component
      How can I sort by Dimension in BYO Component?

      Author's profile photo Alexander Oertel
      Alexander Oertel


      I'm testing the DATERANGESCROLLER and I have a question about it:

      I have an application that changes the viewType of the DATERANGESCROLLER using a DROPDOWN BOX. The change of the viewType works fine. But with the change of the viewType I want to immediately change the filter on a datasource, too. This does not work. I have to click the DATERANGESCROLLER first.

      1.) ViewType MONTH, DATERANGESCROLLER shows "January 2017", data source is filtered on 01/01/2017 - 01/31/2017

      2.) Now I change viewType to "Week", DATERANGESCROLLER shows "January 2 - 8, 2017" immediatly but data source still filtered on 01/01/2017 - 01/31/2017

      3.) Click DATERANGESCROLLER and apply filter to data source.

      So filtering a datasource with DATERANGESCROLLER.getStartDate() and DATERANGESCROLLER.getEndDate() only works after clicking the DATERANGESCROLLER once.

      Is there a way to automatically change a data source filter when the viewType is changed?

      Thank you for your comments,
      Alexander Oertel