Skip to Content

Update:

 

Since there was enough interest, here’s the source code available on GitHub.

EDIT: Updated link:

https://github.com/org-scn-design-studio-community/sdkpackage/tree/master/src/org.scn.community.prototypes/res/RapidPrototype 

 

Original Post:

 

I have been having fun writing a few toy addons for Design Studio, but I wanted to see if I could write something a bit more useful.  I am still learning the ins and outs of the Eclipse SDK, but one part of my workflow that I’ve noticed could be improved is the amount of time I spend in the Eclipse SDK to tweak a line of HTML or JS, and then hop back to re-launch Design Studio to see the results (or in my case a lot of times, unintended, self-inflicted bugs 🙂 )

 

As a result, I thought that if I created an HTML and JavaScript templating Addon, I could work native within Design Studio to create one-off visualization proof-of-concepts, as well as some rudimentary data binding as well.  The result is an HTML Template component:

 

/wp-content/uploads/2013/12/htmladdon_345647.png

 

In the screenshot above, you see a few components in the canvas and Outline panel.  (The orange icons under Layout).  The background image, and the two KPI tiles are all the same addon.  I also have a few addons called ‘MYCSS’ and ‘GRADIENTJUNK’ that allow me to insert and modify CSS on the fly, but back to the visual components…  Also make note of the HTML and After Init(JS) in the Additional Properties panel which allows you to put in any HTML you wish, as well as a post-initialization block of JavaScript code for further processing.

 

Let’s say that you have a very specific, one-off visualization, or a case where you just don’t know yet if you’d want your component to be reusable until later.  This would offer a great way to insert arbitrary HTML, JavaScript, CSS, and even Base-64 encoded images (so that you don’t have to worry about where to upload the image).  All of these cases including anything else you can accomplish in HTML5 are possible.

 

In order to make these components not just hardcoded, statics fragments, I also created 10 placeholder parameters (See the properties panel). For each Placeholder, there is a corresponding Replacement.  These placeholders and replacements can be maintained directly within the property panel, or even in the Script window:

 

/wp-content/uploads/2013/12/htmladdon2_345648.png

 

In this example, I am setting some text as well as even some image sources at runtime.  (silverMedal and bronzeMedal are global variable strings of type base-64).

 

A simple example of what this would look like at runtime by clicking this button is such:

 

/wp-content/uploads/2013/12/htmladdon3_345649.png

 

This addon could also facilitate things like IFRAMEs, freeform HTML content, etc.  All this without hopping back and forth between Design Studio SDK and Design Studio itself.

 

If there is some interest, I can supply the source files to this addon, however it appears that I will have to find somewhere on SCN that accepts a .ZIP file.  Perhaps creating an SCN Document will allow for this.

 

At the end of the day, this frees me up to focus on the end-form of a potential addon, as well as rapidly create anything I can create in HTML5/CSS/JS within Design Studio before implementing a full blown SDK Addon.

To report this post you need to login first.

35 Comments

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

    1. Mike Howles Post author

      Tammy,

      I’m not sure that I follow.  I’m using the Design Studio SDK to create some visualization components, however the addon component mentioned here is a developer’s type of rapid-prototyping component for me to get my HTML and JS/jQuery figured out without bouncing back and forth between the SDK and DS.  I can change the HTML and JS on the fly with this addon and the changes are reflected instantly within DS.

      Maybe I am not following?

      (0) 
  1. Christoph Wassermann

    Hi Michael,

    i would definitely be interested in the source code. I built an addon to inject Javascript similar to what you do.

    I have to say I’m cautiously excited that the Design Studio SDK is basically giving you the whole toolset of HTML5, CSS and JS to work with – at least on the frontend side. When it comes to script contributions and server-side JS, I’ve been having some problems, so your code would be a great help.

    Cheers

    Christoph

    (0) 
    1. Mike Howles Post author

      Thanks for the feedback, Cristoph.

      I’d be glad to compare notes and/or exchange some code.  I’ll probably update this blog today with a Github link so people can pull it down and do whatever with it.  I wish there was a spot on SCN to post an Eclipse project however it looks like SCN’s Code Exchange was shut down.

      Would you be able to share your code as well?  I like seeing how others do this stuff, even if they are similar!

      (0) 
      1. Christoph Wassermann

        Yes, I could share my code as well. I’m sure it’s a lot less sophisticated compared to yours (just JS, no CSS or HTML for starters), but it is very minimal so I guess it’s easily understandable and could serve as a tutorial of sorts.

        If the Github approach works for you I will put my stuff there as well. I hear that place is where the hip kids post their code nowadays 😉

        (0) 
            1. Mike Howles Post author

              Thanks for sharing your code.  Looks like we were both looking to do some similar stuff for sure 🙂

              Also, I like how you determine design-time or not ( if(sap && sap.zen && sap.zen.designmode) … ), as I was sometimes wanting to ‘pause’ my JS changes during design time.

              Let’s keep in touch as we create new toys 😀

              (0) 
  2. Anders Vastfalt

    Hi Michael,

    This is very good stuff!

    Can you please share this in a zip-file and possible some other files from your posts below. If you got any other great stuff that you think could be of interest for a DS developer it would be highly appreciated. Please send to this email: festis_jr@hotmail.com

    Thank you very much,

    Anders

    DS 1.2 SDK Example – Embedding Xcelsius SWFs (not for Mobile, of course)

    Baby Steps – Creating an HTML5 Chart Wrapper with Design Studio 1.2 SDK

    (0) 
    1. Mike Howles Post author

      Thanks for your reply, Anders.

      I think I’m going to put up a Github link so I can share with whoever wants the source code.  I’ll E-Mail you a .zip of this blog’s SDK project so you can take a look.

      I’d caution that the prior two blogs you mentioned were my first two baby steps with the DS SDK and were rather simple and proof-of-concept rather than having a lot of real-world value, but I’ll send you the code nonetheless.

      (0) 
  3. Roy Wells

    This is really great stuff Michael!  Thanks for sharing.  I’m already finding a ton of value with this. 

    In the screen shot of your example it looks like you are using one of your replacement values with an array.  I’m wondering how are you setting the array value into the replacement slot. 

    I’m referring to your java script snippet.

    var d= ~drilldown~

    (0) 
    1. Mike Howles Post author

      Thanks for the feedback, Roy.

      For the array, I made one placeholder, let’s say placeholder 1, have the value of ~drilldown~, and then for the replacement value itself, it was just [1,2,5,2] for example.

      FYI, the sample DS App shown in the screenshot is in the Github repo link, and if you pull it into your DS workspace, you should be able to open it up and see everything.

      Hope this helps!

      (0) 
  4. David Gyurasz

    Hi Mike,

    I just started looking into the SDK functionalities of Design Studio. I would like to try your HTML/JS Addon in my Design Studio. How can I install/deploy/add it to my Design Studio?

    On github on the right I clicked on Download ZIP.

    In Design Studio: Tools > Install Extension to Design Studio… > Archive… > I choose the .zip file > confirm OK

    but I get the following error message:

    Failed to discover all connectors.

    RepositoryDiscoveryStrategy failed with an error

    Failed to process repository contents

    No repository found at jar:file:/C:/Users/myuser/Analysis-workspace/com.sap.ip.bi.zen/SDK_EXTENSIONS/com.ipaper.sample.htmltemplate-master2.zip!/.

    Any ideas what might be wrong, what am I doing wrong, did I miss something? Do I need Eclipse first and do something there before I can install your addon or do I need to modify the downloaded zip file first somehow?

    Thanks a lot!

    Regards

    David

    (0) 
    1. Christoph Wassermann

      (Michael, I hope you don’t mind me replying to this.)

      David,

      the zip file you get from github is just the zipped source, it’s NOT a packaged addon feature for Design Studio. You’ll have to take the long way around and build it for yourself I’m afraid.

      Please follow this document to see what software you need (it’s all free) and how to get started building the addon and ultimately creating a deployable feature:

      http://help.sap.com/businessobject/product_guides/AAD12/en/ds12_dev_guide_en.pdf

      If you’re having trouble doing so, I’d suggest the forums for further help & discussion.

      (0) 
  5. Shlomi Weiss

    Hi Michael

    Great stuff

    I’ve managed to implement the add-on and I’m trying to understand how to use it

    It would be very helpful if you could send me as a message or post the code for your sample apps

    or even download the app to local and send

    Thanks

    Shlomi Weiss

    (0) 
  6. Alex Cruickshank

    Hi Mike

    I am trying to create a Component for Design Studio via the SDK and believe this will help me a lot! Thanks for your work 🙂

    I have downloaded from github and put into Eclipse, when I select run as and open Design studio everything is ok until I select the component, I then get this error back in the console in Eclipse

    !MESSAGE Error message: NetworkError Line Number: 279 Pos: 3 Function: function(includeURL){  if (this.registerInclude(includeURL)

    Any ideas?!

    (0) 
    1. Mike Howles Post author

      Alex,

      This could be a lot of things if you are trying to move this into your own SDK project.  I’m no Eclipse expert but all I can say is it works for me 🙂   (I know that’s not helpful, but maybe encouraging)

      What version of DS are you on?  I’ve used mine in 1.2 and 1.3 so I’m not sure why I’m even asking, though.

      (0) 
      1. Alex Cruickshank

        Haha yes not very helpful! 😛

        Im using DS 1.3. I tried looking for that javascript in the js files but couldn’t see it, Ill take another look tomorrow think im going to have to draw for Xcelsius as creating a custom component seems to be taking up a lot of my time!

        (0) 
  7. Patrick Godwin

    Hi Michael,

    I know this thread is a bit old, but I was wondering if you have used the rapid prototype component on mobile?

    I’ve give it a shot, and the HTML part of it seems to work, but javascript doesn’t (either in JS property or embedded in the HTML as <script> elements).

    Any tips?

    Cheers, Pat

    (0) 
  8. Guilherme Schuwarten Carvalho Girelli

    Hi Mike,

    I’d like to know if there’s a way to turn one object sensitive to another using the Rapid Prototyping addon.

    For example: I have a set of buttons that work as tabs to my visualizations. How do I make these buttons interact wth standard objects. Like enabling and disabling object visibility dinamically.

    Thanks for the attention!

    Guilherme Girelli

    (0) 
  9. Caio Henrique Ciriaco de Medeiros

    Hey Mike, thanks for this post it was very enlightening.

    As I’m new using DS and its SDK i’d like to know what would you recommend to address my problem. I need to make a drill between layers that would look alike drilling in a map, from region to state and county. But the layers have different attributes (they are different images).

    My first thought was to use SVG files (within the manipulation you showed in this topic) and the JS to “change” the SVGs files… But I dont know how to start building it…

    Would you suggest doing anything different or even lead me to some start point?

    Also, is it possible to use the content in this topic on DS 1.6? If so, could you (or someone who has it) fix the download link atop of the page?

    Thanks in advance.

    Caio Henrique

    (0) 
  10. Cañas José

    Hi Mike,

    Have you try to use HTML video tag ? <video> ? I want to put a video inside my application

    I don´t know if posible with this component, had you tried to put a video inside with another method?

    Best Regards JC

    (0) 
  11. Didem Culha

    Hi Mike

    is it possible to get (and set) the value of a global script variable (of the application) from the Javascript editor? (or may be use some global script function?) How would the syntax be like?

    Thank you very much

    Best regards

    Didem

    (0) 
    1. Mike Howles Post author

      Hm, interesting question….  In its current form, there may be a JS sapbiCommandSequence one could hack together to provoke a BIAL global variable change or trigger a function to do it for you…

      What may make better sense would be if I were to create a new BIAL event within this component that you could fire with JS so that it’s less of a hack.

      Do you have a use case in mind calling for this?  You have me curious.

      (0) 
      1. Didem Culha

        Hi,

        One of my use case scenarios is as follows;

        I want to define a global script variable which has the value coming from the javascript from rapid prototyping;

        var hname = window.location.host;

        (e.g. http:\\bo_development_host:6400 or http:\\bo_productive_host:6400)

        Then I want to use this hname in onClick events of several components, so that the link will change depending on the environment (development system or production system etc), like APPLICATION,openNewWindow(hname+”SOME_CUID”);

        I hope I made myself clear, there are other scenarios in my mind, but the logic is more or less similar.

        Best regards

        Didem

        (0) 
          1. Didem Culha

            Sure- for this case it makes even more sense. Yet rapid prototyping would be a more flexible option for the interaction between DOM elements and other design studio components.

            Thanks a lot

            Didem

            (0) 

Leave a Reply