Creating dashboard filters

You can choose a value to filter an associated card's data and then the filter card displays data in one or more categories on your associated card. You can search values that match a string in the filter card's search bar.

Filter card example

Creating filter cards

You can create a filter card, or you can copy an existing filter card on the Samples tab in the Card builder.

Queries property

Query

You can display any attribute that is returned by a query.

For filters, you can use query grouping. You can organize your configured queries into custom groups when you create or edit your dashboard cards. You can use query groups to chain together queries and specify the order in which they execute. All queries in a group are chained together, so the response from one query can be passed to another. Queries in different groups run independently. For more information, see ​Building data for cards.

Example of a query
query CarrierFilters($tenantId: String!, $typeAheadFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  OrganizationName: searchStrings(
    simpleFilter: {type: Organization, tenantId: $tenantId}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "matchedFields", type: STRING}, {VALUE: "name", type: STRING}]}, $typeAheadFilter]}
    cursorParams: {first: 50, sort: {fieldPath: "matchingString", order: ASC}}
  ) {
    totalCount
    pageInfo {
      hasNextPage
    }
    edges {
      cursor
      object {
        id: matchingString
        name: matchingString
      }
    }
  }
  OrganizationIdentifier: searchStrings(
    simpleFilter: {type: Organization, tenantId: $tenantId}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "matchedFields", type: STRING}, {VALUE: "organizationIdentifier", type: STRING}]}, $typeAheadFilter]}
    cursorParams: {first: 50, sort: {fieldPath: "matchingString", order: ASC}}
  ) {
    totalCount
    pageInfo {
      hasNextPage
    }
    edges {
      cursor
      object {
        id: matchingString
        name: matchingString
      }
    }
  }
  LocationName: searchStrings(
    simpleFilter: {type: Location, tenantId: $tenantId}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "matchedFields", type: STRING}, {VALUE: "locationName", type: STRING}]}, $typeAheadFilter]}
    cursorParams: {first: 50, sort: {fieldPath: "matchingString", order: ASC}}
  ) {
    totalCount
    pageInfo {
      hasNextPage
    }
    edges {
      cursor
      object {
        id: matchingString
        name: matchingString
      }
    }
  }
  LocationIdentifier: searchStrings(
    simpleFilter: {type: Location, tenantId: $tenantId}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "matchedFields", type: STRING}, {VALUE: "locationIdentifier", type: STRING}]}, $typeAheadFilter]}
    cursorParams: {first: 50, sort: {fieldPath: "matchingString", order: ASC}}
  ) {
    totalCount
    pageInfo {
      hasNextPage
    }
    edges {
      cursor
      object {
        id: matchingString
        name: matchingString
      }
    }
  }
}
Example of query variables

{
  "tenantId": "{{ tenantId }}",
  "typeAheadFilter": {
    "CONTAINS": [
      {
        "SELECT": "matchingString",
        "type": "STRING"
      },
      {
        "VALUE": "{{ carrierFilter.searchText }}",
        "type": "STRING"
      }
    ]
  }
}

Transformation

The transformation is simple and can include totalCount, id, and label for each filter attribute. The attribute that is shown must match what is returned from the data. This attribute is chosen in the Filters section. Any calculation can be done on the data that is returned.

Example of a transform

{
	"errors": "{{#? this.errors}}",
	"data": [
		{
			"totalCount": "{{this.data.OrganizationName.totalCount}}",
			"results": {
				"{{#each this.data.OrganizationName.edges}}": {
					"id": "{{this.object.id}}",
					"name": "{{this.object.name}}"
				}
			},
			"id": "OrganizationName",
			"label": "Organization name"
		},
		{
			"totalCount": "{{this.data.OrganizationIdentifier.totalCount}}",
			"results": {
				"{{#each this.data.OrganizationIdentifier.edges}}": {
					"id": "{{this.object.id}}",
					"name": "{{this.object.name}}"
				}
			},
			"id": "OrganizationID",
			"label": "Organization ID"
		},
		{
			"totalCount": "{{this.data.LocationName.totalCount}}",
			"results": {
				"{{#each this.data.LocationName.edges}}": {
					"id": "{{this.object.id}}",
					"name": "{{this.object.name}}"
				}
			},
			"id": "LocationName",
			"label": "Location name"
		},
		{
			"totalCount": "{{this.data.LocationIdentifier.totalCount}}",
			"results": {
				"{{#each this.data.LocationIdentifier.edges}}": {
					"id": "{{this.object.id}}",
					"name": "{{this.object.name}}"
				}
			},
			"id": "LocationID",
			"label": "Location ID"
		}
	]
}