一个季节性的十二月欢迎HTML的粉丝们，SAP BusinessObjects Design Studio and extensions.

这篇文章是关于SAP BusinessObjects Design Studio的一个HTML扩展，我将要开放源代码。

在做这个扩展之前，我确实尝试了优秀的SCN Design Studio社区扩展，用于HTML快速原型制作。

我喜欢它，但我还想要一些特点：

但是为什么我首先需要使用HTML？

早在2015年年中，大数据概念，我就需要使用SAP BusinessObjects Design Studio创建一个类似Fiori的演示，这将是ASUG SAP Analytics&BusinessObjects Conference（SABOC）的主题演讲的一部分。

我与用户体验团队进行了交谈，我们提出了一个概览页面的设计，该页面将使用SAP Fiori比较图块，淘客，因此看起来类似于这样：

我可以在DesignStudio中使用开箱即用的控件创建基本的平铺边框、标题和合计，但是比较栏呢？这正是HTML派上用场的地方。

有了HTML表格和一些CSS，我可以为男女文本、值创建基本布局，并留出空间稍后绘制条形图（注意，外部灰色边框和白色背景是Design Studio绘制的部分，因此它们不包括在HTML表格中）：

这是HTML使用内联CSS：

我从Tim Stanley的一篇关于HTML水平和垂直条形图的文章中得到了HTML条形图的最初想法。

但是不是只有一个条形图，我还需要用浅灰色填充背景。

我发现使用终极CSS渐变生成器，我可以一次性为条的蓝色部分和灰色部分创建线性渐变。

下面是女性条的线性渐变示例，这是在：84.81%。

CSS线性梯度：

所以当你把酒吧线性梯度到HTML表，大数据，你结束了：

这里是最终的HTML：

这里是一个屏幕截图的HTML（在附加属性表）的HTML扩展内设计工作室：

在我的下一个博客，我们将创建一个类似Fiori与Design Studio和两个扩展的对比，2018世界人工智能大会，使用我们从这个博客学到的东西

以及大量的HTML标签，这个扩展也适用于许多SVG标签。

您可以在Design Studio内的HTML扩展的附加属性页的about标签中阅读更多关于哪些标签和标签属性受支持的信息。

这里是一个带有HTML扩展的SVG tiger的例子：

嗨，Matt，

这看起来真的很好！你知道这个插件什么时候是开源的吗？

干杯，

Xavier

嗨Xavier，轻淘客，

因为这是我们将推出的第一款SAP设计工作室开源产品（类似于我们使用Lumira开源产品所做的），这将需要更长的时间，所以我还没有ETA。。。但一旦它准备好了，我会更新这个页面！

嗨，马特，

你认为你什么时候可以分机？