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:
- Using static data by providing the "json" property.
- Requesting data by providing the "request" property.
- Use the Extension to get data by providing the "extension" property.
- 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