cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Change order of items in list using SAPUI5

Go to solution
Former Member

on ‎08-09-2013 9:22 AM

0 Kudos

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,

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
‎08-21-2013 4:23 AM

Hello all,

Can anyone please tell me whats wrong with the above code?? I am still unable to make it work

Show replies
Show replies
former_member91307
Contributor
‎08-21-2013 11:06 AM
0 Kudos

Hi Prakash,

The jQuery selectors used were wrong use the below

          $(function() {

                   $("#lb1 > .sapMListUl").sortable();

                    $("#lb1 > .sapMListUl").disableSelection();

          });

insteadof

          $(function() {

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

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

          });

add the following in your bootstrap 'data-sap-ui-xx-fakeOS="android"'

Thanks and Regards, Venkatesh

former_member293602
Active Participant
‎08-21-2013 12:43 PM
0 Kudos

Hi Prakash,

I would recommend attaching a sorter when binding the aggregation. To do so, you need to add the following statement:

var oSorter = new sap.ui.model.Sorter("title");

to define a sorter and then you need to change the binding statement to:

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

to add the sorter to the aggregation binding.

Besides this, specifieing a mobile device type (android or ios) is necessary for testing in you browser.

You can find more information on data binding here: https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/DataBinding.html

Regards, Frank

Former Member
‎08-22-2013 4:44 AM
0 Kudos

HI Venkatesh,

Thank you so much for the reply. Been breaking my head all over this

Regards,

prakash

Former Member
‎08-22-2013 4:45 AM
0 Kudos

Hi Frank,

Thank you very much for your inputs. This info certainly will come handy

Regards,

Prakash

Former Member
‎09-30-2013 2:40 PM
0 Kudos

Hello Venkatesh IIango,

I am trying to used the above mentioned code,

I am facing two problems.

 

I am not able to used it on ColumnListItem

and

I am not able to used it when List is in sap.m.Dialog

Help is appreciated.

Thanks and Regards

Answers (2)

Answers (2)

Former Member
‎09-26-2016 11:11 AM
0 Kudos

How can we sort a master page in a way that if we will add any new record then that will come on top position. In the attached image the new record is coming under old record even if when i added the sorter based on addition date.

Show replies
Show replies
Former Member
‎11-21-2013 7:40 AM
0 Kudos

Thanks for your quick reply.

But  I want drag an image from desktop to browser using sapui5. Please suggest me the approach.

Show replies
Show replies
Ask a Question