Skip to Content
0
Former Member
Aug 09, 2013 at 08:22 AM

Change order of items in list using SAPUI5

813 Views

Hello,

I am experiencing a strange issue. I am developing an iOS app using SAPUI5 .

I need to implement a feature to re- order items in list. I have followed some online example but it seems to be not working. The list items cannot be re-arranged.

can anyone tell me the problem with this code?

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>sap.m.List Test</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

<title>DRag and drop</title>

<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->

<script id="sap-ui-bootstrap"

src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

data-sap-ui-theme="sap_mvi"

data-sap-ui-libs="sap.m"></script>

<script type="text/javascript">

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');

$(function() {

$("#listItem").sortable();

$("#listItem").disableSelection();

});

/*

// ================================================================================

// create application sample for the data binding

// ================================================================================

*/

jQuery.sap.require("sap.ui.model.json.JSONModel");

// JSON sample data

function bindListData(data, itemTemplate, list) {

var oModel = new sap.ui.model.json.JSONModel();

// set the data for the model

oModel.setData(data);

// set the model to the list

list.setModel(oModel);

// create a CustomData template, set its key to "answer" and bind its value to the answer data

var oDataTemplate = new sap.ui.core.CustomData({

key : "xyz"

});

oDataTemplate.bindProperty("value", "press");

// add the CustomData template to the item template

itemTemplate.addCustomData(oDataTemplate);

var oDataTemplate2 = new sap.ui.core.CustomData({

key : "abc"

});

oDataTemplate2.bindProperty("value", "detailPress");

// add the CustomData template to the item template

itemTemplate.addCustomData(oDataTemplate2);

// bind Aggregation

list.bindAggregation("items", "/navigation", itemTemplate);

}

var dataOverview = {

navigation : [

{

title : "cat",

}, {

title : "apple",

}, {

title : "mat",

}, {

title : "bat",

}, {

title : "dog",

}, {

title : "fig",

}, {

title : "ink",

}

]

};

// template for list item

var oItemTemplateItem = new sap.m.StandardListItem("listItem",{

title : "{title}",

type: sap.m.ListType.Active,

});

// create list

var list = new sap.m.List("lb1");

// bind data

bindListData(dataOverview, oItemTemplateItem, list);

var listOverview = new sap.m.Page("listOverview", {

title : "List Overview",

content:[list],

});

var app = new sap.m.App("myApp");

app.addPage(listOverview);

app.placeAt("body");

</script>

</head>

<body id="body" class="sapUiBody">

</body>

</html>

Thanks and regards,