SAP UI5 Integration Cards – Beginners Steps ( Understanding of JSON) to transform into Dashboard

Understanding the Manifest.json File: Detailed explanation of the manifest.json file and its key components.

Reference blog : https://community.sap.com/t5/technology-blogs-by-sap/how-you-can-prepare-your-own-template-using-sap-ui5-integration-cards/ba-p/13881521

Prepare a Sample UI5 Integration Card with lightweight approach referencing your Odata API

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta charset=”utf-8″>
<title>Card As Custom Element</title>
<script src=”https://ui5.sap.com/resources/sap-ui-integration.js”
id=”sap-ui-bootstrap”
data-sap-ui-theme=”sap_horizon”>
</script>
<style>
.myCard {
margin: 1rem;
width: 17rem;
.sapFGridContainer {
padding: 12rem;
}
}
.myTable::after {
margin: 1rem;
width: 27rem;
.sapFGridContainer {
padding: 12rem;
}
}
</style>
</head>
<body class=”sapUiBody”>
<ui-integration-card
badge=”New”
id=”cardCustomElement”
manifest=”./manifest.json”
data-mode=”Active”
base-url=”./”
class=”myCard”>
</ui-integration-card>
</body>
</html>

manifest.json

{
“_version”: “1.14.0”,
“sap.app”: {
“id”: “card.explorer.data.list.card”,
“type”: “card”,
“title”: “Sample for Client-Side Pagination in Cards”,
“subTitle”: “Sample for Client-Side Pagination in Cards”,
“applicationVersion”: {
“version”: “1.0.0”
},
“sap.ui5”: {
“rootView”: {
“viewName”: “sap.ui.integration.sample.Destinations.Destinations”,
“type”: “json”,
“async”: true
},
“dependencies”: {
“libs”: {
“sap.f”: {},
“sap.ui.core”: {},
“sap.ui.integration”: {}
}
},
“config”: {
}
},
“shortTitle”: “A short title for this Card”,
“info”: “Additional information about this Card”,
“description”: “A long description for this Card”,
“tags”: {
“keywords”: [
“Data”,
“Pagination”,
“Card”,
“Sample”
]
}
},
“sap.card”: {
“type”: “List”,
“data”: {
“request”: {
“url”: “https://services.odata.org/V4/Northwind/Northwind.svc/Products”,
“parameters”: {
“$format”: “json”,
“$top”: 5,
“$count”: true
}
},
“path”: “/value/”
},
“header”: {
“title”: “Products”,
“subTitle”: “In Stock Information”,
“icon”: {
“src”: “sap-icon://product”
},
“status”: {
“text”: “{= format.text(${i18n>CARD.COUNT_X_OF_Y}, [${parameters>/visibleItems}, ${/@odata.count}]) }”
}
},
“content”: {
“item”: {
“title”: “{ProductName}”,
“description”: “{UnitsInStock} units in stock”,
“description1”: “UnitPrice {= format.currency(${UnitPrice}, ‘EUR’)}”,
“highlight”: “{= ${Discontinued} ? ‘Error’ : ‘Success’}”
}
}
}
}

Deployed Samples : https://yogananda-muthaiah.github.io/UI5-Integration-Cards-samples/

Source code : https://github.com/yogananda-muthaiah/UI5-Integration-Cards-samples

Source code with simple : https://github.com/yogananda-muthaiah/ui5-integration-cards

References : https://community.sap.com/t5/technology-blogs-by-sap/how-you-can-prepare-your-own-template-using-sap-ui5-integration-cards/ba-p/13881521

Understanding the Manifest.json File: Detailed explanation of the manifest.json file and its key components.Reference blog : https://community.sap.com/t5/technology-blogs-by-sap/how-you-can-prepare-your-own-template-using-sap-ui5-integration-cards/ba-p/13881521Prepare a Sample UI5 Integration Card with lightweight approach referencing your Odata APIindex.html   <!DOCTYPE html>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta charset=”utf-8″>
<title>Card As Custom Element</title>
<script src=”https://ui5.sap.com/resources/sap-ui-integration.js”
id=”sap-ui-bootstrap”
data-sap-ui-theme=”sap_horizon”>
</script>
<style>
.myCard {
margin: 1rem;
width: 17rem;
.sapFGridContainer {
padding: 12rem;
}
}
.myTable::after {
margin: 1rem;
width: 27rem;
.sapFGridContainer {
padding: 12rem;
}
}
</style>
</head>
<body class=”sapUiBody”>
<ui-integration-card
badge=”New”
id=”cardCustomElement”
manifest=”./manifest.json”
data-mode=”Active”
base-url=”./”
class=”myCard”>
</ui-integration-card>
</body>
</html>   manifest.json   {
“_version”: “1.14.0”,
“sap.app”: {
“id”: “card.explorer.data.list.card”,
“type”: “card”,
“title”: “Sample for Client-Side Pagination in Cards”,
“subTitle”: “Sample for Client-Side Pagination in Cards”,
“applicationVersion”: {
“version”: “1.0.0”
},
“sap.ui5”: {
“rootView”: {
“viewName”: “sap.ui.integration.sample.Destinations.Destinations”,
“type”: “json”,
“async”: true
},
“dependencies”: {
“libs”: {
“sap.f”: {},
“sap.ui.core”: {},
“sap.ui.integration”: {}
}
},
“config”: {
}
},
“shortTitle”: “A short title for this Card”,
“info”: “Additional information about this Card”,
“description”: “A long description for this Card”,
“tags”: {
“keywords”: [
“Data”,
“Pagination”,
“Card”,
“Sample”
]
}
},
“sap.card”: {
“type”: “List”,
“data”: {
“request”: {
“url”: “https://services.odata.org/V4/Northwind/Northwind.svc/Products”,
“parameters”: {
“$format”: “json”,
“$top”: 5,
“$count”: true
}
},
“path”: “/value/”
},
“header”: {
“title”: “Products”,
“subTitle”: “In Stock Information”,
“icon”: {
“src”: “sap-icon://product”
},
“status”: {
“text”: “{= format.text(${i18n>CARD.COUNT_X_OF_Y}, [${parameters>/visibleItems}, ${/@odata.count}]) }”
}
},
“content”: {
“item”: {
“title”: “{ProductName}”,
“description”: “{UnitsInStock} units in stock”,
“description1”: “UnitPrice {= format.currency(${UnitPrice}, ‘EUR’)}”,
“highlight”: “{= ${Discontinued} ? ‘Error’ : ‘Success’}”
}
}
}
}    Deployed Samples : https://yogananda-muthaiah.github.io/UI5-Integration-Cards-samples/Source code : https://github.com/yogananda-muthaiah/UI5-Integration-Cards-samplesSource code with simple : https://github.com/yogananda-muthaiah/ui5-integration-cards References : https://community.sap.com/t5/technology-blogs-by-sap/how-you-can-prepare-your-own-template-using-sap-ui5-integration-cards/ba-p/13881521   Read More Technology Blogs by SAP articles