“Make Social Distance , Wash your hand , Use masks and stay safe”
My Application URL : https://covid19-p1941643265trial.dispatcher.hanatrial.ondemand.com/index.html?hc_reset
Objective :
To display Covid-19/ Novel Corona virus live Report in SAP FIORI application which is deployed and publish in SAP Cloud Platform.
Covid-19/ Novel Corona virus :
Coronavirus disease (COVID-19) is an infectious disease caused by a new virus.
The disease causes respiratory illness (like the flu) with symptoms such as a cough, fever, and in more severe cases, difficulty breathing. You can protect yourself by washing your hands frequently, avoiding touching your face, and avoiding close contact (1 meter or 3 feet) with people who are unwell.
Reference : LInk
How to get Real-time Data from API :
I am getting all data from the below URL . you just need to create local JSON model and bind with table and charts.
URL : https://coronavirus-19-api.herokuapp.com/
How to develop application :
In WEBIDE create simple SAP UI5 application as below:
my XML Code : main.view.xml
//for Table
<Table id="idProductsTable" inset="false" items="{allCountries>/}">
<headerToolbar>
<OverflowToolbar>
<content>
<SearchField width="100%" placeholder="Search by Country" liveChange=".onSearch"/>
</content>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Country"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Cases"/>
</Column>
<Column minScreenWidth="50px" demandPopin="true" hAlign="Initial">
<Text text="Today Cases"/>
</Column>
<Column minScreenWidth="200px" demandPopin="true" hAlign="Begin">
<Text text="Total Deaths"/>
</Column>
<Column minScreenWidth="400px" demandPopin="true" hAlign="End">
<Text text="Today Deaths"/>
</Column>
<Column minScreenWidth="600px" demandPopin="true" hAlign="End">
<Text text="Recovered"/>
</Column>
<Column minScreenWidth="800px" demandPopin="true" hAlign="Left">
<Text text="Active"/>
</Column>
<Column minScreenWidth="1000px" demandPopin="true" hAlign="End">
<Text text="Critical Cases"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{allCountries>country}"/>
<Text text="{allCountries>cases}"/>
<Text text="{allCountries>todayCases}"/>
<ObjectNumber number="{allCountries>deaths}" state="{ path: 'allCountries>deaths', formatter: '.formatter.deaths' }"/>
<Text text="{allCountries>todayDeaths}"/>
<Text text="{allCountries>recovered}"/>
<Text text="{allCountries>active}"/>
<Text text="{allCountries>critical}"/>
</cells>
</ColumnListItem>
</items>
</Table>// for Chart
<viz:VizFrame id="idVizFrame1" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='column'>
<viz:dataset>
<viz.data:FlattenedDataset data="{allCountries>/}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="country" value="{allCountries>country}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="cases" value="{allCountries>cases}"/>
<viz.data:MeasureDefinition name="deaths" value="{allCountries>deaths}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="deaths"/>
<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="country"/>
</viz:feeds>
</viz:VizFrame>My Controller code: main.controller.js
//creating api model to get data
onInit: function () {
var oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setVizProperties({
title: {
visible: true,
text: 'Number of Cases by Countries'
}
});
InitPageUtil.initPageSettings(this.getView());
var oPopOver = this.getView().byId("idPopOver");
oPopOver.connect(oVizFrame.getVizUid());
var oVizFrame1 = this.oVizFrame1 = this.getView().byId("idVizFrame1");
oVizFrame1.setVizProperties({
title: {
visible: true,
text: 'Number of Deaths by Countries'
}
});
var oPopOver = this.getView().byId("idPopOver1");
oPopOver.connect(oVizFrame1.getVizUid());
// oPopOver.setFormatString(formatPattern.STANDARDFLOAT);
BarInit.initPageSettings(this.getView());
var sUrl = "https://coronavirus-19-api.herokuapp.com/countries";
var oModel = new sap.ui.model.json.JSONModel(sUrl);
this.getView().setModel(oModel, "allCountries");
var aUrl = "https://coronavirus-19-api.herokuapp.com/all";
var aModel = new sap.ui.model.json.JSONModel(aUrl);
this.getView().setModel(aModel, "oCountries");
var Url = "https://coronavirus-19-api.herokuapp.com/";
var sModel = new sap.ui.model.json.JSONModel(aUrl);
this.getView().setModel(sModel, "oAll");
},
// for search by country
onSearch: function (evt) {
// add filter for search
var aFilters = [];
var sQuery = evt.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter = new Filter("country", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
// update list binding
var oTable = this.byId("idProductsTable");
var oBinding = oTable.getBinding("items");
oBinding.filter(aFilters, "Application");
}Deploy in SAP Cloud Platform:
Right click of the WEBIDE project and select deploy in sap cloud platform.
.
Register deployed application and assign Site (catalog , group and role ) and generate URL.
my application URL : https://covid19-p1941643265trial.dispatcher.hanatrial.ondemand.com/index.html?hc_reset
“Now its completed “
“Make Social Distance , Wash your hand , Use masks and stay safe”
Original Article:
https://blogs.sap.com/2020/03/27/covid-19-novel-coronavirus-report-application-sap-fiori-cloud-platform…/