Skip to content

Instantly share code, notes, and snippets.

@EarthenLynx

EarthenLynx/Detail.controller.js

Created August 4, 2020 13:24
Show Gist options
  • Save EarthenLynx/3d65f9ef7948ae85acd34bec7dba170d to your computer and use it in GitHub Desktop.
Save EarthenLynx/3d65f9ef7948ae85acd34bec7dba170d to your computer and use it in GitHub Desktop.
Download ZIP
UI5 Drag and drop example with Gridlist
Raw
component.js
init: function () {
// Other initialization functions have been pruned
// set the spec models accordingly
this.setModel(models.createActiveSpecStepModel(), "activestep");
},
Raw
Detail.controller.js
handleDropToList(oEvent) {
// Define if item is dropped on, before or after elements in new drop-list
// let sDropPosition = oEvent.getParameter("dropPosition");
// Define the list which is dragged from, and the handled Item
let oDraggedControl = oEvent.getParameter("draggedControl");
let oDraggedItems = oDraggedControl.mBindingInfos.items;
let oDraggedPath;
// if oDraggedItems does not exist, get the path of the bound context
if (!oDraggedItems) {
oDraggedPath = oDraggedControl.getBindingContext("activespec").getPath();
} else {
oDraggedPath = oDraggedItems.path;
}
let sDraggedList = oDraggedPath.split("/")[2];
let sDraggedIndex = oDraggedPath.split("/")[3];
// Vars for the Dropped Control
let oDroppedControl = oEvent.getParameter("droppedControl");
let oDroppedItems = oDroppedControl.mBindingInfos.items;
let oDroppedPath;
// if oDraggedItems does not exist, get the path of the bound context
if (!oDroppedItems) {
oDroppedPath = oDroppedControl.getBindingContext("activespec").getPath();
} else {
oDroppedPath = oDroppedItems.path;
}
let sDroppedList = oDroppedPath.split("/")[2];
/** Drag and drop Actions
* Available params:
* sDraggedList => Name of the contextual list the item was dragged from
* sDraggedIndex => Index of the dragged item
* sDroppedList => Name of the contextual list the item is dropped into
*/
// Step one: Remove the item from the initial list
let fromList = this.getView()
.getModel("activespec")
.getProperty("/spec_progress/" + sDraggedList);
let item = fromList.splice(sDraggedIndex, 1)[0];
// Step two: Add the item to its new list
let toList = this.getView()
.getModel("activespec")
.getProperty("/spec_progress/" + sDroppedList);
toList.push(item);
// Step three: Set the list accordingly to their new status
this.getView()
.getModel("activespec")
.setProperty("/spec_progress/" + sDraggedList, fromList);
this.getView()
.getModel("activespec")
.setProperty("/spec_progress/" + sDroppedList, toList);
},
Raw
Detail.view.xml
<l:HorizontalLayout class="sapUiContentPadding ui-fullwidth">
<f:GridList growingScrollToLoad="true" growingThreshold="2" id="todo-dnd-list" headerText="Todo" items="{ path: 'activespec>/spec_progress/todo' }">
<f:dragDropConfig>
<dnd:DragInfo sourceAggregation="items" />
<dnd:DropInfo targetAggregation="items" dropPosition="Between" dropLayout="Horizontal" drop="handleDropToList"/>
</f:dragDropConfig>
<f:customLayout>
<grid:GridBoxLayout boxMinWidth="17rem"/>
</f:customLayout>
<f:GridListItem highlight="Information">
<VBox height="100%">
<VBox class="sapUiSmallMargin">
<layoutData>
<FlexItemData growFactor="1" shrinkFactor="0" />
</layoutData>
<Title class="sapUiTinyMarginBottom" text="{activespec>step_title}" wrapping="true" />
<Label text="{activespec>step_description}" wrapping="true" />
</VBox>
<OverflowToolbar design="Solid" class="sapContrast">
<VBox>
<Label text="Assigned to: {activespec>step_assignee}" wrapping="true" />
<Label text="Due at {activespec>step_done_when}" wrapping="true" />
</VBox>
<ToolbarSpacer />
<Button icon="sap-icon://delete" type="Reject" press="handlePress" />
<Button icon="sap-icon://edit" type="Transparent" press="handlePress"/>
</OverflowToolbar>
</VBox>
</f:GridListItem>
</f:GridList>
<!-- / Todo List -->
<!-- Wip List -->
<f:GridList id="wip-dnd-list" headerText="Work in Progress" items="{ path: 'activespec>/spec_progress/wip' }">
<f:dragDropConfig>
<dnd:DragInfo sourceAggregation="items" />
<dnd:DropInfo targetAggregation="items" dropPosition="Between" dropLayout="Horizontal" drop="handleDropToList"/>
</f:dragDropConfig>
<f:customLayout>
<grid:GridBoxLayout boxMinWidth="17rem"/>
</f:customLayout>
<f:GridListItem highlight="Warning">
<VBox height="100%">
<VBox class="sapUiSmallMargin">
<layoutData>
<FlexItemData growFactor="1" shrinkFactor="0" />
</layoutData>
<Title class="sapUiTinyMarginBottom" text="{activespec>step_title}" wrapping="true" />
<Label text="{activespec>step_description}" wrapping="true" />
</VBox>
<OverflowToolbar design="Solid" class="sapContrast">
<VBox>
<Label text="Assigned to: {activespec>step_assignee}" wrapping="true" />
<Label text="Due at {activespec>step_done_when}" wrapping="true" />
</VBox>
<ToolbarSpacer />
<Button icon="sap-icon://edit" type="Transparent" press="handlePress" />
</OverflowToolbar>
</VBox>
</f:GridListItem>
</f:GridList>
<!-- / Wip List -->
<!-- Done List -->
<f:GridList id="done-dnd-list" headerText="Done" items="{ path: 'activespec>/spec_progress/done' }">
<f:dragDropConfig>
<dnd:DragInfo sourceAggregation="items"/>
<dnd:DropInfo targetAggregation="items" dropPosition="Between" dropLayout="Horizontal" drop="handleDropToList"/>
</f:dragDropConfig>
<f:customLayout>
<grid:GridBoxLayout boxMinWidth="17rem"/>
</f:customLayout>
<f:GridListItem highlight="Success">
<VBox height="100%">
<VBox class="sapUiSmallMargin">
<layoutData>
<FlexItemData growFactor="1" shrinkFactor="0" />
</layoutData>
<Title class="sapUiTinyMarginBottom" text="{activespec>step_title}" wrapping="true" />
<Label text="{activespec>step_description}" wrapping="true" />
</VBox>
<OverflowToolbar design="Solid" class="sapContrast">
<VBox>
<Label text="Assigned to: {activespec>step_assignee}" wrapping="true" />
<Label text="Due at {activespec>step_done_when}" wrapping="true" />
</VBox>
<ToolbarSpacer />
<Button icon="sap-icon://edit" type="Transparent" press="handlePress" />
</OverflowToolbar>
</VBox>
</f:GridListItem>
</f:GridList>
</l:HorizontalLayout>
Raw
models.js
createActivespecModel() {
return new JSONModel([
{
// Other props have been pruned
spec_progress: {
todo: [],
wip: [],
done: [],
},
},
]);
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment