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
When country "INDIA" is selected in first select , then the players of India are displayed in the second select dynamically.
Pre-Requisites for this demo :
- a) Eclipse Mars with SAP UI5 Installed
- 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.
