SAP's FIORI (4) - list
List of Properties
growing: Set run request more entries
growingThreshold: the number of data per request
mode list的模式 “None” "SingleSelect" "MutiSelect" "Delete" "noDataText"
List of events
Click Delete to delete button when the trigger
Click an entry trigger itemPress
selectionChange: When the selected entry changes trigger
UpdateFinished binding data is updated or post-processing triggers
UpdateStarted binding data is updated or trigger pre-treatment
StandardListItem property
Entry title info
infoState: Status Error additional information items, Warning, Success, None
Additional information entry title: description
highlight: barcode highlighted the value of Error, Warning, Success, Information, None
type: type of default entry is Inactive Active entries can trigger press event when clicked,
Detail display entries in the Details button and trigger event detailPress
DetailAndActive while the bar code and click on Show Details button, click on entry to trigger press event, click on the details of the event triggering detailPress
Inactive: no action when the item clicks
Navigation entries can view additional information, display ">" button, and press the trigger event
unread: unread
visible: visibility
StandardListItem event
Click detailPress trigger information entry details
Click an entry to trigger press
title
newDemo
manifest.json
"sap.ui5": {
"rootView": {
"viewName": "newDemo.view.view",
"type": "XML"
}index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>demo</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"newDemo":"","sap.ui.demo.mock":"mockdata"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
/*new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "demo"
})*/
//input demo
//demo为项目名
new sap.m.App({
pages : [
new sap.m.Page({
title : "SAP UI5",
enableScrolling:true,
content:[
new sap.ui.core.ComponentContainer({
name:"newDemo",
settings:{
id:"newDemo"
}
})
]
})
]
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>view.view.xml
<mvc:View controllerName="newDemo.controller.view"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<mvc:XMLView viewName="newDemo.view.listDemo"/><!--加载 demo项目的view文件夹下的inputDemo文件-->
</l:content>
</l:VerticalLayout>
</mvc:View>view.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("newDemo.controller.view", {
});
});listDemo.view.xml
<mvc:View controllerName="newDemo.controller.list"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Panel>
<content>
<List headerText="Products" width="600px"
items="{path:'/ProductCollection',
sorter:{
path:'Name'
}}">
<items><StandardListItem title="{Name}" description="{ProductId}" info="Category" infoState="Success"/></items>
</List>
<List width="600px" headerText="Products" footerText="footer text" growingThreshold="3" growing="true"
items="{path:'/ProductCollection',
sorter:{
path:'Name'
}}" growingTriggerText="More" growingDirection="Downwards">
<items><StandardListItem title="{Name}" highlight="Information" description="{ProductId}" info="Category" infoState="Success"/></items>
</List>
<List width="600px" headerText="Products"
items="{path:'/ProductCollection',
sorter:{
path:'Name'
}}" mode="MultiSelect">
<items><StandardListItem title="{Name}" type="DetailAndActive" detailPress="handleItemDetailPressEvent" press="handleItemPressEvent"/></items>
</List>
<List width="600px" headerText="Products"
items="{path:'/ProductCollection',
sorter:{
path:'Name'
}}" mode="Delete" delete="handleListDeleteEvent">
<items><StandardListItem title="{Name}" type="DetailAndActive" detailPress="handleItemDetailPressEvent" press="handleItemPressEvent"/></items>
</List>
</content>
</Panel>
</mvc:View>list.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
"use strict";
return Controller.extend("newDemo.controller.list", {
onInit:function(evt){
//List中的内容从json文件中获取
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
handleItemDetailPressEvent:function(evt){
alert(this.getView().getModel().getProperty("ProductId",evt.getSource().getBindingContext()));
},
handleItemPressEvent:function(evt){
alert(this.getView().getModel().getProperty("ProductId",evt.getSource().getBindingContext()));
},
handleListDeleteEvent:function(evt){
alert(evt.getParameter("listItem").getTitle());
}
});
});webapp/mockdata/products.json
{
"ProductCollection":[
{
"ProductId":"HT-1002",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 2",
"Description":"otebook Basic 2 80 GHz",
"ProductPicUrl":"img/timg.jpg",
"Quantity":10
},
{
"ProductId":"HT-1003",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 3",
"Quantity":11
},
{
"ProductId":"HT-1005",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 5",
"Quantity":12
},
{
"ProductId":"HT-1006",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 6",
"Quantity":13
},
{
"ProductId":"HT-1007",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 7"
},
{
"ProductId":"HT-1001",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 1",
"Quantity":14
},
{
"ProductId":"HT-1008",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Description": "Notebook Basic 15 with 2,80GHz",
"ProductPicUrl":"img/1.jpg",
"Name":"Notebook Basic 8",
"Quantity":15
},
{
"ProductId":"HT-1009",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 9",
"Quantity":16
}
],
"ProductCollectionStats":{
"Counts":{
"Total":123,
"Weight":{
"Ok":53,
"Heavy":51,
"Overweight":19
}
},
"Groups":{
"Category":{
"Accessproes":34
}
}
}
}effect
