Skip to Content
Author's profile photo Michael Howles

Design Studio 1.2 SDK – Rapid Prototyping Addon HTML/JS Templating

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.

Assigned Tags

      35 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tammy Powlas
      Tammy Powlas

      Do you have specific ideas on how you might use the SDK?

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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?

      Author's profile photo Tammy Powlas
      Tammy Powlas

      Now I follow you - thank you for that clarification.

      Author's profile photo Christoph Wassermann
      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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!

      Author's profile photo Christoph Wassermann
      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 😉

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

      Here you go, I dropped a snapshot here:

      entmike/com.ipaper.sample.htmltemplate · GitHub

      Author's profile photo Christoph Wassermann
      Christoph Wassermann

      Here's the link to my stuff:

      aquachris/ds-jsinject · GitHub

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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 😀

      Author's profile photo Anders Vastfalt
      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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.

      Author's profile photo Former Member
      Former Member

      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~

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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!

      Author's profile photo Former Member
      Former Member

      Thanks again.  That example was very helpful.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Christoph Wassermann
      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.

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

      Thanks for pointing him in the right direction. It's all covered the the product guides as you mention.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Alex Cruickshank
      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?!

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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.

      Author's profile photo Alex Cruickshank
      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!

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Hey Mike, thanks for this post

      I'm using the component in my dasboard but I have a problem, you could hel me?


      http://scn.sap.com/message/16524719#16524719

      Thanks

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi,

      I don't see this component in the current list of Design Studio SDK components (release 3.0). Has been it deprecated?

      Alfons

      Author's profile photo Former Member
      Former Member

      HI Alfons,

      I use this link Component List 2.0 - SCN Design Studio Community this components is a version  1.5, I use in 1.6 I don't have problem.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Didem Culha
      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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.

      Author's profile photo Former Member
      Former Member

      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

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

      Yes - the use case is clear.  Understood.  I don't have an immediate answer for you, however maybe we can enhance this component, or add it to Design Studio SDK: Client Information Component at least for this use case it may make sense there?

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Hi,

      is the sourcecode still available somewhere?

      kind regards,

      Thomas

       

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

      Updated the link.

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