[SalesForce] Is it OK to have variables in a Lightning Component Helper

I'm working on a drag + drop application in Lightning. I've worked up my solution by having a wrapper component, FormDraggableElement, which goes around anything that I want to be able to drag around or drop onto. I want the wrapper to do two things:

  • Abstract away the difficulties posed by dropping onto a droppable inside a droppable (events are fired for both, I only care about the inner one)
  • Fire a Lightning event with both the dragged component and the target component are available (not their DOM nodes, the components)

To do this, I've written a helper which uses some variables to keep track of timing and which components are in use:

({
    lastTimestamp : {
        dragEnter : 0,
        drop : 0
    },
    draggedComponent : null,
    dragEnter : function(component, event) {
        if(event.timeStamp > this.lastTimestamp.dragEnter) {
            console.log('dragEnter: ' + event.currentTarget.dataset.developername);
            $A.util.addClass(component, 'drop-target');
            this.lastTimestamp.dragEnter = event.timeStamp;
            this.draggedComponent = component;
        }
    },
    drop : function(component, event) {
        if(event.timeStamp > this.lastTimestamp.drop) {
            var cmpEvent = component.getEvent('drop');
            cmpEvent.setParams({
                'developerName': event.currentTarget.dataset.developername,
                'targetComponent': component,
                'draggedComponent': this.draggedComponent
            });
            cmpEvent.fire();
            $A.util.removeClass(component, 'drop-target');
            this.lastTimestamp.drop = event.timeStamp;
        }
    }
})

This seems to work, but I've been unable to find any docs which say you can add variables to your helper in this way. I understand (and am using) the fact that a single helper instance is shared between all instances of the component.

So, my question is: Is this use of variables in the helper acceptable? Do we think it's likely to be disallowed by SF in the future?

Best Answer

Don't store data in the helper. While it's not explicitly forbidden, the documentation does not specify that it is safe to store data in the helper, so you should make no assumptions that it is until/unless the documentation states that this is an appropriate use of the helper. Personally, I'd expect that they'll probably lock this down eventually. Typically, you'll want at least two components; one for the dropzone and one for the draggable elements. I wrote a gist that does this without the extra layer of components, but this is how I'd recommend you go about doing it. If you need cross-DropZone functionality, you'll want to store that data in a parent component so that all DropZone components can communicate with each other.

Related Topic