Design Studio 1.6 SDK - Templating with Rapid Prototyping Component

[mike_howles4]

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 franckblaisbeyond'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)

Questions/Comments/Feedback always welcomed!