SAP UI5 Integration Cards - Beginners Steps ( Unde...

yogananda

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...

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...