I try to make bar chart but become this Message:
No Data.
I have home page called Overview, includes table when I click on product I go to Detail view ,I see everything but not bar chart. Maybe you can help.Other question please how can add many years and many sales to show bar chart with more details, should I make array in model.json file? note: model.json file locates direct in webapp folder.
Kind regards
Mahmood
<?xml version="1.0"?>
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:smartform="sap.ui.comp.smartform" xmlns="sap.m" xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" height="100%" controllerName="com.volkswagen.ifdb.cc.sopraempApplication.controller.Detail" xmlns:tnt="sap.tnt"
xmlns:l="sap.ui.layout" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds">
<!--viz visualization-->
<!-- <ObjectPageHeaderContent>
<content>
<l:VerticalLayout>
<ObjectStatus title="product ID" text="{ProductCollection>ProductId}"/>
<ObjectStatus title="Name" text="{ProductCollection>Name}"/>
</l:VerticalLayout>
<Text width="200px" text="{ProductCollection>Description}"/>
</content>
</ObjectPageHeaderContent>-->
<!---->
<App id="app">
<Page title=" PRODUCT DETAIL" id="page" navButtonPress="onNavButton" showNavButton="true">
<content>
<!-- The curly braces '{}' indicate data binding
intro introductory Text of the object header
The "formatOptions" specify that the measure (currency code) should not be displayed. -->
<ObjectHeader title="{Name}" id="oh1" responsive="true" icon="{ProductPicUrl}" iconDensityAware="false" intro="{Description}"
number="{ parts:[{path:'Price'},{path:'CurrencyCode'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }"
numberUnit="{CurrencyCode}" numberState="Success" backgroundDesign="Translucent" class="sapUiResponsivePadding--header">
<!--<FlexBox fitContainer="true">
<Avatar src="{ProductPicUrl}" backgroundColor="Random" class="sapUiTinyMarginEnd"/>
</FlexBox>-->
<!--<Avatar src="{ProductPicUrl}" displaySize="L" displayShape="Square" class="sapUiTinyMarginEnd"/>-->
<!-- "Error" (reddish)
"Warning" (orangish)
"Success" (greenish)
"Information" (blueish / highlighting, since v1.60.1)-->
<statuses>
<ObjectStatus state="{= ${Status} === 'In Stock' ? 'Success' : undefined}" text="Status: {Status}" class="sapUiResponsivePadding--header"/>
</statuses>
<headerContainer>
<IconTabBar upperCase="true">
<items>
<IconTabFilter text="Product Information">
<!-- <VBox> tag is an XML element used to define a vertical box layout container.
It allows you to organize and arrange UI elements vertically, stacking them on top of each other.-->
<!--<SimpleForm> tag is an XML element used to define a simple form layout container.
It provides a structured way to display and arrange form controls,
labels, and fields in a compact and responsive manner.-->
<!-- columnsM="1" : These attributes specify the number of columns in the form layout for different screen sizes.
In this case, the form will have one column for all screen sizes (M, L, and XL).-->
<!-- emptySpanS="0" These attributes define the number of empty cells (span) to be rendered
for spacing purposes in the form layout. The numbers indicate the number of cells to span for different screen sizes. In this case,
four empty cells will be rendered for M, L,
and XL screen sizes, while no empty cells will be rendered for the S screen size.-->
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormDisplay354" singleContainerFullSize="false" columnsM="2" columnsL="2" columnsXL="1" emptySpanS="0"
emptySpanM="4" emptySpanL="4" emptySpanXL="4" adjustLabelSpan="false" labelSpanS="12" labelSpanM="3" labelSpanL="3" labelSpanXL="3"
layout="ResponsiveGridLayout" editable="false">
<f:content>
<!-- <Image height="10rem" class="sapUiSmallMarginBegin" src="{ProductPicUrl}"/>-->
<Label text="Product ID"/>
<Text id="nameText" text="{ProductId}"/>
<Label text="Name"/>
<Text text="{Name}"/>
<Label text="SupplierName"/>
<Text text="{SupplierName} "/>
<Label text="Category"/>
<Text id="countryText" text="{Category}"/>
<Label text="Quantity"/>
<Text text="{Quantity} "/>
<Label text="DateOfProduction"/>
<Text text="{DateOfProduction} "/>
<Label text="Price"/>
<Text text="{Price} {CurrencyCode}"/>
</f:content>
</f:SimpleForm>
</VBox>
</IconTabFilter>
<IconTabFilter text="Supplier Information">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormDisplay480_Trial" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="4" labelSpanM="4"
labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0" columnsXL="3" columnsL="2" columnsM="2"
singleContainerFullSize="false">
<f:content>
<core:Title text="Adress"/>
<Label text="Name"/>
<Text text="{SupplierName}"/>
<Label text="Street/No."/>
<Text text="{Street} {HouseNumber}"/>
<Label text="ZIP Code/City"/>
<Text text="{ZIPCode} {City}"/>
<Label text="Country"/>
<Text text="{Country}"/>
<core:Title text="Contact"/>
<Label text="Web"/>
<Link text="{SupplierName}" target="_blank" href="{SupplierWebsite}"/>
<Label text="Twitter"/>
<Text text="{Twitter}"/>
<Label text="Email"/>
<Text text="{Email}"/>
<Label text="Tel."/>
<Text text="{Telephone}"/>
<Label text="Mobile"/>
<Text text="{Mobile}"/>
</f:content>
</f:SimpleForm>
</VBox>
</IconTabFilter>
<IconTabFilter text="Chart" >
<VBox>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet : 'fiori'}" width="100%" height="100%" vizType="bar">
<viz:dataset>
<viz.data:FlattenedDataset data="{ProductCollection>/}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Year" values="{ProductCollection>Year}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Sales" values="{ProductCollection>Sales}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values ="Year" />
<viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Sales"/>
</viz:feeds>
</viz:VizFrame>
</VBox>
</IconTabFilter>
</items>
</IconTabBar>
</headerContainer>
</ObjectHeader>
</content>
</Page>
</App>
</mvc:View><br>
//sap.ui.define is a function used for module definition. It allows to define dependencies and
//specify the callback function that will be executed when all dependencies are loaded.
sap.ui.define([
//These dependencies are specified. They will be loaded and passed as arguments to the callback function.
"sap/ui/core/mvc/Controller",
//navButtonPress
"sap/ui/core/routing/History"
//are the arguments of the callback function, representing the loaded modules.
], function(Controller, History) {
"use strict";
return Controller.extend("com.volkswagen.ifdb.cc.sopraempApplication.controller.Detail", {
//initialization function of the controller.
onInit: function() {
this.oRouter = this.getOwnerComponent().getRouter();
this.oRouter.getRoute("detail").attachPatternMatched(this.RouteFunction, this);
//Check the data in the console
/* var oModel = this.getView().getModel("ProductCollection");
console.log(oModel.getData());*/
//access JSON Model (min manifest file) in controller
/* var oModel = this.getOwnerComponent().getModel("mproduct");
this.getView().setModel(oModel, "mproduct");*/
},
//is the event handler function for the "patternMatched" event. It retrieves the ProductId from the event parameters and constructs a binding path.
//It then binds the view to the element at the specified path.
RouteFunction: function(oEvent) {
var path = oEvent.getParameter("arguments").ProductId;
var Fpath = '/ProductCollection/' + path;
this.getView().bindElement({
path: Fpath
});
},
//navButtonPress, navTo Start Page
onNavButton: function(oEvent) {
var oHistory, sPreviousHash;
oHistory = History.getInstance();
sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getRouter().navTo("Overview", {}, true);
}
}
});
});
{
"ProductCollection": [{
"ProductId": "1239102",
"Name": "BMW20",
"Category": "EA",
"SupplierName": "BMW",
"Status": "In Stock",
"Quantity": "10",
"DateOfProduction": "2017-03-26",
"CurrencyCode": "EUR",
"Price": "9700",
"Description": "Durchstöbern Sie 11.679 bmw Stock-Fotografie und Bilder. Oder starten Sie eine neue Suche, um noch mehr Stock-Fotografie und Bilder zu entdecke",
"ProductPicUrl": "https://images.pexels.com/photos/3689532/pexels-photo-3689532.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
"SupplierWebsite": "https://www.bmw.com/de/index.html",
"Street": "Berlinerstraße",
"HouseNumber": "29",
"ZIPCode": "45873",
"City": "Siegen",
"Country": "Germany",
"Twitter": "@BMW",
"Email": "bmw.service@web.de",
"Telephone": "01254789666",
"Mobile": "+49535874521",
"Year": "2012",
"Sales": "200"
}, {
"ProductId": "1239103",
"Name": "VW",
"Category": "Benzen",
"SupplierName": "VW",
"Status": "Out Of Stuck",
<br>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.