Javascript helpers

In Serenytics, you can create your own custom widgets. The most common ues case are:

• create a card to display a few KPIs with a very precise design/layout
• create a custom dynamic filter

You can write your HTML/JS in a KPI widget with a custom HTML template (see here for details) or in a fully custom widget (see here for details) or in a snippet and then re-use in several widgets (see here for details).

We have added several functions (named 'helpers') so you can quickly and easily interact with your app from your Javascript code (or from HTML onclick functions).

srnSetVariableValue(varName, value)

Use this function to set the value of a variable.

You can use it in Javascript code:

var y = new Date().getFullYear();
srnSetVariableValue("myVar", y);

Or you can use it in HTML code:

<div>
    <div class='filter_entry {{varCountry=="Europe"? "entry_selected":"entry_not_selected"}}'
        onclick='srnSetVariableValue("varCountry", "Europe")'>
        Europe
    </div>
    <div class='filter_entry {{varCountry=="USA"? "entry_selected":"entry_not_selected"}}'
        onclick='srnSetVariableValue("varCountry", "USA")'>
        United States Of America
    </div>
    <div class='filter_entry {{varCountry=="Asia"? "entry_selected":"entry_not_selected"}}'
        onclick='srnSetVariableValue("varCountry", "Asia")'>
        Asia
    </div>
</div>

srnToogleValueInList(varNameOfTheList, valueToToogle)

If the value is in the list, it is removed, else it is added to the list.

You can use it in javascript code:

srnToogleValueInList("varCountries", "Europe");

You can also use it directly in HTML code:

<div>
    <div class='filter_entry {{variableIncludes("varCountries","Europe")? "entry_selected":"entry_not_selected"}}'
            onclick='srnToogleValueInList("varCountries", "Europe")'>
        Europe
    </div>
    <div class='filter_entry {{variableIncludes("varCountries","USA") ? "entry_selected":"entry_not_selected"}}'
            onclick='srnToogleValueInList("varCountries", "USA")'>
        United States Of America
    </div>
    <div class='filter_entry {{variableIncludes("varCountries","Asia") ? "entry_selected":"entry_not_selected"}}'
            onclick='srnToogleValueInList("varCountries", "Asia")'>
        Asia
    </div>
</div>

srnLogout()

This function logs out the current user.

srnLogout()

<div onclick="srnLogout()">
    LOGOUT SERENYTICS
</div>

srnSetActiveTab(tabIndex)

This function sets the active tab in your dashboard. The first tab has index 0.

If you want custom tabs, you can create tabs in a custom app header, and hide the default tabs by disabling the Show tabs option in the Layout & Print menu.

Here is a custom html header you can use:

<div class="myTabContainer">
    <div class="{{activeTabClass(0)}}" onclick=srnSetActiveTab(0)>btn 1</div>
    <div class="{{activeTabClass(1)}}" onclick=srnSetActiveTab(1)>btn 2</div>
    <div class="{{activeTabClass(2)}}" onclick=srnSetActiveTab(2)>btn 3</div>
</div>

Note that the function activeTabClass(idx) returns srn-active-tab if the idx tab is the active one and it returns srn-inactive-tab if the idx tab is not the active one. This is usefull to customize your CSS for active and inactive tabs.

And its CSS to put in the Advanced style editor of your dashboard:

/* use display:flex to put tab on a single row */
.myTabContainer {
    display: flex;
    background-color: white;
    border-bottom: 1px solid lightgrey;
}

/* The selector of each tab item (as direct div child of myTabContainer) */
.myTabContainer > div {
    padding: 10px 25px;
    margin: 20px;

    cursor: pointer;
    background-color: lightgrey;
    border-radius: 20px;

    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

/* selector of the active tab */
.myTabContainer > div.srn-active-tab {
    background-color: purple;
    color: white;

}

/* selector when the user hovers a tab*/
.myTabContainer > div.srn-inactive-tab:hover {
    background-color: grey;
    color: white;
}