Purpose
Generic Drag & Drop Control for all use cases. I have styled it a bit, now it can be used.
This component is based on the techniques as in blog SDK development - I want to drag drop in SDK component
How does it looks like?
basically, current representation is by toggle buttons and drop areas (simple layouts) before, between and after the buttons:
| Styles | ||
| scn-pack-DragDropArea | the area | |
| scn-pack-DragDropArea-Layout | horizontal or vertical layout | |
| scn-pack-DragDropArea-Drop | drop space | |
| scn-pack-DragDropArea-DropEffect | for on hoover event in drop action | |
| scn-pack-DragDropArea-Drag | drag button | |
Available Properties
| Property Name | Description |
|---|---|
| orientation | the orientation (horizontal, vertical) - can be changed only once - reload/refresh required |
| itemWidth | item width in px |
| dragKey | generic string for drag key (which is passed to second area as drop key) |
| dragContext | generic string for drag context (which is passed to second area as drop context) |
| dropId | id of dropped item (only accessible via get function) |
| dropKey | key of dropped item (only accessible via get function) |
| dropContext | context of dropped item (only accessible via get function) |
| dropAfterKey | the key which is before the dropped space (empty if the drop is on index 0) |
| dropIndex | drop index (0 is before first item) |
Scripting Functions (preview)
| Scripts | Short Description |
|---|---|
String getDropId () | returns the drop id |
| String getDropKey () | returns the drop key |
| String getDropContext () | returns the drop context |
| String getDropAfterKey () | returns the drop ke of the element before drop (empty in case drop was done in the index 0) |
| int getDropIndex () | returns the drop index, 0-based |
| String getDragKey () | returns the drag key |
| String getDragContext () | returns the drag content |
Work with content is same as in other components FishEye, ImageCarousel - just see at the ImageCarousel doc:
Design Studio SDK: Image Carousel Component
Work with Images
From release 1.0.10 you can use images as thirs parameter as well. The images will be used as icon on the button. Keep size small (eg 16x16px)
New Method (added also to ImageCarousell and FishEye)
String getKeyAtIndex (int index)
Events
| Event | Description |
|---|---|
| onDrop | triggered when user drops something |
Example Implementation for Drop:
var id = DRAGDROPAREA_COLUMNS.getDropId();
var key = DRAGDROPAREA_COLUMNS.getDropKey();
var context = DRAGDROPAREA_COLUMNS.getDropContext();
if(context == DRAGDROPAREA_COLUMNS.getDragContext()) { var afterKey = DRAGDROPAREA_COLUMNS.getDropAfterKey(); var afterIndex = DRAGDROPAREA_COLUMNS.getDropIndex(); var keyOnIndex = DRAGDROPAREA_COLUMNS.getKeyAtIndex(afterIndex); APPLICATION.createInfoMessage("Move: " + id + " to " + keyOnIndex); if(afterKey != "") { DS_1.moveDimensionAfter(id, afterKey); } else { if(keyOnIndex == "") { DS_1.moveDimensionToColumns(id); } else { DS_1.moveDimensionBefore(id, keyOnIndex); } }
}In the example application you can use drag & drop now to change the drill down 
Example Application
An Application with example can be downloaded at the BIAPP Repository:
- KarolKalisz/DesignStudioBiAppRepository · GitHub
- or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub
Releases
Source Code & Licensing
This component is for free use. It is under the Open Source Apache Version 2.0 License.
Important MaintenanceNotice (... as I am SAP Employee)
The component is NOT delivered under SAP maintenance license.
You cannot claim any Support on this component from SAP!
The components are created on "private" basis - you can use them as is. I can modify, correct or improve - but there is no obligation to do it. Of course I will try to correct bugs or improve the component as long I can.
Have Fun!
for other components see: Karol's SDK Components