Skip to Content
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 “

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

11 Comments
You must be Logged on to comment or reply to a post.