CSRF Card example does not run; functionality unclear

[jvanattedev]

OpenUI5 version: 1.120

Browser/version (+device/version): Chrome 123.0.6312.106 (Official Build) (64-bit)

Running the sample in a VS Code project (other cards on our own server are working - Object, Table, OData requests...)

Code (slightly adapted toward using the Northwind service):
{ "_version": "1.36.0", "sap.app": { "id": "card.explorer.data.csrf.card", "type": "card", "title": "Sample for Data usage in Cards", "subTitle": "Sample for Data usage in Cards", "applicationVersion": { "version": "1.0.0" }, "shortTitle": "A short title for this Card", "info": "Additional information about this Card", "description": "A long description for this Card", "tags": { "keywords": [ "Data", "Card", "Sample" ] } }, "sap.card": { "type": "List", "configuration": { "destinations": { "ProductsMockServerWithCSRF": { "name": "ProductsMockServerWithCSRF", "label": "Products Mock CSRF", "defaultUrl": "https://services.odata.org/V3/Northwind/Northwind.svc/" } }, "csrfTokens": { "token1": { "data": { "request": { "url": "{{destinations.ProductsMockServerWithCSRF}}/Token", "method": "HEAD", "headers": { "X-CSRF-Token": "Fetch" } } } } } }, "data": { "request": { "url": "{{destinations.ProductsMockServerWithCSRF}}/Products", "parameters": { "$format": "json", "$top": 4 }, "method": "GET", "headers": { "X-CSRF-Token": "{csrfTokens>/token1/value}" } }, "path": "/data" }, "header": { "title": "Products", "subTitle": "Weight Information", "icon": { "src": "sap-icon://product" } }, "content": { "item": { "title": "{Name}", "info": { "value": "{= format.unit(${Weight}, ${WeightUnit})}" } }, "maxItems": 4 } } }

Adapted to a working version (showing data from Northwind, but no CSRF):
{ "_version": "1.36.0", "sap.app": { "id": "card.explorer.data.csrf.card", "type": "card", "title": "Sample for Data usage in Cards", "subTitle": "Sample for Data usage in Cards", "applicationVersion": { "version": "1.0.0" }, "shortTitle": "A short title for this Card", "info": "Additional information about this Card", "description": "A long description for this Card", "tags": { "keywords": [ "Data", "Card", "Sample" ] } }, "sap.card": { "type": "List", "configuration": { "destinations": { "ProductsMockServerWithCSRF": { "name": "ProductsMockServerWithCSRF", "label": "Products Mock CSRF", "defaultUrl": "https://services.odata.org/V3/Northwind/Northwind.svc/" } }, "csrfTokens": { "token1": { "data": { "request": { "url": "{{destinations.ProductsMockServerWithCSRF}}", "method": "HEAD" } } } } }, "header": { "title": "Products", "subTitle": "Weight Information", "icon": { "src": "sap-icon://product" } }, "content": { "data": { "request": { "url": "{{destinations.ProductsMockServerWithCSRF}}/Products", "parameters": { "$format": "json", "$top": 4 }, "method": "GET" }, "path": "/value" }, "item": { "title": "{ProductName}", "info": { "value": "{UnitsInStock}" } }, "maxItems": 4 } } }

What is the expected result?
The sample runs.
The CSRF token is requested, returned and available in the card parameters.

What happens instead?
Console error:
TypeError: Cannot read properties of undefined (reading 'request')
at c.getDetails (RequestDataProvider-dbg.js:516:62)
at i._triggerDataUpdate (DataProvider-dbg.js:204:39)

Any other information? (attach screenshot if possible)
According to your own documentation of the List card (and other cards), there should be a "data" section in the "content" part. This is missing in the sample.

[NHristov-sap]

Hello @jvanattedev ,

Please provide live isolated example that demonstrates the issue.

Best Regards,
Nikolay Hristov
UI5 GitHub Dispatcher

[jvanattedev]

Hello @jvanattedev ,

Please provide live isolated example that demonstrates the issue.

Best Regards, Nikolay Hristov UI5 GitHub Dispatcher
What exactly do you mean with 'live isolated example'?

[NHristov-sap]

Hi @jvanattedev ,

It means that we need a working code placed somewere on a public host, that demonstrates the isuue you want to report, something like https://jsbin.com/.

Best Regards,
Nikolay Hristov
UI5 GitHub Dispatcher