In this article I would like to show the benefits of using EvoHTML by Evosight. EvoHTML is a custom widget that allows users to create custom style formatting with CSS and HTML in SAC stories and applications.
We’ll compare capabilities of the built-in CSS Editor in SAP Analytics Cloud (SAC) vs EvoHTML. Let’s explore how these two tools can handle the tasks.
Example 1
The user wants to assign one color for the row and column headers, a different color for the data, and visually separate each cell with rounded sections.
Solution using CSS Editor in SAC
In the SAC CSS Editor, we can only make changes of table cells for entire blocks, not for individual cells.
The styling of this table does not meet all the requirements.
We can see one cell that lacks border styling because the SAC CSS Editor does not recognize it as an object.
Altering the shape of cells is also not possible with this tool.
Consequently, our options are limited.
The list of supported classes is relatively short.
For example, for “sap-custom-table-data-cell” class supports the following properties: background-color, border, line-height, font-family, font-size, color, font-style, font-weight, text-decoration. But unfortunately, there is not property “border-radius”, which we need for the rounded boarders.
So, the CSS Editor’s limitations are a significant barrier to solve the task.
Solution using EvoHTML
EvoHTML helps to achieve a visually appealing table with distinct colors for row and column headers, different colors for the data cells, and rounded sections to separate each cell using CSS.
Design looks nice and meets all the requirements. One color is used for the row and column headers, another color is used for the data.
We are even able to specify the shape of the cells, since our task required rounded corners.
EvoHTML incorporates more flexible styling options to compare with SAC CSS Editor.
Example 2
The user wants to apply dynamic coloring to the table data cells, with even rows in one color and odd rows in a different color, while keeping the header rows in a uniform color.
It is impossible to solve this task using SAC CSS Editor, as we’ve seen, we can only work with group of elements, and it is not flexible at all.
Let’s see how the solution will look like using EvoHTML.
It’s possible to create striped rows in the table since each cell can be individually modified.
Example 3
Users want the ability to switch to a larger, high-contrast view for better visibility for the visually impaired with the click of a button.
After pressing the “High contrast” button, we will see a black-and-white mode with larger text size.
We are generating CSS code by concatenating our SAC script logic.
As you may have noticed, we’ve used “!important”. This was done to prevent the inheritance from being overridden.
In conclusion, the EvoHTML by Evosight offers more flexible styling options compared to the SAC CSS Editor, allowing for greater customization and adaptability in design. This flexibility enables users to achieve their desired presentation and functionality more effectively.
