I want share working live example of SAPUI5 on stackoverflow, but I don't know how to create the JSBin example or which things we have to add or is there any simple way to create demo example of JSBin.
Or, you can create a Stack Snippet which is runnable by clicking the blue 'Run Code Snippet' button:
sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows : [
{ value : "sap-icon://syringe", col2 : "Value 2", col3 : "Value 3", ol4 : "Value 4" },
{ value : "sap-icon://account", col2 : "Value 10", col3 : "Value 11", col4 : "Value 12" },
{ value : "sap-icon://chalkboard", col2 : "Value 14", col3 : "Value 15", col4 : "Value 16" },
{ value : "sap-icon://e-care", col2 : "Value 18", col3 : "Value 19", col4 : "Value 20" }
]
});
this.getView().setModel(oModel);
}
});
sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
/* extra CSS classes here */
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
<Table items="{/rows}">
<columns>
<Column>
<Text text="Col1" />
</Column>
<Column>
<Text text="Col2" />
</Column>
<Column>
<Text text="Col3" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<core:Icon src="{value}" />
<Text text="{col2}" />
<Text text="{col3}" />
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
You will need bootstrap script, View which will be in HTML tab only and its Controller under Javascript tab.
You can save this as your template after logging in and use it as starting point for your expamples.
Related
I have the following object:
parent = {
prop1: "asd",
prop2: "zxc",
arr: [
{
title: "qwe",
attr: {attr1: "987", attr2: "dfg"}
},
{
title: "poi",
attr: {attr1: "345", attr2: "jkl"}
}
]
}
I want to bind it to the following list:
<List id="list" items="{parent>/arr}" headerText="Example">
<items>
<ObjectListItem title="{parent>arr/title}" type="Active" press="onListItemPress">
<attributes>
<ObjectAttribute text="{parent>arr/attr/attr2}" />
</attributes>
</ObjectListItem>
</items>
</List>
I just cannot make it work.
What is the right way to show the title and the attr2 properties in this list?
try this syntax view binding below it's works :
<List id="list" items="{parent>/arr}" headerText="Example">
<items>
<ObjectListItem title="{parent>title}" type="Active" press="onListItemPress">
<attributes>
<ObjectAttribute text="{parent>attr/attr2}" />
</attributes>
</ObjectListItem>
</items>
</List>
I am having a table with columns as below:
<Table id="table2" visibleRowCount="5" rows="{
path: '/ProductCollection',
sorter: {path: 'serialId', descending: false}}">
<columns>
<Column width="50px">
<m:Text text="Employee ID" />
<template>
<m:Text text="{employeeId}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeName" />
<template>
<m:Text text="{employeeName}" wrapping="false" />
</template>
</Column>
</columns>
</Table>
And JSON Data is :
var oData = {
ProductCollection: [
{
employeeId: "1"
employeeName:"xyz"
},
{
employeeId: "1"
employeeName:"xyz"
},
{
employeeId: "1"
employeeName:"xyz"
}
]
};
And i have tried binding as :
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(ProductCollection);
this.getView().setModel(oModel);
I am getting the data but into model but unable to display values in table getting empty rows.I am facing problem in binding(xml view)any guiding links or a solution would be much helpful , TIA
<mvc:View controllerName="reg.cmdd.Consumer.controller.Home" xmlns="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" xmlns:u="sap.ui.unified"
xmlns:c="sap.ui.core" xmlns:m="sap.m" height="100%">
<m:Page showHeader="false" enableScrolling="false" class="sapUiContentPadding">
<m:content>
<Table id="table2" visibleRowCount="5" rows="{ path: '/ProductCollection', sorter: {path: 'serialId', descending: false}}">
<columns>
<Column width="50px">
<m:Text text="Employee ID"/>
<template>
<m:Text text="{employeeId}" wrapping="false"/>
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeName"/>
<template>
<m:Text text="{employeeName}" wrapping="false"/>
</template>
</Column>
</columns>
</Table>
</m:content>
</m:Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("reg.cmdd.Consumer.controller.Home", {
onInit: function () {
var oData = {
ProductCollection: [{
employeeId: "1",
employeeName: "xyz"
}, {
employeeId: "1",
employeeName: "xyz"
}, {
employeeId: "1",
employeeName: "xyz"
}
]
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
this.getView().setModel(oModel);
}
});
});
Your code is fine, the problem must be elsewhere
EDIT:
check this line:
oModel.setData(ProductCollection);
it should be
oModel.setData(oData);
Somehow my filter update through the function onSearch is not updating the view. The initial Filter in the XML View is working fine. Also when sIaNr is empty the aFilter = [] is working as I'm seeing all results. But when sIaNr is not empty this part is called and the filter is not working:
aFilter.push(new Filter("raufnr", FilterOperator.EQ, sIaNr))
this is my Code
ZCATS_TESTJ.json
{
"d": {
"results": [{
"status": "30",
"skostl": "0001",
"catshours": "2.50",
"ktext": "test1",
"counter": "000003484040",
"mandt": "101",
"pernr": "00015822",
"usrid": "xx123",
"workdate": "\/Date(1477267200000)\/",
"raufnr": "6000025"
}, {
"status": "30",
"skostl": "0001",
"catshours": "8.00",
"ktext": "test2",
"counter": "000002919281",
"mandt": "101",
"pernr": "1234",
"usrid": "xx123",
"workdate": "\/Date(1441065600000)\/",
"raufnr": "0815"
}, {
"status": "30",
"skostl": "0001",
"catshours": "8.00",
"ktext": "test1",
"counter": "000002919281",
"mandt": "101",
"pernr": "00015822",
"usrid": "xx123",
"workdate": "\/Date(1441065600000)\/",
"raufnr": "6000007"
}]
}
}
List.view
<mvc:View
controllerName="sap.ui.bookedTimes.wt.controller.List"
id="listview"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns:fb="sap.ui.comp.filterbar"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Table id="exportTable" inset="false" growing="true" growingThreshold="700" visible="true"
items="{
path : 'view>/d/results',
filters : [
{ path : 'raufnr', operator : 'EQ', value1 : '6000007'}
]
}">
<headerToolbar>
<OverflowToolbar>
<ToolbarSpacer />
<Button icon="sap-icon://excel-attachment" press="onExport"/>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column>
<Text text="IA-Nummer" />
</Column>
<Column>
<Text text="Bezeichnung" />
</Column>
<Column>
<Text text="Datum" />
</Column>
<Column hAlign="End">
<Text text="Zeit" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{view>raufnr}" />
<Text id="tText" text="{view>ktext}" />
<Text text="{path: 'view>workdate', type: 'sap.ui.model.type.Date', formatOptions: { pattern: 'dd.MM.yyyy' } }" />
<Text text="{view>catshours}" />
</cells>
</ColumnListItem>
</items>
</Table>
List.controller
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/ui/core/util/MockServer',
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/ui/model/FilterType"
// 'sap/ui/export/Spreadsheet'
], function(jQuery, Controller, JSONModel, Filter, FilterOperator, FilterType) {
"use strict";
return Controller.extend("sap.ui.bookedTimes.wt.controller.List", {
onInit : function () {
//Get Model
var jModel = this.getOwnerComponent().getModel("zCatsTestJ");
var that = this;
//after Model is loaded transform Date
jModel.attachRequestCompleted(function() {
//var oViewModel= new JSONModel(jModel);
for (var i = 0; i< jModel.oData.d.results.length; i++){
var sJsonDate = jModel.getProperty("/d/results/" + [i] + "/workdate");
//Json Date in Datumsformat umwandeln
var sNumber = sJsonDate.replace(/[^0-9]+/g,'');
var iNumber = sNumber * 1; //trick seventeen
var oDate = new Date(iNumber);
jModel.setProperty("/d/results/" + [i] + "/workdate", oDate);
}
//update the model with new Date format
that.getView().setModel(jModel, "view");
});
},
onSearch: function(oEvent) {
// build filter array
var aFilter = [];
var oParams = oEvent.getParameter("selectionSet");
var sIaNr = oParams[0].getValue();
var oList = this.getView().byId("exportTable");
var oBinding = oList.getBinding("items");
if (sIaNr) {
aFilter.push(new Filter("raufnr", FilterOperator.EQ, sIaNr));
}
//filter binding
oBinding.filter(aFilter, FilterType.Application);
}
});
});
any help would be greatly appreciated. Thanks
Delete 'sap/ui/core/util/MockServer' in the define part.
I am facing one issue with data not being visible in my project.
I have created two views: Input.view.xml and plant.view.xml. In my first view, I have a button as "Material Details" and on clicking that, it moves to second view. However, it is coming blank.
My JSON file is having all the data but it's not coming in second view.
Can you please suggest what is the issue and how to fix it?
"Input View" (First View)
<mvc:View
controllerName="stock.controller.main"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns:viz="sap.viz.ui5.controls"
xmlns="sap.m">
<App id="app">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%"
height="100%">
<Label
text="Product"
labelFor="productInput" />
<Input id="productInput"
placeholder="Enter Material ..."
showSuggestion="true"
showTableSuggestionValueHelp="false"
suggestionRows="{/ProductCollection}"
suggestionItemSelected="onSelectItem">
<suggestionColumns>
<Column
hAlign="Begin"
popinDisplay="Inline"
demandPopin="true">
<Label text="Name"/>
</Column>
</suggestionColumns>
<suggestionRows>
<ColumnListItem>
<Label id="inputKey" text="{ProductId} {Name}"/>
</ColumnListItem>
</suggestionRows>
</Input>
<Button id="onDisplay"
text="{i18n>materialDetails}"
press="onDisplayPlant"
class="sapUiTinyMarginEnd" />
</l:VerticalLayout>
</App>
</mvc:View>
plant.view.xml (Second View)
<mvc:View
controllerName="stock.controller.plant"
xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<MessagePage
showNavButton="true"
navButtonPress="onNavBack"/>
<Table id="idProductsTable"
inset="false"
items="{
path: '/ProductCollection',
sorter: {
path: 'Name'
}
}">
<headerToolbar>
<Toolbar>
<Title text="Products" level="H2" />
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Product" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="Supplier" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true"
hAlign="End">
<Text text="Dimensions" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true"
hAlign="Center">
<Text text="Weight" />
</Column>
<Column hAlign="End">
<Text text="Price" />
</Column>
</columns>
<items>
<ColumnListItem>
<ObjectIdentifier
title="{Name}"
text="{ProductId}"/>
<Text text="{SupplierName}" />
<Text text="{Width} x {Depth} x {Height} {DimUnit}" />
<ObjectNumber
number="{WeightMeasure}"
unit="{WeightUnit}"
state="{
parts: [
{path: 'WeightMeasure'},
{path: 'WeightUnit'}
],
formatter: 'stock.Formatter.weightState'
}" />
<ObjectNumber
number="{
parts: [{
path: 'Price'
}, {
path: 'CurrencyCode'
}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"
unit="{CurrencyCode}" />
</ColumnListItem>
</items>
</Table>
</MessagePage>
</mvc:View>
plant.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"jquery.sap.global",
"stock/Formatter",
"sap/ui/core/routing/History",
"sap/ui/model/json/JSONModel"
], function (Controller, jQuery, Formatter, History,JSONModel) {
"use strict";
var TableController = Controller.extend("stock.controller.plant", {
onInit: function () {
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
getRouter : function () {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onNavBack: function () {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getRouter().navTo("input", {}, true);
}
}
});
return TableController;
});
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel, XMLView) {
"use strict";
var Component = UIComponent.extend("stock.Component", {
metadata: {
manifest: "json",
getTable: function () {
return this._rootView.getContent()[0];
}
},
publicMethods: [
"getTable"
],
dependencies: {
libs: [
"sap.m",
"sap.ui.layout"
]
},
rootView: "stock.view.input",
config: {
sample: {
files: [
"view.input.view.xml",
"controller.main.controller.js",
"Formatter.js"
],
description : "In this example assisted input is provided with table-like suggestions where several columns can display more details."
}
},
init : function () {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
}
});
Component.prototype.createContent = function () {
this._rootView = sap.ui.xmlview({ viewName : "stock.view.plant" });
return this._rootView;
};
return Component;
});
I have a Input component:
<Input
value=""
showSuggestion="true"
showValueHelp="true"
valueHelpOnly="true"
valueHelpRequest="handleValueLocalHelp"
suggestionItemSelected="onLiveChangeSimple"
/>
and this is my function:
onLiveChangeSimple: function (oEvent) {
console.log("OK!")
},
When I clik on the input I show the suggestion items in a Help Diaolog; then I select one item and the Input value change correctly but onLiveChangeSimple don't fire! Why?
If I modify the input in this mode:
<Input
value=""
liveChange="onLiveChangeSimple"
/>
onLiveChangeSimple start...
What is the event fired when I clik on an Item in a Help dialog?
It should fire just fine... but I noticed you haven't specified an aggregation suggestionItems in your Input control, are you managing things in a different way?
<Input
id="productInput"
type="Text"
placeholder="Enter Name ..."
showSuggestion="true"
suggestionItems="{/}"
suggestionItemSelected="suggestionItemSelected">
<suggestionItems>
<core:Item text="{name}" />
</suggestionItems>
</Input>
See the below working example of how the suggestionItemSelected event is fired:
jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
var aData = [
{name: "Dente, Al", userid: "/c01/b2/u3/u44"},
{name: "Friese, Andy", userid: "/a01ss/a2/u3/u44"},
{name: "Mann, Anita", userid: "/U013333/u2/u3/u44"},
{name: "Schutt, Doris", userid: "/U01/u2/u3/u44"},
{name: "Open, Doris", userid: "/U01/u2/u3/u44"},
{name: "Dewit, Kenya", userid: "/U01/u2/u3/u44"},
{name: "Zar, Lou", userid: "/U01/bu2/u3/u44"},
{name: "Burr, Tim", userid: "U08"},
{name: "Hughes, Tish", userid: "U09"},
{name: "Town, Mo", userid: "U10"},
{name: "Case, Justin", userid: "U11"},
{name: "Time, Justin", userid: "U12"},
{name: "Barr, Sandy", userid: "U13"},
{name: "Poole, Gene", userid: "U14"},
{name: "Ander, Corey", userid: "U15"},
{name: "Early, Brighton", userid: "U16"},
{name: "Noring, Constance", userid: "U17"},
{name: "O'Lantern, Jack", userid: "U18"},
{name: "Tress, Matt", userid: "U19"},
{name: "Turner, Paige", userid: "U20"}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(aData);
this.getView().setModel(oModel);
},
suggestionItemSelected: function(oEvent) {
sap.m.MessageBox.show("Selected " + oEvent.getParameter("selectedItem").getBindingContext().getObject().name);
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("uiArea");
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 template</title>
<style>
.sapUiUfdShellBackground, .sapMGlobalBackgroundColor {
background-color: transparent !important;
background-image: none !important;
}
.sapMShellGlobalInnerBackground {
background-image: none !important;
}
</style>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<script id="view1" type="ui5/xmlview">
<mvc:View
height="100%"
controllerName="view1.initial"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Input
id="productInput"
type="Text"
placeholder="Enter Name ..."
showSuggestion="true"
suggestionItems="{/}"
suggestionItemSelected="suggestionItemSelected">
<suggestionItems>
<core:Item text="{name}" />
</suggestionItems>
</Input>
</mvc:View>
</script>
</head>
<body class="sapUiBody" role="application">
<div id="uiArea"></div>
</body>
</html>
The problem is where I insert the item options. I not use suggestionItems aggregation but SelectDialog https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.SelectDialog/samples