如何在Salesforce上搭建一个全球疫情排行榜?
今天我们来尝试在Salesforce上搭建一个‘全球疫情全球疫情趋势列表(排行榜)’,方便一些企业特别是外企能够在Salesforce内实时查看全球疫情趋势。
效果
废话不多说,先来看看效果。主页君将其发布在Salesforce Community 上,大家可以看看
https://trailhead-cn-developer-edition.na112.force.com/s/covid-19-list-01
也可以直接放在Salesforce主页(Home Page)上,有了这个,一些跨国企业可以在Salesforce主页上展示给员工该列表,这样员工每一次登入Salesforce就可以直接查看不同国家的新增确诊案例。
然后我们具体来看看怎么做。
首先,我们的思路是,在Salesforce后台通过实时API拿到全球疫情数据,然后,通过LWC前端展现出来,并且利用官方的一些模块化组建如lightning-datatable,将数据展现给用户。
其次我们需要解决数据源的问题,如何拿到全球确诊准确实时的数据是非常关键。我们可以调用Postman的一个API,直接Get就可以了,API End Point为https://api.covid19api.com/summary
之后我们需要分析接口,拿到的数据是分到‘国家’,并且显示了‘新增确诊’,‘累积确诊’等数据,如美国的情况,我们可以将其直接转换到lightning-datatable的格式。
{
"Country": "United States of America",
"CountryCode": "US",
"Slug": "united-states",
"NewConfirmed": 32129,
"TotalConfirmed": 275582,
"NewDeaths": 1161,
"TotalDeaths": 7087,
"NewRecovered": 0,
"TotalRecovered": 0,
"Date": "2020-04-05T06:37:00Z"
}
关于API的其他参考资料,大家可以参考Postman的文档:
https://documenter.getpostman.com/view/10808728/SzS8rjbc?version=latest
然后我们可以在Apex Class,通过HttpRequest 调用其API。
public without sharing class Covid19TrackerController {
@AuraEnabled(continuation=true cacheable = true)
public static Map<String, Object> getCov19Data(){
Map<String, Object> results = new Map<String, Object> ();
Http http = new Http();
HttpRequest request = new HttpRequest();
request.setEndpoint('https://api.covid19api.com/summary');
request.setMethod('GET');
HttpResponse response = http.send(request);
// If the request is successful, parse the JSON response.
if (response.getStatusCode() == 200) {
// Deserialize the JSON string into collections of primitive data types.
results = (Map<String, Object>) JSON.deserializeUntyped(response.getBody());
}
return results;
}
}
关于Call out的文章,大家可以参考:https://trailhead.salesforce.com/en/content/learn/modules/apex_integration_services/apex_integration_rest_callouts
需要注意的是,这里需要把这个API放入Remote Site Setting 里面
然后新建一个LWC 的component,名字为 :covid19TrackerCompt
在covid19TrackerCompt.html利用lightning-datatable把数据展示出来
<template>
<template if:true={showSpinner}>
<lightning-layout class="slds-m-top_medium slds-m-bottom_small">
<lightning-spinner alternative-text="Loading"></lightning-spinner>
</lightning-layout>
</template>
<lightning-card title="新型冠状病毒全球排行榜" icon-name="standard:announcement">
<lightning-datatable
key-field="id"
data={data} show-row-number-column
columns={columns}
sorted-by={sortBy}
sorted-direction={sortDirection}
onsort={handleSortdata}
hide-checkbox-column=true>
</lightning-datatable>
</lightning-card>
<img src={FooterLogoUrl} style="display: block; margin: 0 auto;" >
</template>
关于lightning-datatable的官方帮助文档,大家可以参考
https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example
接下来,在 covid19TrackerCompt.js上,拿Covid19TrackerController里面的全球个案数据。注意,由于这里我们使用官方的lightning-datatable,所以是没有排序功能的,所以要自己写,可以参见 sortData(fieldname, direction),每一次点击‘新增确诊’,然后调用handleSortdata(event),从而实现datatable的排序功能。
同时,我们给每一个国家加上一个状态,如果这个国家没有死亡病例,那么就是绿色,有死亡病例就是红色,可以通过TotalDeaths 来判断。
import { LightningElement, track, api, wire } from 'lwc';
import getCovidData from '@salesforce/apexContinuation/Covid19TrackerController.getCov19Data';
import WechatPublicLogo_1 from '@salesforce/resourceUrl/WechatPublicLogo_1';
// Summary Table columns
const columns = [
{
label: '国家',
fieldName: 'Country',
type: 'text',
sortable: "true",
cellAttributes: { class: { fieldName: 'covidStatus' } }
}, {
label: '新增确诊',
fieldName: 'NewConfirmed',
type: 'number',
sortable: "true",
cellAttributes: { class: { fieldName: 'covidStatus' } }
}, {
label: '累积确诊',
fieldName: 'TotalConfirmed',
type: 'number',
sortable: "true",
cellAttributes: { class: { fieldName: 'covidStatus' } }
}, {
label: '新增死亡',
fieldName: 'NewDeaths',
type: 'number',
sortable: "true",
cellAttributes: { class: { fieldName: 'covidStatus' } }
}, {
label: '累积死亡',
fieldName: 'TotalDeaths',
type: 'number',
sortable: "true",
cellAttributes: { class: { fieldName: 'covidStatus' } }
}, {
label: '新增治愈',
fieldName: 'NewRecovered',
type: 'number',
sortable: "true",
cellAttributes: { class: { fieldName: 'covidStatus' } }
}, {
label: '累积治愈',
fieldName: 'TotalRecovered',
type: 'number',
sortable: "true",
cellAttributes: { class: { fieldName: 'covidStatus' } }
}
];
export default class Covid19TrackerCompt extends LightningElement {
// Expose the static resource URL for use in the template
FooterLogoUrl = WechatPublicLogo_1;
@track data = [];
@track showSpinner = true;
@track Initialized = false;
@track columns = columns;
@track sortDirection;
@track sortBy;
//connectedCallback() { }
renderedCallback() {
console.log('enter renderedCallback');
getCovidData().then(data => {
if (this.Initialized) {
return;
}
this.Initialized = true;
console.log('***getCovidData1.0 **');
console.log(data.Global);
this.data = [];
for (let i = 0; i < data.Countries.length; i++) {
let covidStatusVal = 'slds-text-color_success';
if (data.Countries[i].TotalDeaths > 0) {
covidStatusVal = 'slds-text-color_error'; //error color code to display if total deaths > 0
}
var row = {
id: data.Countries[i].Country,
Country: data.Countries[i].Country,
NewConfirmed: data.Countries[i].NewConfirmed,
TotalConfirmed: data.Countries[i].TotalConfirmed,
NewDeaths: data.Countries[i].NewDeaths,
TotalDeaths: data.Countries[i].TotalDeaths,
NewRecovered: data.Countries[i].NewRecovered,
TotalRecovered: data.Countries[i].TotalRecovered,
covidStatus: covidStatusVal
}
//console.log(row);
this.data.push(row);
}
console.log('Done');
this.showSpinner = false;
this.sortData('NewConfirmed', 'desc');
}).catch(error => {
console.log(' ** error ** ');
console.log(error);
});
}
//sorting methods
handleSortdata(event) {
this.showSpinner = true;
// field name
this.sortBy = event.detail.fieldName;
// sort direction
this.sortDirection = event.detail.sortDirection;
console.log('fieldName : '+event.detail.fieldName + ' sortDirection : ' + event.detail.sortDirection);
// calling sortdata function to sort the data based on direction and selected field
this.sortData(event.detail.fieldName, event.detail.sortDirection);
}
sortData(fieldname, direction) {
// serialize the data before calling sort function
let parseData = JSON.parse(JSON.stringify(this.data));
// Return the value stored in the field
let keyValue = (a) => {
return a[fieldname];
};
// cheking reverse direction
let isReverse = direction === 'asc' ? 1 : -1;
// sorting data
parseData.sort((x, y) => {
x = keyValue(x) ? keyValue(x) : ''; // handling null values
y = keyValue(y) ? keyValue(y) : '';
// sorting values based on direction
return isReverse * ((x > y) - (y > x));
});
// set the sorted data to data table data
this.data = parseData;
this.showSpinner = false;
}
}
最后,covid19TrackerCompt.js-meta.xml写为:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="urn:metadata.tooling.soap.sforce.com" fqn="covid19TrackerCompt">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
</LightningComponentBundle>
怎么样,要不你也试试?
上一篇: re学习笔记(61)2020网鼎杯-青龙组-Re部分WP
下一篇: 网鼎杯朱雀组逆向 tree