The Seats Renderer provides you with a number of callbacks you can implement to react to or change seating chart behaviour. For example objectColor, objectCategory and isObjectVisible.

However, when you try to access data or call functions that are defined somewhere else in your web app, this does not seem to work.

Why is this, and what is the solution?

Why can’t I just access my data?

When you call new seatsio.SeatingChart({..}).render(), the Seats Renderer creates an iFrame inside your chart div. This is to have a sandbox in which it can render the floor plan.

This sandbox is a Good Thing in many cases. Except when it’s not.

For example, the iFrame sandbox prevents data that’s in scope in the parent window, from being available to the iFrame content, in this case the chart itself. And so within an objectColor() implementation, you can’t just access functions that are available on your own page’s scope, even though it looks like you could.

An example

Let’s look at an example. Suppose you would like to give all available seats a color that depends on the time of the day: blue in the morning, red in the afternoon. And that you have a function colorByTimeOfDay() somewhere in your app, that calculates this color.

This won’t work:

function colorByTimeOfDay() {
    var isAm = new Date().getHours() < 12;
    return isAm ? "blue" : "red";
}

var chart = new seatsio.SeatingChart({
    // other configuration
    objectColor: function (object) {
        if (object.isSelectable()){
            return colorByTimeOfDay();
            // Problem: colorByTimeOfDay is not defined
        }
    }
}).render();

Why? Because because colorByTimeOfDay() is only available in the parent window, i.e. your page. Not within the iFrame that is rendered inside your chart div.

So how then?

To access this function from within the Seats Renderer iframe, use the extraConfig option:

function colorByTimeOfDay() {
    var isAm = new Date().getHours() < 12;
    return isAm ? "blue" : "red";
}

var chart = new seatsio.SeatingChart({
    extraConfig: {
        color: colorByTimeOfDay()
    },
    objectColor: function (object, defaultColor, extraConfig) {
        if (object.isSelectable()){
            return extraConfig.color;
        }
        return defaultColor;
    }
}).render();

Conclusion

To access external data from within callback implementations that you pass into the floor plan renderer, you’ll need to:

Pass your data as an object to the extraConfig option
access them through the last parameter that’s passed to the callback