CODEWITHSUNDEEP
javascriptarrayssapui5master-detail
Olis
Olis

Reputation: 37

SAPUI5 Select first item in list after rendering

I have a Master-Detail application and I would like the first list item to be selected automatically once the application is loaded. I have tried the following solution but it does not work:

            onAfterRendering: function() {

              var oList = this.getView().byId("bankList");
              var aItems = oList.getItems("listItems");

              console.log(aItems);
                if (aItems.length) {
                    aItems[0].setSelected(true);
                 }
        }

The strange thing is that aItems seems to be empty even though it contains the correct details. Below is what is printed in the console when I console.log(aItems):

The result of console.log(aItems)

enter image description here

Upvotes: 1

Views: 7946

Answers (1)

Rafael López Martínez
Rafael López Martínez

Reputation: 2265

Guessing that you are using a sap.m.List, You should use the setSelectedItem() function, that receives the Item object as parameter.

Furthermore I recommend you to avoid using the onAfterRendering lifecycle method, to keep the lifecycle clean. There are usually many items that you can use, for example updateFinished for sap.m.List

Here the snippet

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta charset="utf-8">

  <title>MVC with XmlView</title>

  <!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
  <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize_plus' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>


  <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

  <!-- define a new (simple) View type as an XmlView
		 - using data binding for the Button text
		 - binding a controller method to the Button's "press" event
		 - also mixing in some plain HTML
		 note: typically this would be a standalone file -->

  <script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
      <List items="{/options}" mode="SingleSelect" updateFinished="onUpdateFinished">
        <StandardListItem title="{value}"></StandardListItem>
      </List>
    </mvc:View>
  </script>


  <script>
    // define a new (simple) Controller type
    sap.ui.controller("my.own.controller", {
      onUpdateFinished: function(oEvent) {
        var oList = oEvent.getSource();
        var aItems = oList.getItems();
        oList.setSelectedItem(aItems[0])
      }
    });



    /*** THIS IS THE "APPLICATION" CODE ***/
    // create some dummy JSON data
    var data = {
      options: [{
        key: '1',
        value: 'option 1'
      }, {
        key: '2',
        value: 'option 2'
      }, {
        key: '3',
        value: 'option 3'
      }]
    };
    var oJSONModel = new sap.ui.model.json.JSONModel();
    oJSONModel.setData(data);

    // instantiate the View
    var myView = sap.ui.xmlview({
      viewContent: jQuery('#view1').html()
    }); // accessing the HTML inside the script tag above

    myView.setModel(oJSONModel);
    // put the View onto the screen
    myView.placeAt('content');
  </script>

</head>

<body id='content' class='sapUiBody'>
</body>

</html>

Upvotes: 2

Related Questions