1) In this demo I would like to show how to dynamically populate the values in second select based on values selected in first.

In this example , when country “AUSTRALIA” is selected  in first select , then the players of Australia are displayed in the second select dynamically

Capture.JPG

When country “INDIA” is selected in first select , then the players of India are displayed in the second select dynamically.

Capture_1.JPG

Pre-Requisites for this demo :  

  1. a) Eclipse Mars  with  SAP UI5 Installed
  2. b) Tomcat server 7.0

Lets start the demo.

Step1 : Create new Application Project

File->New->Other->SAPUI5 Application Development->Application Project-> Enter name “FIORI_DEMO” ->Enter initial view name as “Page1” (XML View) -> Click Finish


Step2 : In the “Index.html” enter the below code:


<!DOCTYPE HTML>

<html>

  <head>

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

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

  <script src=”resources/sap-ui-core.js”

  id=”sap-ui-bootstrap”

  data-sap-ui-libs=”sap.m”

  data-sap-ui-theme=”sap_bluecrystal”>

  </script>

  <!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>

  <script>

  sap.ui.localResources(“fiori_demo”);

  var app = new sap.m.App({initialPage:”idPage11″});

  var page = sap.ui.view({id:”idPage11″, viewName:”fiori_demo.Page1″, type:sap.ui.core.mvc.ViewType.XML});

  app.addPage(page);

  app.placeAt(“content”);

  </script>

  </head>

  <body class=”sapUiBody” role=”application”>

  <div id=”content”></div>

  </body>

</html>

Step 3 :  In the  Pag1.view.xml   , enter the below code:

<core:View

xmlns:core=”sap.ui.core”

xmlns:mvc=”sap.ui.core.mvc”

xmlns=”sap.m”

controllerName=”fiori_demo.Page1″

xmlns:layout=”sap.ui.commons.layout”

xmlns:dropdown=”sap.ui.commons”

>

  <Page title=”SELECT YOUR TEAM”>

  <content>

  <layout:VerticalLayout id=”vl”>

            <dropdown:DropdownBox id=”country” items=”{/country}” change=”onchange”>

                <dropdown:items>

                    <core:ListItem key=”{name}” text=”{name}” />

                </dropdown:items>

            </dropdown:DropdownBox>

            <dropdown:DropdownBox id=”players” items=”{namedmodel>/projects}”>

                <dropdown:items>

                    <core:ListItem key=”{namedmodel>name}” text=”{namedmodel>name}” />

                </dropdown:items>

            </dropdown:DropdownBox>

        </layout:VerticalLayout>

  </content>

  </Page>

</core:View>

Step 4:   In the Page1.controller.js   , enter the below code:

sap.ui.controller(“fiori_demo.Page1”, {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf fiori_demo.Page1

*/

  onInit: function() {

  var data = {

            “country”: [

                   

            

            {

                “name”: “AUSTRALIA”,

                “projects”: [{

                    “name”: “PONTING”

                }, {

                    “name”: “CLARKE”

                }, {

                    “name”: “MCGRATH”

                }]

            },

            {

                “name”: “INDIA”,

                “projects”: [{

                    “name”: “SACHIN”

                }, {

                    “name”: “KOHLI”

                }, {

                    “name”: “SEHWAG”

                }]

            },

         

         

            ]

        };

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

        oModel.setData(data);

        sap.ui.getCore().setModel(oModel);

        //set initial values for second dropdown box

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

        oModel2.setData(data.country[0]);

        //using named data model binding for second dropdown box

        this.byId(“players”).setModel(oModel2, “namedmodel”);

  },

/**

* Similar to onAfterRendering, but this hook is invoked before the controller’s View is re-rendered

* (NOT before the first rendering! onInit() is used for that one!).

* @memberOf fiori_demo.Page1

*/

// onBeforeRendering: function() {

//

// },

/**

* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.

* This hook is the same one that SAPUI5 controls get after being rendered.

* @memberOf fiori_demo.Page1

*/

// onAfterRendering: function() {

//

// },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

* @memberOf fiori_demo.Page1

*/

// onExit: function() {

//

// }

  //event handler for first dropdown box selection change

    onchange: function(oEvent) {

        var bindingContext = oEvent.mParameters.selectedItem.getBindingContext();

        var oModel = oEvent.getSource().getModel();

        var countryData = oModel.getProperty(bindingContext.sPath);

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

        oModel.setData(countryData);

        this.byId(“players”).setModel(oModel, “namedmodel”);

    },

 

   

});

Step 5:   Now  run the application by right-clicking on “index.html” ->Run On Tomcat Server 7-> Select “FIORI_DEMO” project and press FInish.

Capture_2.JPG

Capture_3.JPG

Capture.JPG

Capture_1.JPG

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply