Adding JavaScript and CSS to Slate Reports

Did you know that you can add your own scripts and styles to a Slate report via the Static Content block? Be careful, though, as you can easily break a report! You must enclose any JavaScript with

<script>/*<![CDATA[*/

/*]]>*/</script>

to prevent XML-encoded characters from breaking the script and potentially locking you out of the report completely with a 500 error.

Example 1: Adjusting column headers and row labels with CSS

By default, the Report Builder hides any overflow in labels with elipses and will not break to a second line. The width of row labels is also quite small.

To improve this, add a Static Content Block with a little styling (make sure this goes in the source code of the block):

<style type="text/css">
    table.table>*>tr>th>div:first-child,
    table.table>*>tr>td>div:first-child {
    white-space: normal;
}

table.table>colgroup>col:first-child {
    width: 100px;
}
</style>

Now our overflow is displayed, and the row labels are much wider:

See my original post about this on the Slate Community.

Example 2: Adding a date picker to a report with JavaScript

Suppose you had a report with a parameter like weekof that drives date comparison filters. This would be really cool, except users would have to manually put that URL paramter in each time they wanted to change the report's dates.

With a little JavaScript, you can provide the user with a convenient datepicker. Because JQuery and JQuery UI are already used in Slate pages, much of the work is done for us. Here's what I put into the source code of a static content block:

<script>/*<![CDATA[*/

    //Wait for DOM to load before doing anything
    $(function () {

        function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1);
            var sURLVariables = sPageURL.split('&');
            for (var i = 0; i < sURLVariables.length; i++) {
                var sParameterName = sURLVariables[i].split('=');
                if (sParameterName[0] == sParam) {
                    return sParameterName[1];
                }
            }
        };

        //Attach a datepicker to the text box with ISO 8601 date format.
        $(function () {
            $("#datepicker").datepicker({
                dateFormat: "yy-mm-dd"
            });
        });

        //If the datepicker text box changes, reload the page with the new date
        $('#datepicker').change(function (appendUrlParam) {
            var currUrl = "https://" + location.host + "/manage/report/render?id=" + getUrlParameter('id');
            window.location.href = (currUrl + "&weekof=" + $('#datepicker').val());
            //console.log(currUrl + "&weekof=" + $('#datepicker').val());
        });

        //Populate the datepicker and make the instructions div visible
        if (!getUrlParameter('weekof')) {
            $('#instructions').show();
        } else {
            $('#datepicker').val(getUrlParameter('weekof'));
            $('#instructions').show();
        };
    });
/*]]>*/</script>

<div display="hidden" id="instructions" class="hidden" aria-hidden="true">
    Select a Monday to compare: <input type="text" id="datepicker">
</div>

The end result: a little datepicker at the top of the report!

Disclaimer: My JS skills are quite meager, and I'm sure the script above could be improved! If you have suggestions, please drop me a line and I'd be happy to learn.