Introduction to Customizing the Event Screens

• Display Options
• On-the-fly Settings
• Configurable Options
• Custom CSS
• Custom JavaScript
• Custom Template
• Tile Data
• Debugging Mode
• References

Display Options

Without writing any code, you can easily change Event Screen’s look and feel by adjusting its display options.
The available options vary according to Event Screen type you selected.

Back to Top

On-the-fly Settings

Ideally, you should change any Event Screen settings via Admin Portal.
However, you might find it useful to preview your changes by modifying URL parameters (think of this as your settings “override”).
The following snapshot illustrates a Wall Screen which is configured to show 2 columns, but
using the ?columns=4 GET parameter to show 4 columns on-the-fly.
You can see the Configurable Options section for more information.

Back to Top

Configurable Options

Global

Waterfall

Carousel

Mosaic

Scrollwall

Back to Top

Custom CSS

You can customize stylesheet by updating Custom CSS tab. This accepts live CSS and LESS (currently in beta).

The following diagrams illustrate the default tile HTML structure of current 2 Event Screen types.

Waterfall	Carousel
Mosaic
ScrollWall

Back to Top

Custom JavaScript

We’ve exposed our Event Screen JavaScript instance for you to hack.
You can customise it by providing window.StacklaEventscreens.options config object before the Event Screen instantiates.
You can also subscribe eventscreen:ready event which is triggered immediately after Event Screen has been instantiated.

Before Instantiation

// Before Event Screen starts initializing...
window.StacklaEventscreens.options = {
    debug: true, // Show debugging logs
    onInit: function () { // Bind initialized event
        console.log('inited');
    }
};

After Instantiation

// After Event Screen instance is able to be accessed...
$(document).on('eventscreen:ready', function (e, instance) {
    // Bind receiving new message event
    instance.on('message', function (e, addedData, removeIDList) {
        console.log(addedData);
    });
});

For more detail, please check the Event Screen JavaScript API documentation.

Back to Top

Custom Template

No matter which Event Screen type you are using, it is always composed by many tiles.
You can have your customised tile template by enabling the Custom Template.
To write your own template, you must learn to use Mustache, a very famous template engine.
Check the Tile Data section to see which fields you can use in your template.

Back to Top

Tile Data

You can use all fields from data service in Custom Template.
Besides, we also added several useful data fields that you might need as well.

Global

Wall

Carousel

Mosaic

Scrollwall

Back to Top

Debugging Mode

Our developers add debugging logs for every methods that event screen executes.
By adding ?debug=1 as an extra URL parameter, you will see these logs in Developer Console.
It’s sometimes easier for you, as a developer, to investigate your Custom JavaScript issues.

Back to Top

References

For more details on different Event Screens, please check the following link.

• Customizing the Mosaic Event Screen
• Customizing the Scrollwall Event Screen

Back to Top