@ui5/mcp-server 0.1.3 → 0.1.5

package/resources/template-card/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "template-card",
+	"version": "1.0.0",
+	"description": "A basic template card project",
+	"scripts": {
+		"start": "http-server ./ -c-1 -o test/index.html",
+		"test": "echo \"No tests specified\" && exit 0"
+	},
+	"devDependencies": {
+		"http-server": "^14.1.1"
+	}
+}

package/resources/template-card/src/analytical.ejs

@@ -0,0 +1,157 @@
+"data": {
+	"json": {
+		"dimensions": {
+			"weekLabel": "Weeks"
+		},
+		"measures": {
+			"revenueLabel": "Revenue",
+			"costLabel": "Costs"
+		},
+		"legend": {
+			"visible": true,
+			"position": "bottom",
+			"alignment": "topLeft"
+		},
+		"list": [
+			{
+				"Week": "CW14",
+				"Revenue": 431000.22,
+				"Cost": 230000,
+				"Cost1": 24800.63,
+				"Cost2": 205199.37,
+				"Cost3": 199999.37,
+				"Target": 500000,
+				"Budget": 210000
+			},
+			{
+				"Week": "CW15",
+				"Revenue": 494000.3,
+				"Cost": 238000,
+				"Cost1": 99200.39,
+				"Cost2": 138799.61,
+				"Cost3": 200199.37,
+				"Target": 500000,
+				"Budget": 224000
+			},
+			{
+				"Week": "CW16",
+				"Revenue": 491000.17,
+				"Cost": 221000,
+				"Cost1": 70200.54,
+				"Cost2": 150799.46,
+				"Cost3": 80799.46,
+				"Target": 500000,
+				"Budget": 238000
+			}
+		],
+		"header": {
+			"number": "65.34",
+			"unit": "K",
+			"trend": "Down",
+			"state": "Error",
+			"target": {
+				"number": 100,
+				"unit": "K"
+			},
+			"deviation": {
+				"number": 34.7,
+				"unit": "%"
+			},
+			"details": "Q1, 2018"
+		}
+	}
+},
+"header": {
+	"type": "Numeric",
+	"title": "{i18n>title}",
+	"subtitle": "{i18n>subtitle}",
+	"mainIndicator": {
+		"number": "{header/number}",
+		"unit": "{header/unit}",
+		"trend": "{header/trend}",
+		"state": "{header/state}"
+	},
+	"details": "{header/details}",
+	"sideIndicators": [
+		{
+			"title": "Target",
+			"number": "{header/target/number}",
+			"unit": "{header/target/unit}"
+		},
+		{
+			"title": "Deviation",
+			"number": "{header/deviation/number}",
+			"unit": "{header/deviation/unit}"
+		}
+	]
+},
+"content": {
+	"data": {
+		"path": "/list"
+	},
+	"chartType": "line",
+	"chartProperties": {
+		"title": {
+			"text": "Line chart",
+			"visible": true,
+			"alignment": "left"
+		},
+		"legend": {
+			"visible": "{legend/visible}"
+		},
+		"legendGroup": {
+			"layout": {
+				"position": "{legend/position}",
+				"alignment": "{legend/alignment}"
+			}
+		},
+		"plotArea": {
+			"dataLabel": {
+				"visible": true
+			}
+		},
+		"categoryAxis": {
+			"title": {
+				"visible": false
+			}
+		},
+		"valueAxis": {
+			"title": {
+				"visible": false
+			}
+		}
+	},
+	"dimensions": [
+		{
+			"name": "{dimensions/weekLabel}",
+			"value": "{Week}"
+		}
+	],
+	"measures": [
+		{
+			"name": "{measures/revenueLabel}",
+			"value": "{Revenue}"
+		},
+		{
+			"name": "{measures/costLabel}",
+			"value": "{Cost}"
+		}
+	],
+	"feeds": [
+		{
+			"uid": "valueAxis",
+			"type": "Measure",
+			"values": [
+				"{measures/revenueLabel}",
+				"{measures/costLabel}"
+			]
+		},
+		{
+			"uid": "categoryAxis",
+			"type": "Dimension",
+			"values": [
+				"{dimensions/weekLabel}"
+			]
+		}
+	]
+}

package/resources/template-card/src/calendar.ejs

@@ -0,0 +1,90 @@
+"data": {
+	"json": {
+		"item": [
+			{
+				"start": "2020-09-18T09:00",
+				"end": "2020-09-18T10:00",
+				"title": "Payment reminder",
+				"icon": "sap-icon://desktop-mobile",
+				"type": "Type06",
+				"url": "http://sap.com"
+			},
+			{
+				"start": "2020-09-18T17:00",
+				"end": "2020-09-18T17:30",
+				"title": "Private appointment",
+				"icon": "sap-icon://desktop-mobile",
+				"type": "Type07"
+			}
+		],
+		"specialDate": [
+			{
+				"start": "2020-09-13",
+				"end": "2020-09-14",
+				"type": "Type08"
+			},
+			{
+				"start": "2020-09-24",
+				"end": "2020-09-24",
+				"type": "Type13"
+			}
+		],
+		"legendItem": [
+			{
+				"category": "calendar",
+				"text": "Team building",
+				"type": "Type08"
+			},
+			{
+				"category": "calendar",
+				"text": "Public holiday",
+				"type": "Type13"
+			}
+		]
+	}
+},
+"header": {
+	"title": "{i18n>title}",
+	"subtitle": "{i18n>subtitle}"
+},
+"content": {
+	"item": {
+		"template": {
+			"startDate": "{start}",
+			"endDate": "{end}",
+			"title": "{title}",
+			"text": "{text}",
+			"icon": {
+				"src": "{icon}",
+				"visible": true
+			},
+			"type": "{type}",
+			"actions": [
+				{
+					"type": "Navigation",
+					"enabled": "{= ${url}}",
+					"parameters": {
+						"url": "{url}"
+					}
+				}
+			]
+		},
+		"path": "/item"
+	},
+	"specialDate": {
+		"template": {
+			"startDate": "{start}",
+			"endDate": "{end}",
+			"type": "{type}"
+		},
+		"path": "/specialDate"
+	},
+	"legendItem": {
+		"template": {
+			"category": "{category}",
+			"text": "{text}",
+			"type": "{type}"
+		},
+		"path": "/legendItem"
+	}
+}

package/resources/template-card/src/dt/Configuration.js

@@ -0,0 +1,43 @@
+sap.ui.define([
+	"sap/ui/integration/Designtime",
+],
+function (
+	Designtime
+) {
+	"use strict";
+
+	return function () {
+		return new Designtime({
+			form: {
+				items: {
+					groupheader1: {
+						label: "General Settings",
+						type: "group",
+					},
+					separator1: {
+						type: "separator",
+					},
+					title: {
+						manifestpath: "/sap.card/header/title",
+						type: "string",
+						translatable: true,
+						label: "Card Title",
+						cols: 1,
+						allowDynamicValues: true,
+					},
+					subtitle: {
+						manifestpath: "/sap.card/header/subtitle",
+						type: "string",
+						translatable: true,
+						label: "Card Subtitle",
+						cols: 1,
+						allowDynamicValues: true,
+					},
+				},
+			},
+			preview: {
+				modes: "None",
+			},
+		});
+	};
+});

package/resources/template-card/src/i18n/i18n.properties

@@ -0,0 +1,2 @@
+title=Sample Integration Card
+subtitle=Subtitle

package/resources/template-card/src/list.ejs

@@ -0,0 +1,27 @@
+"data": {
+	"json": {
+		"items": [
+			{
+				"title": "Item 1",
+				"description": "Description for Item 1"
+			},
+			{
+				"title": "Item 2",
+				"description": "Description for Item 2"
+			}
+		]
+	}
+},
+"header": {
+	"title": "{i18n>title}",
+	"subtitle": "{i18n>subtitle}"
+},
+"content": {
+	"data": {
+		"path": "/items"
+	},
+	"item": {
+		"title": "{title}",
+		"description": "{description}"
+	}
+}

package/resources/template-card/src/manifest.json

@@ -0,0 +1,38 @@
+{
+	"_version": "<%= manifestVersion %>",
+	"sap.app": {
+		"id": "sample.integration.card",
+		"type": "card",
+		"title": "Sample Integration Card",
+		"applicationVersion": {
+			"version": "1.0.0"
+		}
+	},
+	"sap.ui": {
+		"technology": "UI5",
+		"deviceTypes": {
+			"desktop": true,
+			"tablet": true,
+			"phone": true
+		}
+	},
+	"sap.card": {
+		"type": "<%= cardType %>",
+		"configuration": {
+			"editor": "./dt/Configuration"
+		},
+		<% if (cardType === "Analytical") { %>
+		<%- include('analytical.ejs') %>
+		<% } else if (cardType === "Calendar") { %>
+		<%- include('calendar.ejs') %>
+		<% } else if (cardType === "List") { %>
+		<%- include('list.ejs') %>
+		<% } else if (cardType === "Object") { %>
+		<%- include('object.ejs') %>
+		<% } else if (cardType === "Table") { %>
+		<%- include('table.ejs') %>
+		<% } else if (cardType === "Timeline") { %>
+		<%- include('timeline.ejs') %>
+		<% } %>
+	}
+}

package/resources/template-card/src/object.ejs

@@ -0,0 +1,44 @@
+"data": {
+	"json": {
+		"firstName": "John",
+		"lastName": "Doe",
+		"company": {
+			"name": "Some Corp",
+			"address": "123 Main St, Anytown"
+		}
+	}
+},
+"header": {
+	"title": "{i18n>title}",
+	"subtitle": "{i18n>subtitle}"
+},
+"content": {
+	"groups": [
+		{
+			"title": "Contact Details",
+			"items": [
+				{
+					"label": "First Name",
+					"value": "{firstName}"
+				},
+				{
+					"label": "Last Name",
+					"value": "{lastName}"
+				}
+			]
+		},
+		{
+			"title": "Company Details",
+			"items": [
+				{
+					"label": "Company Name",
+					"value": "{company/name}"
+				},
+				{
+					"label": "Address",
+					"value": "{company/address}"
+				}
+			]
+		}
+	]
+}

package/resources/template-card/src/table.ejs

@@ -0,0 +1,36 @@
+
+"data": {
+	"json": {
+		"items": [
+			{
+				"title": "Item 1",
+				"description": "Description for Item 1"
+			},
+			{
+				"title": "Item 2",
+				"description": "Description for Item 2"
+			}
+		]
+	}
+},
+"header": {
+	"title": "{i18n>title}",
+	"subtitle": "{i18n>subtitle}"
+},
+"content": {
+	"data": {
+		"path": "/items"
+	},
+	"row": {
+		"columns": [
+			{
+				"title": "Title",
+				"value": "{title}"
+			},
+			{
+				"title": "Description",
+				"value": "{description}"
+			}
+		]
+	}
+}

package/resources/template-card/src/timeline.ejs

@@ -0,0 +1,42 @@
+"data": {
+	"json": {
+		"items": [
+			{
+				"Title": "Weekly sync: Marketplace / Design Stream",
+				"Description": "MRR WDF18 C3.2(GLASSBOX)",
+				"Icon": "sap-icon://appointment-2",
+				"Time": "2021-10-25T10:00:00.000Z",
+				"Url": "/activity1"
+			},
+			{
+				"Title": "Video Conference for FLP@SF, S4,Hybris",
+				"Icon": "sap-icon://my-view",
+				"Time": "2021-10-25T14:00:00.000Z",
+				"Url": "/activity2"
+			}
+		]
+	}
+},
+"header": {
+	"title": "{i18n>title}",
+	"subtitle": "{i18n>subtitle}"
+},
+"content": {
+	"data": {
+		"path": "/items"
+	},
+	"item": {
+		"dateTime": {
+			"value": "{Time}"
+		},
+		"description": {
+			"value": "{Description}"
+		},
+		"title": {
+			"value": "{Title}"
+		},
+		"icon": {
+			"src": "{Icon}"
+		}
+	}
+}

package/resources/template-card/test/App.js

@@ -0,0 +1,50 @@
+sap.ui.define(["sap/ui/integration/Host"], async (Host) => {
+	"use strict";
+	await customElements.whenDefined("ui-integration-card");
+	await customElements.whenDefined("ui-integration-card-editor");
+
+	const editor = document.getElementById("editor");
+	const card = document.getElementById("card");
+	const applyChangesBtn = document.getElementById("applyChangesBtn");
+	const resetBtn = document.getElementById("resetBtn");
+	const host = new Host({
+		resolveDestination: function(sDestinationName) {
+			if (sDestinationName === "Northwind") {
+				return "https://services.odata.org/V4/Northwind/Northwind.svc/";
+			}
+
+			throw new Error("Destination " + sDestinationName + " not found!");
+		},
+		actions: [
+			{
+				type: "Custom",
+				text: "Configure",
+				icon: "sap-icon://action-settings",
+				action: () => {
+					document.getElementById("editorSection").classList.remove("hidden");
+				}
+			}
+		]
+	});
+
+	card.host = host.getId();
+	card.manifest = "../src/manifest.json";
+
+	editor.host = host.getId();
+	editor.card = "card";
+
+	let initialSettings;
+
+	// UI5 CustomElementBase doesn't expose the "ready" event, so use timeout
+	setTimeout(() => {
+		initialSettings = editor.getCurrentSettings();
+	}, 3000);
+
+	applyChangesBtn.addEventListener("click", () => {
+		card.manifestChanges = [editor.getCurrentSettings()];
+	});
+
+	resetBtn.addEventListener("click", () => {
+		card.manifestChanges = [initialSettings];
+	});
+});

package/resources/template-card/test/index.css

@@ -0,0 +1,57 @@
+body {
+	margin: 2rem;
+}
+
+.container {
+	display: flex;
+	gap: 2rem;
+	align-items: flex-start;
+	flex-wrap: wrap;
+}
+
+.card-section {
+	flex: 1;
+	min-width: 300px;
+	max-width: 600px;
+	display: block;
+	flex-direction: column;
+}
+
+.button-container {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	margin-top: 1rem;
+}
+
+.config-button {
+	padding: 0.25rem 0.5rem;
+	border: none;
+	border-radius: 0.25rem;
+	cursor: pointer;
+	font-size: 14px;
+	transition: background-color 0.2s ease;
+}
+
+.config-button.primary {
+	background-color: #0070f3;
+	color: white;
+}
+
+.config-button.primary:hover {
+	background-color: #0051cc;
+}
+
+.config-button.secondary {
+	background-color: #f5f5f5;
+	color: #333;
+	border: 1px solid #ddd;
+}
+
+.config-button.secondary:hover {
+	background-color: #e5e5e5;
+}
+
+.hidden {
+	display: none;
+}

package/resources/template-card/test/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Integration Card Preview</title>
+	<link rel="stylesheet" href="./index.css">
+	<script
+		src="https://ui5.sap.com/resources/sap-ui-integration.js"
+		id="sap-ui-bootstrap"
+		data-sap-ui-compat-version="edge"
+		data-sap-ui-resource-roots='{"preview": "./"}'
+		data-sap-ui-on-init="module:preview/App"
+		data-sap-ui-theme="sap_horizon">
+		</script>
+	<script src="https://ui5.sap.com/resources/sap-ui-integration-card-editor.js"></script>
+</head>
+
+<body>
+	<h1>Preview</h1>
+	<div class="container">
+		<div class="card-section">
+			<h2>Integration Card</h2>
+			<ui-integration-card
+				id="card"
+				width="300px"
+				height="400px">
+			</ui-integration-card>
+		</div>
+		<div id="editorSection"
+			class="card-section hidden">
+			<h2>Configuration Editor</h2>
+			<ui-integration-card-editor
+				id="editor">
+			</ui-integration-card-editor>
+			<div class="button-container">
+				<button id="applyChangesBtn" class="config-button primary">Apply Changes</button>
+				<button id="resetBtn" class="config-button secondary">Reset</button>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>