Covid-19/ Novel Coronavirus Report Application SAP FIORI (Cloud Platform)…

 “Make Social Distance , Wash your hand , Use masks and stay safe”


My Application URL :

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.
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>/}">
											<SearchField width="100%" placeholder="Search by Country" liveChange=".onSearch"/>
									<Column width="12em">
										<Text text="Country"/>
									<Column minScreenWidth="Tablet" demandPopin="true">
										<Text text="Cases"/>
									<Column minScreenWidth="50px" demandPopin="true" hAlign="Initial">
										<Text text="Today Cases"/>
									<Column minScreenWidth="200px" demandPopin="true" hAlign="Begin">
										<Text text="Total Deaths"/>
									<Column minScreenWidth="400px" demandPopin="true" hAlign="End">
										<Text text="Today Deaths"/>
									<Column minScreenWidth="600px" demandPopin="true" hAlign="End">
										<Text text="Recovered"/>
									<Column minScreenWidth="800px" demandPopin="true" hAlign="Left">
										<Text text="Active"/>
									<Column minScreenWidth="1000px" demandPopin="true" hAlign="End">
										<Text text="Critical Cases"/>
											<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}"/>
// for Chart

<viz:VizFrame id="idVizFrame1" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='column'>
										< data="{allCountries>/}">
												< name="country" value="{allCountries>country}"/>
												< name="cases" value="{allCountries>cases}"/>
												< name="deaths" value="{allCountries>deaths}"/>
										<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="deaths"/>
										<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="country"/>

My Controller code: main.controller.js

//creating api model to get data 

onInit: function () {

			var oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");
				title: {
					visible: true,
					text: 'Number of Cases by Countries'
			var oPopOver = this.getView().byId("idPopOver");

			var oVizFrame1 = this.oVizFrame1 = this.getView().byId("idVizFrame1");
				title: {
					visible: true,
					text: 'Number of Deaths by Countries'
			var oPopOver = this.getView().byId("idPopOver1");
			// oPopOver.setFormatString(formatPattern.STANDARDFLOAT);


			var sUrl = "";
			var oModel = new sap.ui.model.json.JSONModel(sUrl);
			this.getView().setModel(oModel, "allCountries");
			var aUrl = "";
			var aModel = new sap.ui.model.json.JSONModel(aUrl);
			this.getView().setModel(aModel, "oCountries");
			var Url = "";
			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);

			// 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 :

“Now its completed “

 “Make Social Distance , Wash your hand , Use masks and stay safe”

Original Article:…/

Related blogs


Please enter your comment!
Please enter your name here