Plugin Builder - Initialize

Ladies and Gentlemen of this Forum,

I have recently ventured into plugin building to tackle some much needed integrations for my current project. One of those integrations is Seats.io, a very cool seat map builder and placement.

Shoutout to @copilot for the very good Plugin Building Tutorial.

I have managed to successfully render the user side map using the following code:

function(instance, properties, context) {

 let selectedSeats = [];
 let holdTokenProperty = "";
 
 var seatingChart = new seatsio.SeatingChart({
        divId: 'chart',
        workspaceKey: properties.workspace_key,
        event: properties.event_key,
        session: 'continue',
        maxSelectedObjects: 1,
        showSeatLabels: properties.show_labels,
     	onObjectSelected: function (object) {
        // add the selected seat id to the array
        selectedSeats.push(object.label);
        instance.publishState("seatList",selectedSeats);
    },
    onObjectDeselected: function (object) {
        // remove the deselected seat id from the array
        var index = selectedSeats.indexOf(object.label);
        if (index !== -1) selectedSeats.splice(index, 1);
        instance.publishState("seatList",selectedSeats);
    },
    onSessionInitialized: function (object) {
        holdTokenProperty = object.token;
        instance.publishState("holdToken",holdTokenProperty);
    }
    }).render(); 
    
    
}

Oddly enough, as pointed out in many other instances of this Forum, this code is under Function: update.

The downside here is that sometimes it will render the map twice.

The exact same issue is happening on the Manager Side, where I’m rendering a Manager Chart. Well, not exactly. On the Manager Side the chart gets rendered infinitely.

I have worked around this issue by moving the rendering to a new function tied to a workflow that I will call whenever the map must be displayed. Not elegant. Works.

I’d like to know if someone can point out how to make this work on the initialize. The reason why I’m not using it right now is because I need two parameters (security_key and event_key) to be passed on the plugin object when I make the call.

And, as we know, initialize will not take outside parameters.

Any ideas?

1 Like

The reason why it may render it twice (and maybe more) is that because an update happen and this regerenate the full code.

In most case, you cannot make it work in initialize because there’s no access to parameters. You need to wait the update function.

You can easily avoid this by adding something that will check if this have been already rendering a first time in your code and using instance.data
I also highly recommend you to change the divID for something random, just in case your user could have more than 1 instance on the page.

According to this:

The script create a child node in the div. So everytime the update function will run, this will add a new node.
You can consider using render in intialize without any option and https://docs.seats.io/docs/renderer/chart-properties-chartrerender
rerender in update for example.