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

How you can prepare your own template using SAP UI5 Integration Cards locally to Design,Build & Test
Estimated read time 4 min read

 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 foldercreate 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 Visual Studio Code using Live HTML)

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)

 

 

 

​  Reference : https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/index.htmlSteps to preview SAP UI5 Integration Cards in local (Design, Build & Test)Create an application foldercreate 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 Visual Studio Code using Live HTML)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 Cardsyou can also generate the structure for manifest.json using Generative AI (using OpenAI, Gemini, Claude, Mistral… etc)     Read More Technology Blogs by SAP articles 

#SAP

#SAPTechnologyblog

Avatar for

You May Also Like

More From Author