A seasonal December welcome to fans of HTML, SAP BusinessObjects Design Studio and extensions.

This post is about an HTML extension for SAP BusinessObjects Design Studio that I am about to open source.

Before making this extension I did try out the the excellent SCN Design Studio Community extension for rapid prototyping with HTML.

I liked it but I wanted a few more features:

1. To be able to use HTML or SVG at design time or runtime without having to worry about script injection (which is why I call this safe HTML). It does this by using a whitelist to only allow safe HTML tags and safe HTML attributes.
2. Optionally use scroll bars and allow scrolling not just on desktop but also when iOS using SAP BusinessObjects Mobile.

Background

But why did I need to use HTML in the first place?

Back in mid-2015 I needed to create a Fiori-like demo using SAP BusinessObjects Design Studio that would be part of a keynote at the ASUG SAP Analytics & BusinessObjects Conference (SABOC).

I talked with the UX team and we came up with a design for an overview page that would use the SAP Fiori comparison chart tiles so would look something like this:

I could create the basic tile border, title and total with out of the box controls in Design Studio, but what about the comparison bars? That’s where HTML comes in handy.

HTML table

With a HTML table and some CSS I could create the basic layout for the Male and Female text, the values and leave room to draw the bars later on (note the outer gray border and white background are parts that would be drawn by Design Studio so they are not included in the HTML table):

Here is the HTML with inline CSS:

<table width="100%" style="bottom: 14px; border-collapse: collapse; position: absolute; line-height: normal;
                    font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal;" border="0">
    <tbody>
        <tr style="border-top-color: transparent; border-top-style: solid;">
            <td style="color: rgb(51, 51, 51);">Male</td>
            <td align="right" style="color: rgb(51, 51, 51);">5,845</td>
        </tr>
        <tr>
            <td height="12" colspan="2" /> </tr>
        <tr style="border-top-color: transparent; border-top-style: solid;">
            <td style="color: rgb(51, 51, 51);">Female</td>
            <td align="right" style="color: rgb(51, 51, 51);">4,957</td>
        </tr>
        <tr>
            <td height="12" colspan="2" /> </tr>
    </tbody>
</table>

HTML table with linear gradient bar chart

I got the initial idea for HTML bars from a post by Tim Stanley about HTML Horizontal and Vertical Bar Charts.

But instead of just one bar, I needed to fill the background with light gray as well.

I found that with The Ultimate CSS Gradient Generator I could create a linear gradient for both the blue part of the bar and the gray part in one go.

Here is an example of the linear gradient for the Female bar, which is at: 84.81%.

CSS linear gradient:

background: linear-gradient(to right, rgb(88, 181, 230) 0%, rgb(88, 181, 230) 84.81%,
          rgb(211, 217, 221) 84.81%, rgb(211, 217, 221) 84.81%, rgb(211, 217, 221) 100%);

Putting it all together

So when you put the bar linear gradients into the HTML table you end up with this:

Here is the final HTML:

<table width="100%" style="bottom: 14px; border-collapse: collapse; position: absolute; line-height: normal;
                    font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal;" border="0">
    <tbody>
        <tr style="border-top-color: transparent; border-top-style: solid;">
            <td style="color: rgb(51, 51, 51);">Male</td>
            <td align="right" style="color: rgb(51, 51, 51);">5,845</td>
        </tr>
        <tr>
            <td height="12" style="background: linear-gradient(to right, rgb(88, 181, 230) 0%,
                    rgb(88, 181, 230) 100%, rgb(211, 217, 221) 100%,
                    rgb(211, 217, 221) 100%, rgb(211, 217, 221) 100%);" colspan="2" /> </tr>
        <tr style="border-top-color: transparent; border-top-style: solid;">
            <td style="color: rgb(51, 51, 51);">Female</td>
            <td align="right" style="color: rgb(51, 51, 51);">4,957</td>
        </tr>
        <tr>
            <td height="12" style="background: linear-gradient(to right, rgb(88, 181, 230) 0%,
                    rgb(88, 181, 230) 84.81%, rgb(211, 217, 221) 84.81%,
                    rgb(211, 217, 221) 84.81%, rgb(211, 217, 221) 100%);" colspan="2" /> </tr>
    </tbody>
</table>

The HTML in Design Studio

Here is a screen shot of the HTML (in the Additional Properties sheet) of the HTML extension inside Design Studio:

In my next blog we will be creating a Fiori-like comparison tile with Design Studio and two extensions using what we have learned from this blog.

That’s good, but what else can the HTML extension do?

As well as a lot of HTML tags, the extension also works with a lot of the SVG tags.

You can read more about which tags and tag attributes are supported in the About tab of the Additional Properties sheet in the HTML extension inside Design Studio.

Here is an example of the SVG tiger with the HTML extension:

Resources

• Link to the HTML extension on github – coming soon…