Creating grid cards

Edit online

A grid card displays different points of data in a grid format. You can use this card to highlight specific data.

About this task

The anatomy of a grid card is as follows:

Tooltip: A tooltip provides extra details about the data that is displayed on the card.
Card title: A unique label or heading assigned to the card.
Value label: A unique label assigned to the values that are derived by a query.
Footer link: A clickable field or link with a label, for example, View all.

You can use the Card builder to create a grid card.

Procedure

From the navigation menu, click Card builder.
Click New card.

On the General tab, define the card:

Assign a name to the card.
The card is referred to by its name in the card library.
Select the card type.
Select Grid.

On the Data tab, add data to the card:

Optional: You can use source editor to configure the size, header, footer, and data displayed on your card. To edit the card source, click Edit source icon.
Source editor allows you to copy the card's data and style configurations that you can duplicate for other cards.

Note: Any modifications made to this code overwrite the configurations made on the Style and Data tabs of the card editor.
Add a GraphQL query to retrieve the data.
Click Add and write a query similar to the query in the example. For more information, see Adding queries to cards.
Define any variables that you are using in the query.
In the QUERY VARIABLES field, define the variables in JSON format by using format that is similar to the code in the example.
Run the query.
Verify that data is returned for the query.
Click the Transform tab, add code to transform the data for visualization on a grid card.
Use code similar to the example or use the default transform.
Click Done.
Add the values from the data that was returned by the query to the card.
Click Add and select the data fields to display on the card.
1. Click the Edit and add label for the selected value.
2. Select the template from the available list.
  Following templates are available for selection:
- Text: Displays the selected value in text format.
- Percent: Displays the selected value in percentage.
- Number: Displays the selected value in integer format.
- Date: Displays the selected value in date format.
- Link: Creates a detailed page link for the selected value. If selected, add page ID and click Add variable to pass variables to the page to load the information on the page.
  Instead of adding a page ID, you can also select a page from the library. To select a page, click Select from library. Alternatively, you can add an external link. When clicked, this link opens in a new tab.

On the Style tab, define the style of the card:

In Dimensions, increase the width and height of the card.
In Header, add a title to the card and optionally add a tooltip.
Expand Footer and set Footer link to on and assign a label and enter a page ID.

You can add a page ID in the field or you can select a page from the library. To select a page, click Select from libaray. Alternatively, you can add an external link to the footer. When clicked, this link opens in a new tab.

Note: Some pages are flagged with This page requires context. warning. That means these pages require context variables to render content correctly on the page and these variables are missing in the page context. To add page context variables, see Configuring page context variables.

After you select the page, you can add template variables to make the page content dynamic. That means you can use the same page multiple times with customized content according to the variables.
Click Save.

Example

For a grid card, any attribute that is returned by a query can be displayed. The query includes a tenantId variable.

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
        }
      }
    }
  }
}

The following code is an example of how to define the variables to use in the query.


{
  "tenantId": "{{ tenantId }}",
  "orderId": "fa15029f-9ef8-432f-93de-1e48fd8bcda3"
}

The following code is an example of the data that is returned by the query.

{
	"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
}

The following code is an example of the transformation that is applied to the data. The attributes that are chosen must match what is returned from the data. Any calculation can be performed on the data that is returned. In the following example, some checks are done to modify what is shown in the Customer and Supplier fields.


{
	"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}}": "--"
				}
			]
		}
	}
}

What to do next

Add the card to a page by using the Page builder.