Creating table cards

Edit online
A table card displays a large amount of data in a table format. You can use the table card when you want to display a large set of data attributes in one place, and you can link to detail pages.

About this task

The following diagram shows the anatomy of a table card.
Example of the Supply inventory approaching out of stock table card
Card title
A unique label or heading that is assigned to the card.
Total results count
The value of the total count field that can be configured as a link to another page.
Column label
Header text that is assigned for each column.
Fixed last row
The row of the table that remains at the bottom of the table even when the user scrolls up or down. For more information, see Enabling the last row of the table card to be a fixed row.
Horizontal scroll
Allows the table to scroll horizontally to show overflowing columns.
Card tooltip
A tooltip that provides extra details about the data that is displayed on the card.
Header group
A collection of column headers that are grouped together under a single overarching header. For more information, see Creating multilevel header groups.
Header text wrapping and truncation
Wrapping moves the text at the end of a line to a new line to keep the text within a preset space. Truncation shortens the text by cutting it off. For more information, see Enabling header text wrapping and truncation in tables.
Footer link
A clickable field or link with a label, for example, View all.
You can use the Card builder to create a table card.

Procedure

  1. From the navigation menu, click Card builder.
    Selecting Card library > My cards displays your organization's cards, if any exist. The Samples tab displays the samples that you can copy and modify.
  2. To create a card, on the My cards tab, click New card.
    The Card builder page is displayed.
  3. On the General tab, enter the following data.
    1. In the Metadata section, add the following fields:
      • Card name
      • Card ID
      • Description
    2. In the Properties section, select the Type.
      For example, Table
  4. On the Data tab, add data to the card:
    1. In the Queries section, click Add to add a query or query groups to populate the card's data.
    2. Click Code editor and in the Query field, write a query that is similar to the query in the example. For more information, see Adding queries to cards.
      You can also define a query on the Define query page.
    3. In the QUERY VARIABLES field, define the variables in JSON format by using a format that is similar to the code in the example.
    4. Run the query.
    5. Verify that the data that is returned for the query is similar to the data in the example.
    6. On the Transform tab, write code that is similar to the example or use the default transform for visualization on the card.
    7. Click Done.
    8. Expand Columns and click add.
    9. Select the required fields and click Done.
    10. Optional: To add a header label, header group, cell value, and template, select a column, click the Overflow menu icon, and then click Edit. To learn more about creating header groups, see Creating multilevel header groups.
      The following templates are available:
      Text
      To show values in the text format.
      Percent
      To show the values in the percentage format.
      Number
      To show values in the number format.
      Date
      To format the date values.
      Link
      Creates a detailed page link for the selected value. If selected, add the 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.

  5. On the Style tab, add styling to the card:
    1. Expand Dimensions and change the width and height of the card.
    2. Optional: To override the card height to better fit the content of the card, set Resize to content to on.
    3. Expand Header and in the Card title field, add the title to display it on the card.
    4. Optional: To show the card description in an icon tooltip with the title, set Description tooltip to on.
    5. Optional: To show the total count with the title and configure the count as a link, set Total results count to on and click Configure link.

      You can select a page or use a page ID. Alternatively, you can add an external link. When clicked, this link opens in a new tab.

    6. Optional: To enable pagination, set Pagination to on.
    7. 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.

    8. Optional: Expand Behavior and set Horizontal scroll to on.
      Horizontal scroll allows the table to scroll horizontally to show overflowing columns.
  6. Click Save.

Example

The following query retrieves the supply inventory that is approaching out of stock. The query includes tenantId, locationFilter, and categoryFilter variables.

For a table card, any attribute that is returned by a query can be displayed.

query supplyInventoryApproachingOutOfStock($tenantId: String, $locationFilter: BooleanExp = {CONSTANT_VALUE: true}, $categoryFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  supplyInventoryApproachingOutOfStock: businessObjects(
    hint: {viewId: "graph"}
    simpleFilter: {type: Inventory, tenantId: $tenantId}
    advancedFilter: {AND: [{GREATER_THAN: [{SELECT: "quantityBelowLowerThreshold", type: FLOAT}, {VALUE: "0.0", type: FLOAT}]}, {GREATER_THAN: [{SELECT: "quantity", type: INT}, {type: INT, VALUE: "0"}]}, {EQUALS: [{SELECT: "inventoryType", type: STRING}, {VALUE: "ITEM", type: STRING}]}, $locationFilter, $categoryFilter]}
    cursorParams: {sort: {fieldPath: "quantityBelowLowerThreshold", order: DESC}, first: 8}
  ) {
    totalCount
    edges {
      cursor
      object {
        ... on Inventory {
          id
          inventoryParentType
          quantityBelowLowerThreshold
          quantity
          product {
            id
            partNumber
            name
            category {
              id
              name
            }
          }
          location {
            id
            locationName
            locationIdentifier
          }
        }
      }
    }
  }
}

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


{
  "tenantId": "{{ tenantId }}",
  "locationFilter": "{\"EQUALS_ANY\": [{\"SELECT\": \"location.id\", \"type\": \"STRING\"},{\"VALUES\": {{ supply.appliedFilters.Location.ids }}, \"type\": \"STRING\"}]}",
  "categoryFilter": "{\"EQUALS_ANY\": [{\"SELECT\": \"product.category.id\", \"type\": \"STRING\"},{\"VALUES\": {{ supply.appliedFilters.Category.ids }}, \"type\": \"STRING\"}]}"
}

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

{
  "data": {
    "supplyInventoryApproachingOutOfStock": {
      "totalCount": 9,
      "edges": [
        {
          "cursor": "NTQ1NTA4MQ==",
          "object": {
            "id": "bfed44fe-b986-4a3c-8ed7-2591f53307ea",
            "inventoryParentType": "ONHAND",
            "quantityBelowLowerThreshold": 86,
            "quantity": 14,
            "product": {
              "id": "7fc12a76-edd6-44eb-bcff-af1c07cfd32f",
              "partNumber": "2000287",
              "name": "Luminaire, Metal Halide, Horizontal Mount, 70 Watt, Special",
              "category": {
                "id": "4805fff8-2bd3-4734-8614-209fd7c5c14d",
                "name": "Luminaire",
                "__typename": "Catalog"
              },
              "__typename": "Product"
            },
            "location": {
              "id": "eb9d487d-4b81-4596-abbf-64a7f42408bc",
              "locationName": "LightTree Plant 2 Tuscaloosa",
              "locationIdentifier": "LT-2",
              "__typename": "Location"
            },
            "__typename": "Inventory"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NTQ1Mzk0Mg==",
          "object": {
            "id": "c3080928-df0e-4082-b71d-852535159bef",
            "inventoryParentType": "ONHAND",
            "quantityBelowLowerThreshold": 73,
            "quantity": 27,
            "product": {
              "id": "d31e378f-2326-417d-8e8b-77dd402032e5",
              "partNumber": "9664147",
              "name": "Bracket Al Tapered 7' Rise",
              "category": {
                "id": "5e6d828b-b76e-4996-b553-46efd7884ad9",
                "name": "Secondary Chassis",
                "__typename": "Catalog"
              },
              "__typename": "Product"
            },
            "location": {
              "id": "eb9d487d-4b81-4596-abbf-64a7f42408bc",
              "locationName": "LightTree Plant 2 Tuscaloosa",
              "locationIdentifier": "LT-2",
              "__typename": "Location"
            },
            "__typename": "Inventory"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NTQ1MzkxNg==",
          "object": {
            "id": "18139b3f-d5ba-4b5f-8539-ad511bf184ed",
            "inventoryParentType": "ONHAND",
            "quantityBelowLowerThreshold": 63,
            "quantity": 37,
            "product": {
              "id": "934c72a9-9b07-465b-8325-7d31cc0050ee",
              "partNumber": "9664144",
              "name": "Banding Stainless Steel 0.030\" X 100' Roll",
              "category": {
                "id": "44e4a7b8-57ac-4641-b87b-679767d92a9f",
                "name": "Mechanicals",
                "__typename": "Catalog"
              },
              "__typename": "Product"
            },
            "location": {
              "id": "9c40bf62-a798-49e0-8e10-c9be87cf42bc",
              "locationName": "LightTree Plant 1 Birmingham",
              "locationIdentifier": "LT-1",
              "__typename": "Location"
            },
            "__typename": "Inventory"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NTQ1Mzg3OA==",
          "object": {
            "id": "68e8bb38-cd4c-493b-9fe3-d87f64cc9f56",
            "inventoryParentType": "ONHAND",
            "quantityBelowLowerThreshold": 56,
            "quantity": 44,
            "product": {
              "id": "9456799c-cd09-4e1b-928c-f907b7eee3d1",
              "partNumber": "8220072",
              "name": "Pole Concrete 40' Round Class C Direct Buried",
              "category": {
                "id": "0c867122-342d-4be3-9f19-fa18f207dbe3",
                "name": "Primary Chassis",
                "__typename": "Catalog"
              },
              "__typename": "Product"
            },
            "location": {
              "id": "9c40bf62-a798-49e0-8e10-c9be87cf42bc",
              "locationName": "LightTree Plant 1 Birmingham",
              "locationIdentifier": "LT-1",
              "__typename": "Location"
            },
            "__typename": "Inventory"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NTQ1NTIyOA==",
          "object": {
            "id": "4a85bfc8-6207-425c-8ff0-371e1867ebc7",
            "inventoryParentType": "ONHAND",
            "quantityBelowLowerThreshold": 35,
            "quantity": 65,
            "product": {
              "id": "7fc12a76-edd6-44eb-bcff-af1c07cfd32f",
              "partNumber": "2000287",
              "name": "Luminaire, Metal Halide, Horizontal Mount, 70 Watt, Special",
              "category": {
                "id": "4805fff8-2bd3-4734-8614-209fd7c5c14d",
                "name": "Luminaire",
                "__typename": "Catalog"
              },
              "__typename": "Product"
            },
            "location": {
              "id": "9c40bf62-a798-49e0-8e10-c9be87cf42bc",
              "locationName": "LightTree Plant 1 Birmingham",
              "locationIdentifier": "LT-1",
              "__typename": "Location"
            },
            "__typename": "Inventory"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NTQ1Mzk5OA==",
          "object": {
            "id": "581992dd-f3a9-4af8-866a-927215ef2d62",
            "inventoryParentType": "ONHAND",
            "quantityBelowLowerThreshold": 34,
            "quantity": 66,
            "product": {
              "id": "8b073f37-d64b-4ec0-9cd0-b5c977d743a2",
              "partNumber": "7900128",
              "name": "Lighting Controller, Base Mounted, 480volt, 200amp",
              "category": {
                "id": "8623e427-e047-4e08-ae90-15672644c2ef",
                "name": "Controllers",
                "__typename": "Catalog"
              },
              "__typename": "Product"
            },
            "location": {
              "id": "9c40bf62-a798-49e0-8e10-c9be87cf42bc",
              "locationName": "LightTree Plant 1 Birmingham",
              "locationIdentifier": "LT-1",
              "__typename": "Location"
            },
            "__typename": "Inventory"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NTQ1NDA0MA==",
          "object": {
            "id": "c8504f54-e5d7-46e9-a5be-c58597054868",
            "inventoryParentType": "ONHAND",
            "quantityBelowLowerThreshold": 27,
            "quantity": 73,
            "product": {
              "id": "8b073f37-d64b-4ec0-9cd0-b5c977d743a2",
              "partNumber": "7900128",
              "name": "Lighting Controller, Base Mounted, 480volt, 200amp",
              "category": {
                "id": "8623e427-e047-4e08-ae90-15672644c2ef",
                "name": "Controllers",
                "__typename": "Catalog"
              },
              "__typename": "Product"
            },
            "location": {
              "id": "eb9d487d-4b81-4596-abbf-64a7f42408bc",
              "locationName": "LightTree Plant 2 Tuscaloosa",
              "locationIdentifier": "LT-2",
              "__typename": "Location"
            },
            "__typename": "Inventory"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NTQ1NDEwMA==",
          "object": {
            "id": "3c9e0400-9c5d-4227-a56a-8caeb46eb0cc",
            "inventoryParentType": "ONHAND",
            "quantityBelowLowerThreshold": 17,
            "quantity": 83,
            "product": {
              "id": "9456799c-cd09-4e1b-928c-f907b7eee3d1",
              "partNumber": "8220072",
              "name": "Pole Concrete 40' Round Class C Direct Buried",
              "category": {
                "id": "0c867122-342d-4be3-9f19-fa18f207dbe3",
                "name": "Primary Chassis",
                "__typename": "Catalog"
              },
              "__typename": "Product"
            },
            "location": {
              "id": "eb9d487d-4b81-4596-abbf-64a7f42408bc",
              "locationName": "LightTree Plant 2 Tuscaloosa",
              "locationIdentifier": "LT-2",
              "__typename": "Location"
            },
            "__typename": "Inventory"
          },
          "__typename": "BusinessObjectEdge"
        }
      ],
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

The following code is an example of the transformation that is applied to the data. The attribute that is shown must match what is returned from data. This attribute is chosen in the columns section. Any calculation can be done on the data that is returned.


{
	"errors": "{{#? this.errors}}",
	"pageInfo": "{{this.data.supplyInventoryApproachingOutOfStock.pageInfo}}",
	"totalCount": "{{this.data.supplyInventoryApproachingOutOfStock.totalCount}}",
	"results": {
		"{{#each this.data.supplyInventoryApproachingOutOfStock.edges}}": {
			"cursor": "{{this.cursor}}",
			"inventoryParentType": "{{this.object.inventoryParentType}}",
			"id": "{{this.object.id}}",
			"productId": "{{this.object.product.id}}",
			"partNumber": "{{this.object.product.partNumber}}",
			"partName": "{{this.object.product.name}}",
			"quantity": "{{this.object.quantity}}",
			"locationId": "{{this.object.location.id}}",
			"locationName": "{{this.object.location.locationName}}",
			"locationIdentifier": "{{this.object.location.locationIdentifier}}"
		}
	}
}

What to do next

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