Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
yogananda
Product and Topic Expert
Product and Topic Expert
814

2024-11-02_08-48-07.pngUnderstanding 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...