Data Handling

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 Properties

Note: This feature is dependent on the host environment and if it’s not prepared, the card data requests will work without caching. If you are developing a host environment - see the instructions in the Integrate section.

Caching reflects how data requests are performed. In the card’s configuration it is enabled by default and would work, given that there is caching enablement in the host environment.

With the “cache” property you can specify how your card will behave about caching. You can control how long does the cached data is considered fresh and therefore shown to the user. You can also set whether a stale cache (one which is not fresh) can be shown to the user while fresh data is fetched.

For example, if maxAge is 3600 and staleWhileRevalidate is true, each time when the users open the page in up to one hour, they will see the cached data from their first visit. When the page is opened again after one hour, the user will briefly see the old, cached data, while the fresh data is being fetched. Then the fresh data will be shown and saved in the cache to be used in next one hour.

The default behavior for the card is maxAge: 0 and staleWhileRevalidate: true.

See the samples in the Explore section.

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