Skip to Content
Technical Articles
Author's profile photo Virendra Kumar Soni

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”

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rohit Khan
      Rohit Khan

      Very good Virendra Kumar Soni

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Thank You

      Author's profile photo Sanurag Raghavan
      Sanurag Raghavan

      Good Job Virendra Kumar Soni keep it up .

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Thank You

      Author's profile photo veera P
      veera P

      Very good blog . Congrats for your efforts

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Thank You ....

      Author's profile photo Loganathan Chinnasamy
      Loganathan Chinnasamy

      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.

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      you have to add below code in neo app .json

       

      "authenticationMethod": "none",

      Author's profile photo Ertuğrul Pehlivan
      Ertuğrul Pehlivan

      Thank u blog and additional information 🙂

      Author's profile photo Loganathan Chinnasamy
      Loganathan Chinnasamy

      Hi Virendra Kumar,

      It's worked fine. Thanks.

       

      Author's profile photo Ramesh Muttamsetti
      Ramesh Muttamsetti

      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.

      Author's profile photo Charan Naidu
      Charan Naidu

      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