How to remove the space between bar and legend in a sapui5 StackedBarChart - sapui5

I like to create a barchart and have gotten pretty far.
My chart is a standalone view and next to some other views inside of a Shell>App>Page
View.view.xml:
<mvc:View
controllerName="my.controller.Chart"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls"
xmlns:vizData="sap.viz.ui5.data"
xmlns:vizFeeds="sap.viz.ui5.controls.common.feeds"
displayBlock="true"
height="100%"
busyIndicatorDelay="0"
class="myChartView"
>
<Panel
headerText="Chart"
class="sapUiResponsiveMargin"
width="auto"
>
<viz:VizFrame
vizType="100_stacked_bar"
id="idDualStackedChart"
width="100%"
class="myStackedBarChart"
vizProperties="{plotArea: {
dataLabel:{
visible: true
},
colorPalette: ['#009c00','#ff0000'],
gridline: {
visible: false
}
},
interaction: {
noninteractiveMode: true
},
title:{ visible: false, text:'Auslastung'},
categoryAxis: {visible: false},
valueAxis: {visible: false},
legendGroup: {
layout: {
position: 'bottom',
alignment: 'center'
}
}
}"
>
<viz:dataset>
<vizData:FlattenedDataset data="{/items}">
<vizData:dimensions>
<vizData:DimensionDefinition
name="Maschine"
value="{Machine}"
/>
</vizData:dimensions>
<vizData:measures>
<vizData:MeasureDefinition
name="Stopped"
value="{Stopped}"
/>
<vizData:MeasureDefinition
name="Running"
value="{Running}"
/>
</vizData:measures>
</vizData:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<vizFeeds:FeedItem
uid="valueAxis"
type="Measure"
values="Running,Stopped"
/>
<vizFeeds:FeedItem
uid="categoryAxis"
type="Dimension"
values="Maschine"
/>
</viz:feeds>
</viz:VizFrame>
</Panel>
</mvc:View>
Chart.controller.ts
import Controller from "sap/ui/core/mvc/Controller";
import JSONModel from "sap/ui/model/json/JSONModel";
export default class ChartController extends Controller {
onInit() {
const oSampleData = new JSONModel("model/Data.json");
this.getView().setModel(oSampleData);
const chartFrame = this.byId("idDualStackedChart");
console.log(chartFrame);
}
}
Data.json
{
"items": [
{
"Machine": "Q1",
"Stopped": "20",
"Running": "40"
}
]
}
The only problem I have is: There is a lot of space above the chart and a lot of space between the chart-bar and the legend.
How can I decrease/remove this space?

Related

Different bar color depending on values in SAPUI5 VizFrame

I have a SAPUI5 VizFrame with a one DimensionDefinition, Currency, and two MeasureDefinition, Turnover and Cost. Cost should always have the same color (I used sapUiChartPaletteSequentialHue1). Turnover should have color sapUiChartPaletteSemanticBad if Cost is higher then Turnover, and color sapUiChartPaletteSemanticGood if Turnover is higher or equal to Cost.
This is the code in the view:
<viz:VizFrame xmlns="sap.viz" id="idDetailVizFrame" vizType='column' width="100%" height="100%" uiConfig="{applicationSet:'fiori'}">
<viz:dataset>
<vizData:FlattenedDataset data="{/DataSet}">
<vizData:dimensions>
<vizData:DimensionDefinition name="Currency" value="{Currency}"/>
</vizData:dimensions>
<vizData:measures>
<vizData:MeasureDefinition identity="idCost" name="{i18n>labelCost}" value="{Cost}" unit="{Currency}" />
<vizData:MeasureDefinition identity="idTurnover" name="{i18n>labelAccountBalance}" value="{Turnover}" unit="{Currency}" />
</vizData:measures>
</vizData:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<vizFeeds:FeedItem id='valueCost' uid="valueAxis" type="Measure" values='idCost'/>
<vizFeeds:FeedItem id='valueTurnover' uid="valueAxis" type="Measure" values='idTurnover'/>
<vizFeeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Currency"/>
</viz:feeds>
</viz:VizFrame>
This is the relevant part of the code in the controller:
plotArea: {
dataLabel: {
visible: false
},
dataPointStyle: {
"rules":
[
{
"dataContext": {"idTurnover": {"min": 0}},
"properties": {
"color":"sapUiChartPaletteSemanticBad"
},
"displayName":"Loss"
},
{
"dataContext": {"idTurnover": {"max": 0}},
"properties": {
"color":"sapUiChartPaletteSemanticGood"
},
"displayName":"Profit"
}
],
"others":
{
"properties": {
"color": "sapUiChartPaletteSequentialHue1"
},
"displayName":"Cost"
}
}
},
With this code, the Cost bar is always the same color, the turnover bar is red when turnover is less then 0 and green when more then 0. But in stead of comparing the value with 0, I want to compare it to the Cost bar. If Turnover >= Cost, color is sapUiChartPaletteSemanticGood, if Turnover < Cost, color is sapUiChartPaletteSemanticBad. How can these 2 values be compared?
Instead of dataContext you need to use callback to perform comparison between two properties.
Sample Code is as follows :-
dataPointStyle: {
rules: [{
callback: function (oContext, extData) {
/* I can access my Turnover value by using :- */
//oContext.Turnover
/* I can access my Cost value by using :- */
//extData.Cost
//Return either true or false, based on your logic,
return oContext.Turnover < extData.Cost;
},
properties: {
color: "sapUiChartPaletteSemanticBad"
},
displayName: "Loss"
},
{
callback: function (oContext, extData) {
return oContext.Turnover >= extData.Cost;
},
properties: {
color: "sapUiChartPaletteSemanticGood"
},
displayName: "Profit"
}],
others: {
properties: {
color: "sapUiChartPaletteSequentialHue1",
},
displayName: "Cost"
}
}
vizframe used to replicate the issue:-
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='column'>
<viz:dataset>
<viz.data:FlattenedDataset data="{/milk}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Week" value="{Week}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Turnover" value="{Turnover}"/>
<viz.data:MeasureDefinition name="Cost" value="{Cost}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed1' uid="valueAxis" type="Measure" values="Turnover"/>
<viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure" values="Cost"/>
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Week"/>
</viz:feeds>
</viz:VizFrame>

How do I achieve the same thing with sap.m.CustomListItem in JS View?

I would like to list down all the information like in the sap.m.ObjectListItem but with sap.m.CustomListItem, see the screenshot attached. How do I achieve that? any working example?
This is what I have done so far, still a long way to go:
var oListTemplate = new sap.m.CustomListItem({
content: [
new sap.m.VBox({
items: [
new sap.m.Text({
text: "{nct_id}"
}),
new sap.m.HBox({
justifyContent: "SpaceBetween",
items: [
new sap.m.Label({
textAlign: sap.ui.core.TextAlign.Left,
text: "{title}",
}).addStyleClass("Text_Big font_bold"),
new sap.m.FormattedText({
textAlign: sap.ui.core.TextAlign.Right,
htmlText: "{condition_summary}"
}),
]
}).addStyleClass("sapUiTinyMargin")
]
}).addStyleClass("sapUiTinyMargin"),
],
type: sap.m.ListType.Active,
press: function() {
alert("Clicked the list item");
}
Here is what you are looking for, hope this help you.
As #Erch suggested better to use XML view.
JS
var oListTemplate = new sap.m.CustomListItem({
content: [
new sap.m.HBox({
items: [
new sap.m.FlexBox({
items: [
new sap.m.VBox({
width: "80%",
items: [
new sap.m.ObjectIdentifier({ title: "", text: "", titleActive: "false" }),
new sap.m.Label({ text: "" }),
new sap.m.Label({ text: "" })
],
layoutData: new sap.m.FlexItemData({ growFactor: 3 })
})
new sap.m.VBox({
width: "100px",
items: [
new sap.m.Label({ text: "" }),
new sap.m.Label({ text: "" }),
new sap.m.ObjectStatus({ text: "", state: "Success" })
],
layoutData: new sap.m.FlexItemData({ growFactor: 1 })
})
],
width: "100%",
alignItems: "Start"
})
],
width: "100%",
fitContainer: "true"
}).addStyleClass("sapUiTinyMargin"),
],
type: sap.m.ListType.Active,
press: function() {
alert("Clicked the list item");
})
}
XML
<List>
<items>
<CustomListItem>
<HBox width="100%" fitContainer="true">
<FlexBox width="100%" alignItems="Start" class="sapUiTinyMargin">
<items>
<VBox width="80%">
<ObjectIdentifier title="" text="" titleActive="false" />
<Label text="" />
<Label text="" />
<layoutData>
<FlexItemData growFactor="3" />
</layoutData>
</VBox>
<VBox width="100px" class="sapUiTinyMarginBegin">
<items>
<Label text="" />
<Label text="" />
<ObjectStatus text="Product Shipped" state="Success" />
</items>
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</VBox>
</items>
</FlexBox>
</HBox>
</CustomListItem>
</items>
</List>

SAPUI5 Fiori Smart Table and Other Controls in Same Page

I would like to know that, can I have a Smart Table (With Smart Filter Bar) along with other Fiori controls such as Planning Calendar, Grant Chart or Another Responsive Table within the same page.
Since Page which contains a Smart Table must contain the table's oData service in the page default model, can we have custom UI codes & models for other controls .
Sample Screen
I don't see why that could be a problem. I created a quick UI5 application with both a sap.ui.comp.smarttable.SmartTable and a sap.m.PlanningCalendar.
Btw, I started off with the first Smart Table sample.
Hope this helps.
View
<mvc:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable"
xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:unified="sap.ui.unified"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="sap.ui.comp.sample.smarttable.SmartTable"
height="100%">
<App>
<pages>
<Page title="Title">
<content>
<VBox fitContainer="false">
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="LineItemsSet" persistencyKey="SmartFilter_Explored"
basicSearchFieldName="Bukrs" enableBasicSearch="true">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="Bukrs">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="0001"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="Gjahr">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="2014"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartFilterBar:layoutData>
<FlexItemData shrinkFactor="0"/>
</smartFilterBar:layoutData>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="LineItemsSmartTable" entitySet="LineItemsSet" smartFilterId="smartFilterBar" tableType="Table"
useExportToExcel="true" beforeExport="onBeforeExport" useVariantManagement="false" useTablePersonalisation="true" header="Line Items"
showRowCount="true" persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true" app:useSmartField="true"
class="sapUiResponsiveContentPadding">
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartTable:layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</smartTable:layoutData>
</smartTable:SmartTable>
</VBox>
<PlanningCalendar id="PC1" rows="{path: '/people'}" appointmentsVisualization="Filled" groupAppointmentsMode="expanded"
appointmentsReducedHeight="true" appointmentSelect="onClickAssignment" showEmptyIntervalHeaders="false" viewChange="onStartDateChange"
startDateChange="onStartDateChange" rowSelectionChange="onResourceSelectedInCalendar" rowHeaderClick="onRowHeaderClick"
intervalSelect="onIntervalSelect" class="calendarMarginBottom">
<toolbarContent>
<Title text="Calendar" titleStyle="H4"/>
<ToolbarSpacer/>
</toolbarContent>
<rows>
<PlanningCalendarRow id="PCR1" icon="{pic}" title="{name}" text="{role}" key="{key}"
appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment id="MCA1" startDate="{start}" endDate="{end}" icon="{icon}" title="{title}" text="{info}" type="{type}"
tentative="{tentative}" hover="onAppointmentHover"/>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{icon}" title="{title}" type="{type}"></unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</content>
</Page>
</pages>
</App>
Controller
sap.ui.controller("sap.ui.comp.sample.smarttable.SmartTable", {
onInit: function() {
this.fillSmartTable();
this.fillCalendar();
},
//
// CALENDAR
//
fillCalendar: function() {
// create model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
startDate: new Date("2017", "0", "15", "8", "0"),
people: [{
pic: "sap-icon://employee",
name: "Max Mustermann",
role: "team member",
appointments: [{
start: new Date("2018", "6", "26", "08", "30"),
end: new Date("2018", "6", "26", "09", "30"),
title: "Meet John Miller",
type: "Type02",
tentative: false
},{
start: new Date("2018", "6", "26", "11", "30"),
end: new Date("2018", "6", "26", "13", "30"),
title: "New quarter",
type: "Type10",
tentative: false
}],
headers: [{
start: new Date("2018", "6", "26", "14", "30"),
end: new Date("2018", "6", "26", "16", "30"),
title: "Private",
type: "Type05"
}]
}]
});
this.byId("PC1").setModel(oModel);
},
handleAppointmentSelect: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment"),
sSelected;
if (oAppointment) {
sSelected = oAppointment.getSelected() ? "selected" : "deselected";
sap.m.MessageBox.show("'" + oAppointment.getTitle() + "' " + sSelected + ". \n Selected appointments: " + this.byId("PC1").getSelectedAppointments()
.length);
} else {
var aAppointments = oEvent.getParameter("appointments");
var sValue = aAppointments.length + " Appointments selected";
sap.m.MessageBox.show(sValue);
}
},
handleSelectionFinish: function(oEvent) {
var aSelectedKeys = oEvent.getSource().getSelectedKeys();
this.byId("PC1").setBuiltInViews(aSelectedKeys);
},
//
// SMART TABLE
//
fillSmartTable: function() {
var oModel, oView;
jQuery.sap.require("sap.ui.core.util.MockServer");
var oMockServer = new sap.ui.core.util.MockServer({
rootUri: "sapuicompsmarttable/"
});
this._oMockServer = oMockServer;
oMockServer.simulate("https://sapui5.hana.ondemand.com/test-resources/sap/ui/comp/demokit/sample/smarttable/mockserver/metadata.xml",
"https://sapui5.hana.ondemand.com/test-resources/sap/ui/comp/demokit/sample/smarttable/mockserver/");
oMockServer.start();
oModel = new sap.ui.model.odata.ODataModel("sapuicompsmarttable", true);
oModel.setCountSupported(false);
oView = this.getView();
oView.setModel(oModel);
},
onBeforeExport: function(oEvt) {
var mExcelSettings = oEvt.getParameter("exportSettings");
// GW export
if (mExcelSettings.url) {
return;
}
// For UI5 Client Export --> The settings contains sap.ui.export.SpreadSheet relevant settings that be used to modify the output of excel
// Disable Worker as Mockserver is used in explored --> Do not use this for real applications!
mExcelSettings.worker = false;
},
onExit: function() {
this._oMockServer.stop();
}
});

SAPUI5 onSearch() Filter update

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.

Data Not Visible in Second View

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;
});