Deliver Better BI With Dynamic AI Styling

When it comes to business intelligence, formatting is about more than just aesthetics. Color, font, size, positioning, rules, and other visual devices can all convey additional information beyond what is already represented in the underlying text, date and numeric values output in a report or dashboard. Consider this dashboard example, where the color itself indicates performance, in some cases from “cold to hot” and in others a sort of “stop-caution-go”.

Business intelligence tends to be very high-level, and when presented in an interactive manner, it is usually hierarchical, allowing quick drill-down, drill-up, slicing and dicing of the information. Judicious formatting can actually extend the information being conveyed and make it more readily accessible.

Controlling formatting and achieving just the right results can be incredibly tedious with traditional reporting tools. Dynamic AI simplifies this task through various simple settings in report design and with the use of cascading style sheets (CSS) that you can customize and save as new versions.

For example the calendar object in the example dashboard required a simple option selection to transform a report that totaled order values and counts by date into a calendar presentation. (Watch a video on calendar presentations in Dynamic AI.) The red, yellow, green coloring on the “Achieved %” of sales goal in the last report in the dashboard was implemented merely by entering two value thresholds in report design.

Overall layout and color scheme is automatically determined by the default style sheet. Without lifting a finger - not a single mouse or key click - your report designs will be automatically formatted and look great! This alone is an enormous productivity boost when using Dynamic AI to generate reports and dashboards.

Dynamic AI ships with a library of 17 list or grid style sheets, and 14 form style sheets. These can all be modified and saved as new custom styles. Every report, and detail form layout, is automatically assigned the default style sheet inherited by the one assigned to whichever database connection the report is using, but this can be overridden on each and every report, form and dashboard with a few mouse clicks.

Advanced Formatting via standard and custom CSS

Beyond the automatic formatting provided by CSS, Dynamic AI also provides additional settings to dynamically effect how the CSS gets applied.

See Figure 1 below - noteworthy is the ability to replace a constant value with a dynamic one obtained from the user profile at the time the report is run. For example a color name in the CSS could be replaced with @ALIAS6 and the value from user profile @Alias6 would specify the actual color. In figure 1 you can see that the logo image file name is coming from user profile @Alias9.

Figure 1. Custom style sheet example

Figure 2 shows an example of a user profile using @Alias# values. (Note: There are 10 such alias values available in each user profile for a wide range of uses: connection strings, database names, enforced filters, etc.)

Figure 2. User Profile example

Figure 3 shows the same report styled using 3 different style sheets. The first two examples use standard library sheets. The last two show the results of using the same style sheet, but running under two different user credentials.

Figure 3. Showing same report with 3 different styles, running as 3 different users.

You don’t have to be an expert in CSS to make other simple changes, you just need to learn a few HTML tricks which you can easily do by searching the internet. For example you can suppress display of any object or class by adding a line to the end of your custom style sheet. The following line will suppress the box at the top of reports that contains all of the filter selectors and buttons, as shown in Figure 4.

#slctorframe { display: none;}

Figure 4. Showing the selector frame object in a displayed report.

Dynamic AI documents the CSS class names it uses for the various elements in its output, such as group headers, group totals, etc. You can also easily learn the names of these and more detail objects by using your browser’s development tools. Figure 5 illustrates how you could find the object names in a scenario where you wanted to suppress the output of just the first filter being applied to a report, using IE11’s developer tools while running the report.

Figure 5. Finding the name of an object in the displayed report.

With this information and a little bit of research on CSS/HTML workings that isn’t too hard to find on the internet, we learn that appending these two lines to the style sheet used by the report will hide the “connection/paradigm” filter in effect, but still keep the second “Sold” filter selection being displayed. Figure 6 shows the result.

.TABFILTHEAD:first-child {display:none;}
.TABFILTVALS:first-child {display:none;}

Figure 6. Results of suppressing display of 1st filter object heading and value with modified CSS.

Formatting via Rule Script in Report Design

Beyond the use of style sheets, Dynamic AI provides for secure, server side injection of scripting into the HTML that will be generated and sent to your browser as part of report design. There are a variety of very simple keywords that Dynamic AI defines that you can use to control elements such as the title on the chart, or to embed applied filter values into the report title. Beyond that, if you can learn, or already know some JavaScript then a whole new world is open to you. Here are a few simple examples.

This example in Figure 7 shows introducing color based on values in the two columns shown.

Figure 7. Script to control color based on values and in specific columns.

It should be noted that Dynamic AI provides for conditional color formatting on multiple total columns in report design without the use of scripting. The limitation is that only two value thresholds can be specified and the 3 resulting colors are hard-coded in the style sheet. With a script you can define as many value/color ranges as you wish.

Another simple example would be to hide the “AI” button in a specific report. The availability of this function is defined in the user profile, but if you wanted to turn it off on a given report regardless of the user profile setting, then you could put this simple line of code in the script. In the above example, it would be the very first line in the script.

document.getElementById("DAIAI").style.display = "none";

Conclusion

The formatting possibilities are virtually unlimited. Quite a lot is possible without any programming at all. Considerable more is possible with a very limited and rudimentary knowledge of CSS, HTML and JavaScript. For an expert JavaScript programmer, the sky is the limit!