How you can prepare your own template using SAP UI...

Yogananda · ‎2024 Sep 28

Reference : https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/index.html

Steps to preview SAP UI5 Integration Cards in local (Design, Build & Test)

Create an application folder
create below files index.html, items.json and manifest.json (For Translation create an i18n)
preview your application with index.html (right click open with or if you have Visual Studio Code using Live HTML Preview)

Github Repo : https://github.com/yogananda-muthaiah/ui5-integration-cards

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: 25rem;
			}
		</style>
	</head>
	<body>
		<ui-integration-card
			badge="New"
			id="cardCustomElement"
			manifest="./manifest.json"
			data-mode="Active"
			base-url="./"
			class="myCard">
		</ui-integration-card>
	</body>
</html>

items.json

[
	{
		"Name": "Comfort Easy",
		"Description": "32 GB Digital Assistant with high-resolution color screen"
	},
	{
		"Name": "ITelO Vault",
		"Description": "Digital Organizer with State-of-the-Art Storage Encryption"
	},
	{
		"Name": "Notebook Professional 15",
		"Description": "Notebook Professional 15 with 2,80 GHz quad core, 15\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro"
	},
	{
		"Name": "Ergo Screen E-I",
		"Description": "Optimum Hi-Resolution max. 1920 x 1080 @ 85Hz, Dot Pitch: 0.27mm"
	},
	{
		"Name": "Laser Professional Eco",
		"Description": "Print 2400 dpi image quality color documents at speeds of up to 32 ppm (color) or 36 ppm (monochrome), letter/A4. Powerful 500 MHz processor, 512MB of memory"
	}
]

manifest.json

{
	"_version": "1.15.0",
	"sap.app": {
		"id": "card.explorer.translation.list.card",
		"type": "card",
		"i18n": "i18n/i18n.properties",
		"title": "Sample for HTML Consumption",
		"subTitle": "Sample for HTML Consumption",
		"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": [
				"Consumption",
				"Card",
				"Sample"
			]
		}
	},
	"sap.card": {
		"data": {
			"request": {
				"url": "./items.json"
			}
		},
		"type": "List",
		"header": {
			"title": "{{TITLE}}",
			"subTitle": "Translation with model. {i18n>SUBTITLE}",
			"icon": {
				"src": "sap-icon://product"
			}
		},
		"content": {
			"data": {
				"path": "/"
			},
			"item": {
				"title": {
					"value": "{Name}"
				},
				"description": {
					"value": "{Description}"
				}
			}
		}
	}
}

Note : you can create any number of cards in your UI5 Application with multiple Integration Cards

you can also generate the structure for manifest.json using Generative AI (using OpenAI, Gemini, Claude, Mistral... etc)

How you can prepare your own template using SAP UI5 Integration Cards locally to Design,Build & Test

Steps to preview SAP UI5 Integration Cards in local (Design, Build & Test)