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:
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:
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):
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)
Next, we change our HTML component(s) to reference this file by uploading it:
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:
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:
After saving the file, refreshing the dashboard now shows this:
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)
Absolutely required feature : Re-usability. Thanks for your effort and sharing the content with the community.
Hey Mike,
Nice addition ! I really like this component 🙂
And consistent with the Design Studio Roadmap planned feature of "Componentization and reusable custom components" 🙂
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.
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
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
It's more of an informal disclaimer for reckless designers to not go overboard with lots of unsupported JavaScript. Â Use it how you like!
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
Dont work Anymore
Yes, it does. Â I am still actively using it in 1.6 today.
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
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.