Data Handling

Overview

The data sections of the card can be defined on different levels (card level, header level, filter-definition level or content level). Inner level data sections will take precedence. Defining a data section configures how the card will handle its data. A data section will result in a JSON model creation which can be used in binding syntaxes later on. There are a few possible configurations for a data section:

  1. Using static data by providing the "json" property.
  2. Requesting data by providing the "request" property.
  3. Use the Extension to get data by providing the "extension" property.
  4. Provide "path" only to specify the context path of the current level.

Data:

Property Type Required Description Schema Version Since
request Request No An object defining a request. 1.14.0 1.65
json Object No A data object. 1.14.0 1.65
extension Extension No An object defining which method of an Extension to be called for fetching the data. 1.79
name string No Name for the data section.
If this name is given, a model with the same name is assigned to the card and can be used inside the manifest and inside an extension or a Component card.
A unique name must be used for each individual data section. The names "parameters", "filters", "context" and "i18n" are reserved for cards and must not be used.
See this sample.
Note: This property is experimental.
1.30 1.86
path string No The context path. Default value is "/". 1.14.0 1.65
updateInterval number No The interval in seconds on which the data will be updated. 1.15.0 1.65

Request:

Property Type Required Description Schema Version Since
mode string No The mode of the request. Possible values are "cors", "no-cors", "same-origin". Default value is "cors". 1.14.0 1.65
url string Yes The URL of the request. Relative paths like "data.json", "./data.json" and "../data.json" are going to be resolved relatively to the manifest base path. 1.14.0 1.65
method string No The HTTP method. Possible values are "GET", "POST". Default value is "GET". 1.14.0 1.65
parameters Object No The request parameters to be sent to the server. If the HTTP method is "POST" the parameters will be put as key/value pairs into the body of the request. If the method doesn't have an entity body, such as the "GET" method, the data is appended to the URL.

Default encoding is application/x-www-form-urlencoded. Also JSON is supported for the body encoding (see sample with GraphQL). If you need it add a header Content-Type: application/json"
1.14.0 1.65
headers Object No The HTTP headers of the request. 1.14.0 1.65
withCredentials boolean No Indicates whether cross-site requests should be made using credentials. 1.17.0 1.71

Extension:

Property Type Required Description Schema Version Since
method string Yes The name of the Extension method, which returns a promise and resolves with JSON. 1.79
args array No The arguments with which the method will be called. 1.79

Examples

Card level data section with static JSON where the header and content sets their own context path:

{
	"sap.card": {
		"type": "List",
		"data": {
			"json": {
				"info": {
					"header": "Some title"
				},
				"items": [
					{
						"name": "Item 1",
						"description": "Item 1 description"
					},
					{
						"name": "Item 2",
						"description": "Item 2 description"
					},
					{
						"name": "Item 3",
						"description": "Item 3 description"
					}
				]
			}
		},
		"header": {
			"data": {
				"path": "/info"
			},
			"title": "{header}"
		},
		"content": {
			"data": {
				"path": "/items"
			},
			"item": {
				"title": "{name}",
				"description": "{description}"
			}
		}
	}
}

Content level data section with request and update interval:

The structure of the /api/items API response:

{
	"items": [
		{
			"name": "Item 1",
			"description": "Item 1 description"
		},
		{
			"name": "Item 2",
			"description": "Item 2 description"
		},
		{
			"name": "Item 3",
			"description": "Item 3 description"
		}
	]
}

The manifest:

{
	"sap.card": {
		"type": "List",
		"header": {
			"title": "Some title"
		},
		"content": {
			"data": {
				"request": {
					"url": "../api/items"
				},
				"updateInterval": 300,
				"path": "/items"
			},
			"item": {
				"title": "{name}",
				"description": "{description}"
			}
		}
	}
}
Try it Out