This solution supports both native and VBX components since the VBX Script Box consider all components as HTML elements.
Setting up the Dashboard
The example dashboard below contains one VBX Column-Bar Chart, native Lumira Designer Pie Chart and a Crosstab. Create a placeholder area with the required number of panels (or any other container component) which will be the target for the component drop.
Adding the VBX Script Box
Add a VBX Script Box to the application with the scripts given below, to enable drag and drop. You would need the IDs of the components to be made draggable and the target containers for the drop.
Setting the ‘Draggable’ attribute
Enabling the ‘draggable’ attribute of a component allows the user to move the component at runtime (drag operation)
Functions for Drag and Drop
On Drag of component
The drag(ev) function gets called when the component that is set as draggable is dragged. This sets the ID of the dragged component in the dataTransfer object using the setData method. Here, target refers to the component being dragged.
On Drop of component
This function gets called when the component is dropped in a target panel. The default behaviour for the drop event is prevented, the ID of the dragged component is obtained using the getData method and is then appended to the target container.
var data = ev.dataTransfer.getData(“text”);
On Drag of the component over the target
The allowDrop function gets called when the component is dragged over the target. This just prevents the default behaviour for the event.
Binding the functions
Now, bind the event handler functions defined above to the corresponding events of the components.
$(“#__component1”).attr(“ondragstart”,”drag(ev)”); // drag(event) function called when the component is dragged
$(“#PANEL_1_panel1”).attr(“ondrop”,”drop(ev)”); // drop(event) function called when the dragged component is dropped in the container panel
$(“#PANEL_1_panel1”).attr(“ondragover”,”allowDrop(ev)”);// allowDrop(event) function called when the component is dragged over the container panel.
CSS can be used for any formatting as required if, for instance, the dropped component has to fill up the target container area. The setInterval() method can be used if you would like to proactively listen to/track drag drop events at regular intervals.
Note: The ‘draggable’ attribute is a feature of HTML5 supported in most browsers and in IE 9.0 and above.
Stay tuned to this space for more customizability with runtime addition of containers to the placeholder area. Learn more about Visual BI’s SAP Lumira Offerings here.