그리드 카드 작성
격자 카드는 격자 형식으로 다른 데이터 점을 표시합니다. 이 카드를 사용하여 특정 데이터를 강조표시할 수 있습니다.
이 태스크에 대한 정보
- 도구팁
- 도구 팁은 카드에 표시되는 데이터에 대한 추가 세부사항을 제공합니다.
- 카드 제목
- 카드에 지정된 고유 레이블 또는 표제입니다.
- 값 레이블
- 조회에서 파생된 값에 지정된 고유 레이블입니다.
- 푸터 링크
- 레이블이 있는 클릭 가능한 필드 또는 링크입니다 (예:
View all).
프로시저
일반 탭에서 카드를 정의하십시오.
데이터 탭에서 카드에 데이터를 추가하십시오.
스타일 탭에서 카드의 스타일을 정의하십시오.
예
그리드 카드의 경우 조회에서 리턴되는 모든 속성을 표시할 수 있습니다. 조회에 tenantId 변수가 포함되어 있습니다.
query OrderDetail($tenantId: String, $orderId: String) {
orderDetails: businessObjects(
hint: {viewId: "graph"}
simpleFilter: {tenantId: $tenantId, type: Order}
advancedFilter: {AND: [{EQUALS: [{SELECT: "orderType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, {EQUALS: [{SELECT: "id", type: STRING}, {VALUE: $orderId, type: STRING}]}]}
) {
edges {
object {
... on Order {
orderIdentifier
buyer {
id
name
organizationIdentifier
}
vendor {
id
name
organizationIdentifier
}
shipFromInstructionLocation {
locationName
locationIdentifier
}
shipToLocation {
locationName
locationIdentifier
}
orderType
orderStatus
deliveryStatusByDate
shipmentStatusByDate
createdDate
requestedShipDate
plannedShipDate
lineCount
requestedDeliveryDate
quantity
plannedDeliveryDelay
estimatedDeliveryDelay
quantityUnits
totalValue
actualDeliveredDelay
orderValueCurrency
requestedShipDate
sourceLink
totalShippedQuantity
actualShipDelay
}
}
}
}
}
{
"tenantId": "{{ tenantId }}",
"orderId": "fa15029f-9ef8-432f-93de-1e48fd8bcda3"
}
다음 코드는 쿼리에서 리턴되는 데이터의 예입니다.
{
"data": {
"orderDetails": {
"edges": [
{
"object": {
"orderIdentifier": "1000567497",
"buyer": {
"id": "d2eb6aaf-6951-463d-9072-2963bb251123",
"name": "LightTree",
"organizationIdentifier": "LightTree",
"__typename": "Organization"
},
"vendor": {
"id": "2c50b311-ffb7-48d4-9194-c6dbab6b5dbc",
"name": "Interalloy Corporation",
"organizationIdentifier": "Interalloy",
"__typename": "Organization"
},
"shipFromInstructionLocation": {
"locationName": "Interalloy Corporation - Bozeman",
"locationIdentifier": "Interalloy - Bozeman",
"__typename": "Location"
},
"shipToLocation": {
"locationName": "LightTree Plant 1 Birmingham",
"locationIdentifier": "LT-1",
"__typename": "Location"
},
"orderType": "INBOUND",
"orderStatus": null,
"deliveryStatusByDate": "NOT_DELIVERED",
"shipmentStatusByDate": "FULLY_SHIPPED",
"createdDate": "2021-07-15T00:00:00.000Z",
"requestedShipDate": "2021-07-22T00:00:00.000Z",
"plannedShipDate": "2021-07-21T00:00:00.000Z",
"lineCount": 1,
"requestedDeliveryDate": "2021-07-26T00:00:00.000Z",
"quantity": 44,
"plannedDeliveryDelay": null,
"estimatedDeliveryDelay": -24,
"quantityUnits": "EA",
"totalValue": 132,
"actualDeliveredDelay": null,
"orderValueCurrency": "USD",
"sourceLink": "http://lighttree.com/1000567497",
"totalShippedQuantity": null,
"actualShipDelay": 48,
"__typename": "Order"
},
"__typename": "BusinessObjectEdge"
}
],
"__typename": "BusinessObjectsCursor"
}
},
"loading": false,
"networkStatus": 7
}다음 코드는 데이터에 적용되는 변환의 예입니다. 선택되는 속성은 데이터에서 리턴되는 속성과 일치해야 합니다. 리턴되는 데이터에 대해 모든 계산을 수행할 수 있습니다. 다음 예제에서는 Customer 및 Supplier 필드에 표시되는 내용을 수정하기 위해 일부 검사가 수행됩니다.
{
"errors": "{{#? this.errors}}",
"results": {
"{{#each data.orderDetails.edges}}": {
"orderIdentifier": "{{this.object.orderIdentifier}}",
"lineCount": "{{this.object.lineCount}}",
"quantityUnits": "{{this.object.quantityUnits}}",
"shipToLocation": "{{this.object.shipToLocation.locationName}}",
"estimatedDeliveryDelay": "{{this.object.estimatedDeliveryDelay}}",
"requestedDeliveryDate": "{{this.object.requestedDeliveryDate}}",
"orderType": "{{this.object.orderType}}",
"deliveryStatusByDate": "{{this.object.deliveryStatusByDate}}",
"totalValue": "{{this.object.totalValue}}",
"createdDate": "{{this.object.createdDate}}",
"actualDeliveredDelay": "{{this.object.actualDeliveredDelay}}",
"orderValueCurrency": "{{this.object.orderValueCurrency}}",
"requestedShipDate": "{{this.object.requestedShipDate}}",
"sourceLink": "{{this.object.sourceLink }}",
"quantity": "{{this.object.quantity }}",
"totalShippedQuantity": "{{this.object.totalShippedQuantity}}",
"actualShipDelay": "{{this.object.actualShipDelay}}",
"shipmentStatusByDate": "{{this.object.shipmentStatusByDate}}",
"plannedDeliveryDelay": "{{this.object.plannedDeliveryDelay}}",
"shipFromLocation": "{{this.object.shipFromInstructionLocation.locationName}}",
"customerId": "{{#? this.object.buyer.id }}",
"customerTemplateLink": "DEFAULT_CUSTOMER_DETAIL_LAYOUT_TEMPLATE",
"supplierTemplateLink": "DEFAULT_SUPPLIER_DETAIL_LAYOUT_TEMPLATE",
"supplierId": "{{#? this.object.vendor.id}}",
"Customer": [
{
"{{#if (this.object.buyer.organizationIdentifier && this.object.buyer.name)}}": "{{this.object.buyer.organizationIdentifier}}, {{this.object.buyer.name}}"
},
{
"{{#elseif this.object.buyer.organizationIdentifier}}": "{{this.object.buyer.organizationIdentifier}}"
},
{
"{{#elseif this.buyer.name}}": "{{this.object.buyer.name}}"
},
{
"{{#else}}": "--"
}
],
"Supplier": [
{
"{{#if (this.object.vendor.organizationIdentifier && this.object.vendor.name)}}": "{{this.object.vendor.organizationIdentifier}}, {{this.object.vendor.name}}"
},
{
"{{#elseif this.object.vendor.organizationIdentifier}}": "{{this.object.vendor.organizationIdentifier}}"
},
{
"{{#elseif this.object.vendor.name}}": "{{this.object.vendor.name}}"
},
{
"{{#else}}": "--"
}
]
}
}
}
다음에 수행할 작업
대시보드 빌더를 사용하여 대시보드에 카드를 추가하십시오.