SCN Design Studio SDK Development Community
3.0 Information (new for Design Studio 1.6)
SCN Design Studio 1.6 SDK Components (ver 3.0)
Summary of Components
Component List – SCN Design Studio Community
SDK Development Community Git Repository (list & documentation)
Component List (A must see!)
Component List – SCN Design Studio Community
Just over one year ago, SAP released an SDK to us beginning with Design Studio 1.2. Time flies, and we’ve had two releases since then and currently are now up to 1.4 with many new features available.
As many know I’ve publicly shared many of my components to SCN via blog posts referencing open source code on GitHub. It began mostly with blogs on how the components were written, and then my approach shifted to more of a use case followed by a ready-to-install version (with source code available for fellow coders.) Karol Kalisz from SAP also began actively contributing over this past year along with a few from Jeroen van der A, leandro cardoso, Nicholas Stein, and David Richardson.
There’s probably little debate that Karol Kalisz and myself have been the most active and at times have even overlapped on contributions to the community. (Example: SDK components – development direction & concepts) Dirk Mayrock also stepped up to try to help curate a list of these components from various open source (and commercial) contributors.
With the many different (and sometimes similar) components we’ve made available , Karol and I thought there was room to improve and organize. We’ve had good discussions over a number of threads recently where Karol and I decided to explore the option of creating a unified community package that we could both contribute and collaborate on together instead of working in isolation.
Karol and I are joining efforts for Design Studio SDK development for open source community-based components. SCN is the logical place to announce this and continue to share new contributions.
As of today, our voluntary members are:
Why are we doing this?
- We see potential in sharing development techniques and common code together.
- We want to have a set of components and source code that are not competing or overlapping with one another.
- Provide more consistency to our (at times brave) community of designers who are using our SDK components.
Our Main Goals
- Continue to share SDK Source Code examples (and their ready-to-install versions) with the SCN Community.
- Engage additional SDK developers (new and “old”) to contribute.
- Engage people who may not be SDK developers, but have great ideas and use case requirements.
- Improve and standardize delivery and communication of new components and a way to track issues and new ideas.
What will change for SDK Developers who are interested in participating?
- All SDK extensions will be made available in a common repository which is owned by the community.
- With a common, centralized repository, better support (always on a voluntary basis, mind you) will be possible.
- Basic but limited support approach for isolating 1.4 extensions from 1.3 extensions where feasible, so to not cut off those who cannot immediately move to 1.4 but would like to start moving to this new repository.
What will change for Design Studio Designers who have used existing SDK Extension Releases?
Karol and I have no plans to remove our old repositories as long as GitHub and webhosts used are available. These primarily are:
While you can choose to use these existing packages as-is, we have no plans to fix any issues or enhance them further and we highly recommend you begin shifting over to the newer centralized repository that will receive all future enhancements and fixes.
What is this new approach?
We will provide one centralized repository, but with two different states of development you can choose to work with:
Preview builds are similar to what other development communities may call nightly or experimental builds. In our case, probably not nightly, but whenever we have something we’d like to share in a usable however not fully-baked form.
Stable builds are created when we (SDK developer community) are happy enough with the content and feel it could survive in the wild (Design Studio Designers)
Where can I see the Source Code?
The SDK code can be viewed, forked, and downloaded as a .ZIP of Eclipse projects from GitHub at this URL:
org-scn-design-studio-community/sdkpackage · GitHub
I am not a coder, how can I just install the Ready-to-Use version?
As some know, there are two approaches to installing SDK Extensions. The approach that works for you is based on your workplace environment and design approaches.
- “Offline” .ZIP Archive Method
You can choose to download a .ZIP archive version. The advantage is that once you obtain the software in archive form, you can then distribute to a broader designer team at your workplace and you do not have to worry with corporate firewall issues once you have it downloaded once. The disadvantage is that you now must manually pull down future versions and distribute ongoing.
- “Online” Repository Method
You choose can install the SDK Extension via URL as well. The advantage is that pulling down new updates is very streamlined and can be done within the Design Studio tool itself. The drawback is that if you have an aggressive corporate firewall this may not be an option, and if you want stricter controls on which last version of the SDK Extension you are using, the online method may not be the best fit.
With that definition, here are the links to the “Offline” Archives and “Online” Repositories.
To install using Online Repository, in Design Studio select Tools -> ‘Install Extension to Design Studio…’ and copy and paste either the stable or preview version you’d like to install listed below. Do not try to visit these links from a browser, you must use these links in Design Studio.
To install using Offline Archive, first download either the stable or preview version below, and then in Design Studio, select Tools-> ‘Install Extension to Design Studio’ -> Click the ‘Archive…’ button, and browse to the .ZIP file you have downloaded.
Once you have followed one of the 2 method’s paths above, the remaining steps are the same. You will be presented with a dialog box asking you which SDK Extension Features you’d like to install. As mentioned earlier, we’ve made an effort to isolate 1.4 extensions from 1.3 extensions for the time being. That’s not to say that some components packaged in 1.3 may not behave differently in Design Studio 1.4, so proceed with this in mind, but the 1.3 option will install in DS 1.3 and both can and should be installed in DS 1.4.
Check mark the relevant Extension features and continue. (DS 1.3 users should only select the 1.3 option)
After finishing the installation wizard, you will be prompted to restart Design Studio at which point you can then begin to use our components!
What all is Included?
Karol’s intent is to port over most if not all of his existing components. I’ve opted to let some of my experimental/exotic components die off and will not be porting them all over since the intent in this repository are mostly usable components and I’d like to avoid cluttering it with my lab experiments. Perhaps Karol and/or I will isolate these as their own check box feature in the future for those brave enough to be guinea pigs.
Developer participation is purely voluntary and there’s no support obligation from participants to provide maintenance, even from SAP.
I’d Like to Join the Effort!
Great! Put a comment below and Karol or I will respond with more detail, if not a separate more technical discussion post/document with more information.
Update: Technical details now provided: SDK Development Community Git Repository (sdkpackage)
Questions, Comments, Problems?
Please comment below and we will try to help where we can and this post will be kept up-to-date with the latest information as things progress.
Hi Mike and Karol,
We have developed several CVOM extensions (Luimira SDK) based on D3.js graph library and I think that it would be useful to re-develop them again as a Design Studio Extensions in order to workaround some issues we have (see on .) Do you think that issue described there managing flat table datasets could be workarounded using Design Studio SDK?
If yes, I think we have enough Java/JS/CSS skills to afford the challenge but in order to re-invent the weel question would be: Could you recommend us some open-source DS extension (also based on D3) which source code we can "effectively" use as a model/template to follow in our task?
Thanks for your patient and devotion!
We installed the SDK pack earlier in an existing BO server . However the box had to be cleaned up due to complications . After rebuilding the Server I am trying to reinstall the components but I am unable to do that .
Whenever I am trying to do that it's showing the components are already installed . But it is not showing in platform extensions .
first of all thanks alot for your great work on this!
Most of the things we tried out with this package works very good but with the latest version there is a problem. The CLIENTINFORMATION is now a technical component but when we use it it covers over the whole application. That makes Buttons unuseable. Is there a way to work around this?
Thanks in Advance!
I assume you are in M mode and not classic mode? M mode has many bugs that I have seen, this is one of them. I hope SP1 due soon corrects it. Can you confirm you are in M mode? Going back to Classic mode should fix.
Thanks for your answer!
I checked that but it is not the m mode. I even tried to migrate the application to that but the CLIENTINFORMATION blocks it.
It is a prototype that i built from Karols Blog on how to create responsive applications with SCN components and is not compatible with the m mode. I confirmed this error in a simple application where i only had a button and the technical component Clientinformation. The Button was unclickable.
Looking at the created HTML DesignStudio seems to create containers for techincal components that actually have size 100% for width and height. If i set this to 0px with css it works but this solution is very sloppy and not dynamic.
Just to confirm this i am talking about the version 3 of the SCN extensions.
Strange, I only had that happen tool me in M mode. This afternoon I can test and revert it if needed. Sorry about this if it's a bug on our end!
Ok thanks alot! Would be great if it works cause this component is for me one of the best in this package.
Making the change back today. Confirmed this was broken.
Update: Fixed, and available for download.
the fix works perfectly fine thanks alot!
We are trying to move some of our dashboards from classical to m mode, but I have found an issue on Fioiri ToolBar (m-mode). It does not show any button, only 3 small dots at the rgith margin. I am using DS 1.6 and I have downloaded latest stable release of components by today.
Might be a bug?
I can confirm this is messed up in M mode. I'll push a fix up today.
Update: Fixed, and available for download.
Thank you for the SDK version 3.0
I am using the component "Postresponseparser" which works very well in version 2.0.
But When I upgrade to SDK version 3.0. I found that some of API cannot find.
Ex: I can use the function "add parameter" in version 2.0 but I cannot found in "Postresponseparser 2.0" in version 3.0. Is there anything I miss?
Thank you very much for the really useful component.
Thanks for the feedback. Regarding the bug, if you could log a GitHub issue here, we can track its resolution:
Issues · org-scn-design-studio-community/sdkpackage · GitHub
Karol Kalisz created this one and is familiar with it so let's see if he has any quick response before I go make a bigger mess of it 🙂
Thank you very much, I already log the issue in GitHub.
Hi Mike & Karol
Thank you so much for the help.
This bug already fixed by Karol
I'd like to get involved with developing some content for this (and at the same time ramp my JAVA knowledge up. Is it possible that you could send me a direct communication in this regard?
Custom extensions: Anyone interested in my personal list of useful D3.js resources?
I´m not quite sure if it is really helpful to You guys. Maybe it´s a bit off-topic. So before
I start writing a blog or a paper, just let me explain and ask a question:
Since the dawn of DesignStudio I was allways fascinated by the idea of creating my
own extentions. First thing I learned: It´s possible, the possibilities are nearly endless,
but You have to learn a fair amount of D3.js before You can use Your very own extentions
with DS. Comming for the business side of things and beeing an absolute rookie in
I gathered a lot of information from Websites, Blogs, Tutorials, Ebooks
an printed ones during the last few months and I´m still climbing up the steep learning curve.
Just give me a shout, if You are interested in what I found useful to start with D3.js.
How can I make the complete removal of components such as from the platform and from local store?
Hello Mike -
We are planning to use couple of SDK components developed by community. Can you please guide us on how we can extract only required components from the list
Learn how to modify the code by reading the Design Studio SDK Developer guide.
Specifically section 4.1 on contribution.xml definition to remove the component definitions you do not want and section 3.3.2 to use a Feature project to bundle your modified version.
I'm trying to import the offline tools, after saving the zip file and using the "Archive..." button, and I'm receiving an error message "Discovery completed without finding any extensions. Please check your network connection and try again". I tried with the online version and I can imported it but our firewall cuts the connection, so I have to use the offline.
Is there any issue with this zip file? Do I need to change the steps to import it?
Thank you in advance.
indeed last ZIP was broken. Try now, I have updated it. it is already online.
Thank you for your soon response!
It's working fine.
After Upgrade to DS 1.6 SP2 our dashboards using SCN components (BulletMicroChart + JSON Object) are not displayed anymore. If we open the dashboard in Designer an empty canvas is shown, no error message. Also in Browser just an empty screen shows up.
Is the SDK Package not yet ready for SP2?
Good question, I cannot test on 1.6 SP2 yet, (we are stuck on 1.6 SP1 indefinitely), however Karol Kalisz might know more... I can try on a test box later but I am not near one currently.
Do you see any errors in the developer tools console?
See the Firebug log I attached to GitHub Issue List:
Hey guys, awesome project. I'm currently experimentig with the planning calendar. Is it possible to add the week for the view? I tried to add it somehow, but i can only get it to the property dropdown and then it throws errors. I cannot find the coing for the selection. Any help is appreciated.
if you have an issue which can be reproduced, please log here:
Issues · org-scn-design-studio-community/sdkpackage · GitHub
we will try to take care soon.
is it possible to install just only one of the SCN SDK Components (e.g. OPENURLINPLACE) and not the whole package?
Hi, I've been looking around and Reading about the SDK and for my life that I couldn't find any reference to any license terms. I'm planning on installing these components on my company's BI server but before doing so I wanted to be sure I coud use them for our business (profitable), so I'll ask it here, are these components offered under some kind of license that allows its free use? (I'm thinking GPL or something).
Thanks for your answer and the great work your doing!
The license is presented to you at the time of installation, at which time you have the option to exit if you prefer. You can also review the license in the GitHub repository: https://github.com/org-scn-design-studio-community/sdkpackage/blob/master/LICENSE
Hi,Mike,My bi platform is BO 4.1 sp5. After I installed Design studio 1.6 ,the webi reports become slow,and the rhythm is almost 5-10 minutes alternately, fast ,slow, fast ,slow...
Each time I restart the server (windows 2012), the BO speed recover the normal circumstance.But almost one day later ,the slow rhythm is back.Could you know the reason?Thank you.
Unfortunately this is a question you need to discuiss with SAP support. In addition to that your question is off-topic for this blog post. Please follow the rules of sap.com.
Hi SDK Developers,
I am having a question regarding the Design Studio SDK: Calendar Selector Component
Is it possible to color some of the dates with special colors? and Add data source to the component?
I tried to find more information on SCN, but many links broken after migrating to new SCN.
We are also trying to recollect all our content and fix broken links as we go. You can try to open a feature request on our GitHub page to get what you want for the calendar component. Of course you are always free to copy our code and extend it yourself. It is definitely possible to add coding to assign a datasource containing dates and applying special styling for them on the component from a UI5 perspective.
I have added the components in my design studio. I have published the same in the BO repository. In my local mode the component(Gauges) work fine but from the BO launchpad the Analysis application does not work. Should i do something at the platform level ?
What is the use of "Platform" extensions?
Pleas read the Design Studio documentation to do this properly. Also you need to make sure to publish all our SCN SDK Design Studio components to BIP.
I've problem with component "PDF Print 2.0". I need PDF export of one panel in landscape mode. In original 3.0 release of SCN DS SDK it works great in the local mode but failed to export in on BI platform (prints in portrait mode and ignores setup of component). Now in updated productive version of SCN SDK (also in experimental build) it failes to print in landscape mode in both local and BI platform. This component is very important for me and I'd like to use it on productive system. But with limitation to portrait mode export I can't... Could you please help me?
My DS version is 1.6 sp2. I have a problem with KPI tile 2.0. I downloaded the SDK Package Ver 3.0 and tried using the KPI tile. I dont see the data binding Property for KPI tile. Is i a bug or am I missing something?
Is there a component available in DesignStudio that behaves like a Slicer COmponent in MS Excel? The purpose is to filter the data in other components:
List with available Items:
Selected Items (filter in example is Japan) the unselected items remain visible; no checkboxes, no dropdownlist...:
Any idea if this exists as an extension?
I can't say that I remember us having one like this, but it should be easy enough to make it.
Thank you for your fast respons Mike. Unfortunately, I have not really an idea how to do this. How should I proceed? Is that smthg you could do. Not for me of course, but for the community 😉 ?
Just in case someone has his same question, here is how to replace the XLS slicer component.
Could you tell me how to filter on selected values of the enhanced checkbox group component ?
Following script DS_1.setFilter(“XXX”, CHECKBOXGROUP_1.getElementSelectedKeysArray()) is not correct.
Trying to develop custom charts component for Design Studio for my company. Everything is OK, except sizing the component. Everytime I start to build my component as raw html, and then move it to the Design Studio. But I have sizing issue that is in my html design; I can create my chart using d3, jquery and third-party libraries by using bootstrap responsive design, it works well as html page. But when I move it to the design studio, and use it with the grid layout, cells break down my whole responsiveness. Don't know how to fix it, I'm trying to fix this problem for three days and don't know how. If you want to help me, I can share my code with you.
Component resizing with D3 is tricky. You'd need to attach a window.setInterval poller to inspect a given DIV that houses your D3 SVG/Canvas object and see if the width/height has changed and then destroy/redraw it on change. This is because SVG objects do not accept %-based width and heights. Hope this makes sense.
First, thanks for the answer.
I am using the way that u described. Get the container div's height and width, and draw viewbox of component with these sizes. It works but I consider if there is better way, beacuse when I look custom components's code that was developed by SAP, there is no trick like this but they works responsively.
The ColumnMicroChart UI5 component within KPITILE might have an issue. I created a KPITILE and set the full spec to the following:
<ColumnMicroChart size="M" press="press" class="sapUiSmallMargin">
<ColumnMicroChartData value="100" color="Error"/>
<ColumnMicroChartData value="60" color="Neutral"/>
The component type is set to ColumnMicroChart.
I get the following error when executing the dashboard:
Is it the component or just me?
I installed the latest offline stable version for design studio 1.6.
Everything working great when I'm working locally , but when I'm running the dashboard on BI platform I'm getting an error message that the new item cannot be created.
Am I missing something ?
You have to install the components on BI Platform in order to use it on server.
On my Design Studio 1.6 SP03 patch 1 Tool (32 bits) I have installed org.scn.community.basics_184.108.40.206701091251.jar
New components are shown but When I try to use them an error arises:
!ENTRY com.sap.ip.bi.zen 4 0 2017-06-08 15:09:00.019
!MESSAGE Failed to load MIME object 'sdk_include/org.scn.community.shared/modules/component.core.js'
What I did wrong?.
Thanks in advance,
Hi, you need always to install all plugins as some are created for code reuse. just install also the "org.scn.community.shared" plugin and this issue will be gone.
Thanks for SDK components they are great but I'm facing issue with 4 components KPI Tile 2.0, KPI Tile 2.0 View,Date Scroller and Date Slider.
I have installed package: org.scn.community.sdk.package_stable
Design Studio 1.6 SP00
Eg: While I'm dragging component to canvas
Error: A problem occurred while parsing a Design Studio Extension XML (path "contribution.xml" of extension "com.sample.utilities", line 340, column 77): The include <jsInclude>res/js/noty/packaged/jquery.noty.packaged.min.js</jsInclude> is most likely not allowed, as it could conflict with a builtin JS file.
Error: Could not bind a reference of component com.sap.ip.bi.base.application.DeclaredServiceActivator. The reference is: Reference[name = IActivatorBase, interface = com.sap.ip.bi.base.bundle.IActivatorBase, policy = dynamic, cardinality = 0..n, target = null, bind = addRICActivator, unbind = removeRICActivator]
Thank you for your efforts to keep the post updated.
I downloaded the code for version 3.0 from the link from the post https://github.com/org-scn-design-studio-community/sdkpackage . While unzipping, I get the below error. If I press enter, similar error pops up for another file. If I keep pressing enter till the end and add the projects in eclipse, some of the .js files (eg. PropertyPage.js) are missing from the projects (last pic below). Due to this the components are not rendering.
Have you seen these errors before? Could you help to resolve this?
Mike Howles Hi there, I wanted to check with you whether these SDK Components are still being maintained? Reason why I am asking is because we are having some technical issues with the KPI Tiles.
We are using Design Studio 1.6 SP3, when I add KPI Tiles to my canvas and execute the application, everything shows apart from the KPI Tiles. They don't seem to show, regardless of what we do. Visibility is set to "True" as well.
It is kinda sad that KPI Tiles are not default components included within SAP Design Studio.
We are using "Open Url inplace" for our Design Studio Application. Our BO Platform is on AIX. But we got error 2 errors below when we execute the application on platform.
Do you know that if this SDK is only available for Windows? Could you help us with this issue?
Thank you in advance.