Skip to Content
Author's profile photo Michael Howles

Design Studio 1.6 SDK – Templating with Rapid Prototyping Component

Topic

I’ve enhanced the seemingly popular Rapid Prototyping component in the SCN Design Studio 1.6 SDK Components (ver 3.0) with a new feature some people may like.  The enhancement idea came to me in part by reading Franck Blais‘s recent blog post that you can read here Generate CSS code dynamically in Design Studio with the Community Package.  It got me thinking about two things, property size of HTML content in a component and re-usability.

Property Size

While there are many use cases that the Rapid Prototyping component today is enough to write out reasonably sized snippets of HTML, there comes a point where if the HTML becomes large enough that Design Studio performance starts to suffer at design-time/run-time as a result.  (Around the 100KB size, to give you an idea…)

Re-usability

The other related thought I’ve had was around the ability to use a fragment of HTML as sort of an “include” (or “fragment” in Design Studio bookmark-speak) to be able to incorporate the same HTML across multiple dashboards without having to maintain it in more than one place.  As an example, wouldn’t it be nice to make Card-like/Tile-like component with all the HTML written once, and placeholders specified, and then not have to go back to 5 different copies of it to enhance it later?

The Enhancement

I’ve added the optional ability to specify a file to upload to your Design Studio application that can be read in lieu of the HTML property in the Additional Properties Sheet.  The benefit is to cut down HTML property size (to zero, really), and re-usability across other components (read on.)  I’ve also added a checkbox to indicate whether or not to use the file, or go with the original HTML property:

/wp-content/uploads/2016/07/rpa1_999403.png

How does this help?  As a refresher use case from what we can do today, imagine a case where we want to make our “Tile” HTML component something like this:

HTML:


<div class="tile" style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;background:#FFFFFF;">
<div style="position:absolute;top:15px;left:15px;font-size:1.5rem;">
  <strong>Sales</strong>
</div>
<div style="position:absolute;left:15px;bottom:15px;font-size:2rem;">
  <img style="width:2rem;" src="%RESOURCEROOT%/up-circular-xxl.png" />
</div>
<div style="position:absolute;bottom:15px;right:15px;font-size:2rem;">
  <strong>$1.3M</strong>
</div>
</div>

Illustrated:

/wp-content/uploads/2016/07/rpa2_999419.png

Usually next we replace any data-driven portions with placeholders (for instance the 1.3M we’d use the find/replace and bind to data or use a manual placeholder):

/wp-content/uploads/2016/07/rpa3_999420.png

/wp-content/uploads/2016/07/rpa4_999421.png

The chore becomes when you have several of these and you don’t want to modify future HTML tweaks more than once.

Using the file option, we can upload it once and reference it across multiple Rapid Prototyping components:

A plain .txt file with our snippet of HTML (with some placeholders)

/wp-content/uploads/2016/07/rpa5_999437.png

Next, we change our HTML component(s) to reference this file by uploading it:

/wp-content/uploads/2016/07/rpa6_999455.png

Note: after uploading it once from your file system, for all additional HTML components you can simply reference that file in your DS Application file repository folder.  It will ask if you want to overwrite/reuse it, but it’s the same file either way at that point.

So next let’s use a simple example where we have 2 Tiles using the same file, with an example of the placeholders filled out.  Imagine the placeholders in this case as being your own property sheet to play around with for your reusable snippet of HTML:

/wp-content/uploads/2016/07/rpa7_999456.png

So now let’s say we want to add an additional piece of HTML/styling to our tiles, we do it in one place, and appears in both tiles upon refresh.  Below underlined in green are two pieces I’ve changed in the file:

/wp-content/uploads/2016/07/rpa8_999457.png

After saving the file, refreshing the dashboard now shows this:

/wp-content/uploads/2016/07/rpa9_999459.png

In summary, while this is a simple example with two components, imagine if you had several components how it would be nice to maintain them all consistently with just one file that resides in your application/repository.

This version is nearly done and should be available for download in the usual spot (details here: SCN Design Studio 1.6 SDK Components (ver 3.0)) this week (week of July 18 2016)


Questions/Comments/Feedback always welcomed!

Assigned Tags

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

      Absolutely required feature : Re-usability. Thanks for your effort and sharing the content with the community.

      Author's profile photo Former Member
      Former Member

      Hey Mike,

      Nice addition ! I really like this component 🙂

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      And consistent with the Design Studio Roadmap planned feature of "Componentization and reusable custom components" 🙂

      Author's profile photo Former Member
      Former Member

      Dear Team,

      Can you please tell us how to use the github , zip file chart component in our design studio.

      We are trying to use custom chart developed , but I think those zipfile are uncompiled one , can you help us how to get the compiled version of the file  ?

      Just shed us some light.

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hello Gururajan,

      if you want to install the community package, follow the page

      Component List 3.0 - SCN Design Studio Community

      there, in right top corner you can see "Download" button. The ZIP downloaded there is an installable ZIP for Design Studio.

      Karol

      Author's profile photo Moritz Kelm
      Moritz Kelm

      Dear Mike,

      that is a really nice and well thought-out component!

      In Design Studio the "Rapid MockUp" extension is labeled as "not recommended for productive use". Could you state the flaws and reasoning behind this?

      Best regards,
      Moritz

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

      It's more of an informal disclaimer for reckless designers to not go overboard with lots of unsupported JavaScript.  Use it how you like!

      Author's profile photo Harish Konatham
      Harish Konatham

      Hi Mike,

      Thank a lot, absolutely a very useful document.

      I have a question, once I chose the metric in databound replacement, how do I format the numbers like with thousand separator, decimal restrictions and displaying numbers in millions only (i.e. instead of 142,436.00, I wanted to show 0.14M$) ? can you give us a sample code so that I can take it forward ?

      Thank you for your help again

      .

      Regards,
      Harish

      Author's profile photo Former Member
      Former Member

      Dont work Anymore

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

      Yes, it does.  I am still actively using it in 1.6 today.

      Author's profile photo Markus Maisch
      Markus Maisch

      I really love this component!
      It enables you to go far beyond the standard functinallity of BO.

      Just one question:

      You are referencing "src="%RESOURCEROOT%/up-circular-xxl.png""

      Where does the placeholder %RESOURCEROOT% point to?

      Is it the root folder where the application is placed in SAP Plattform?

      Or is there another way to point to this directory?

       

      Regards,

      Markus

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

      Hey Markus,

      %RESOURCEROOT% is a special placeholder that points to the root URL of your Design Studio application file.  It gets translated to the literal URL path when translated in JavaScript.