Technical Articles
Covid-19/ Novel Coronavirus Report Application SAP FIORI (Cloud Platform)…
“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 “
Very good Virendra Kumar Soni
Thank You
Good Job Virendra Kumar Soni keep it up .
Thank You
Very good blog . Congrats for your efforts
Thank You ....
Hi Virendra Kumar Soni,
I have developed SAPUI5 HTML5 Application. Deployed into HCP.
How to make this url as public.
When run my app url its asking username and password for others.
Pl help me.
Thanks.
you have to add below code in neo app .json
"authenticationMethod": "none",
Thank u blog and additional information 🙂
Hi Virendra Kumar,
It's worked fine. Thanks.
Hi Virendra Kumar...
Nice work. I am trying to repeat but seems like the view/controller given is partial and getting syntax and controls loading problem. I have added few UI5 control resources to View and Controller file but still not succeeded. Could you please share your project zip file to muttam.abap@gmail.com?
Thanks.
Hi Virendra,
This is a great work. But i'm not getting the values can you able to send the zip file to me please. my mail id: iamcharan@outlook.in