Skip to content

Commit a456ef2

Browse files
dimovpetardimovpetar
authored
feat: Add tool for creating Integration Cards (#84)
1 parent 0d35ab8 commit a456ef2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+2518
-4
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ The UI5 [Model Context Protocol](https://modelcontextprotocol.io/) server offers
3030
- `get_version_info`: Retrieves version information for the UI5 framework.
3131
- `run_ui5_linter`: Integrates with [`@ui5/linter`](https://github.com/UI5/linter) to analyze and report issues in UI5 code.
3232
- `get_integration_cards_guidelines`: Provides access to UI Integration Cards development best practices.
33+
- `create_integration_card`: Scaffolds a new UI Integration Card.
3334

3435
## Requirements
3536

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default tseslint.config(
2020
"tmp/*",
2121

2222
// Exclude app templates
23+
"resources/template-card/*",
2324
"resources/template-js/*",
2425
"resources/template-ts/*",
2526

‎resources/integration_cards_guidelines.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
- **ALWAYS** refer to parameters using correct syntax - `{parameters>/parameterKey/value}`.
99
- **ALWAYS** perform validation of the integration card as described in [2. Validation](#2-validation).
1010
- **ALWAYS** show a preview of the generated card following the [4. Preview Instructions](#4-preview-instructions).
11+
- **ALWAYS** generate new declarative integration cards using the `create_integration_card` tool.
1112

1213
### 1.1 Data
1314
- **NEVER** modify the given data under any circumstances
@@ -49,13 +50,14 @@
4950
- can be found at https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html
5051

5152
## 4. Preview Instructions
52-
- To show a preview of the card, you need an html page, that contains a `ui-integration` card element that uses the card manifest.
53-
- **ALWAYS** search the existing card folder for preview file and instructions and use them, if available.
53+
- **ALWAYS** search the existing card folder for preview instructions or scripts and use them, if available.
54+
* for example, in NodeJS-based projects, search the `package.json` file for `start` or similar script. If such is available, use it
55+
* also search in the `README.md` file.
56+
- If preview instructions are not available, you have to create an html page, that contains a `ui-integration` card element that uses the card manifest. Then serve the html page using `http` server.
5457

5558
## 5. Configuration Editor
5659
- When there is Configuration Editor, always try to make most of the integration card fields editable.
5760

58-
5961
## 6. Analytical Cards Coding Guidelines
6062
- **ALWAYS** set `sap.card/content/chartType` property.
6163
- **ALWAYS** adjust `sap.card/content/measures`, `sap.card/content/dimensions` and `sap.card/content/feeds` based on the `sap.card/content/chartType` property and data structure. This is critical for proper data display.

‎resources/template-card/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "template-card",
3+
"version": "1.0.0",
4+
"description": "A basic template card project",
5+
"scripts": {
6+
"start": "http-server ./ -c-1 -o test/index.html",
7+
"test": "echo \"No tests specified\" && exit 0"
8+
},
9+
"devDependencies": {
10+
"http-server": "^14.1.1"
11+
}
12+
}

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
"data": {
2+
"json": {
3+
"dimensions": {
4+
"weekLabel": "Weeks"
5+
},
6+
"measures": {
7+
"revenueLabel": "Revenue",
8+
"costLabel": "Costs"
9+
},
10+
"legend": {
11+
"visible": true,
12+
"position": "bottom",
13+
"alignment": "topLeft"
14+
},
15+
"list": [
16+
{
17+
"Week": "CW14",
18+
"Revenue": 431000.22,
19+
"Cost": 230000,
20+
"Cost1": 24800.63,
21+
"Cost2": 205199.37,
22+
"Cost3": 199999.37,
23+
"Target": 500000,
24+
"Budget": 210000
25+
},
26+
{
27+
"Week": "CW15",
28+
"Revenue": 494000.3,
29+
"Cost": 238000,
30+
"Cost1": 99200.39,
31+
"Cost2": 138799.61,
32+
"Cost3": 200199.37,
33+
"Target": 500000,
34+
"Budget": 224000
35+
},
36+
{
37+
"Week": "CW16",
38+
"Revenue": 491000.17,
39+
"Cost": 221000,
40+
"Cost1": 70200.54,
41+
"Cost2": 150799.46,
42+
"Cost3": 80799.46,
43+
"Target": 500000,
44+
"Budget": 238000
45+
}
46+
],
47+
"header": {
48+
"number": "65.34",
49+
"unit": "K",
50+
"trend": "Down",
51+
"state": "Error",
52+
"target": {
53+
"number": 100,
54+
"unit": "K"
55+
},
56+
"deviation": {
57+
"number": 34.7,
58+
"unit": "%"
59+
},
60+
"details": "Q1, 2018"
61+
}
62+
}
63+
},
64+
"header": {
65+
"type": "Numeric",
66+
"title": "{i18n>title}",
67+
"subtitle": "{i18n>subtitle}",
68+
"mainIndicator": {
69+
"number": "{header/number}",
70+
"unit": "{header/unit}",
71+
"trend": "{header/trend}",
72+
"state": "{header/state}"
73+
},
74+
"details": "{header/details}",
75+
"sideIndicators": [
76+
{
77+
"title": "Target",
78+
"number": "{header/target/number}",
79+
"unit": "{header/target/unit}"
80+
},
81+
{
82+
"title": "Deviation",
83+
"number": "{header/deviation/number}",
84+
"unit": "{header/deviation/unit}"
85+
}
86+
]
87+
},
88+
"content": {
89+
"data": {
90+
"path": "/list"
91+
},
92+
"chartType": "line",
93+
"chartProperties": {
94+
"title": {
95+
"text": "Line chart",
96+
"visible": true,
97+
"alignment": "left"
98+
},
99+
"legend": {
100+
"visible": "{legend/visible}"
101+
},
102+
"legendGroup": {
103+
"layout": {
104+
"position": "{legend/position}",
105+
"alignment": "{legend/alignment}"
106+
}
107+
},
108+
"plotArea": {
109+
"dataLabel": {
110+
"visible": true
111+
}
112+
},
113+
"categoryAxis": {
114+
"title": {
115+
"visible": false
116+
}
117+
},
118+
"valueAxis": {
119+
"title": {
120+
"visible": false
121+
}
122+
}
123+
},
124+
"dimensions": [
125+
{
126+
"name": "{dimensions/weekLabel}",
127+
"value": "{Week}"
128+
}
129+
],
130+
"measures": [
131+
{
132+
"name": "{measures/revenueLabel}",
133+
"value": "{Revenue}"
134+
},
135+
{
136+
"name": "{measures/costLabel}",
137+
"value": "{Cost}"
138+
}
139+
],
140+
"feeds": [
141+
{
142+
"uid": "valueAxis",
143+
"type": "Measure",
144+
"values": [
145+
"{measures/revenueLabel}",
146+
"{measures/costLabel}"
147+
]
148+
},
149+
{
150+
"uid": "categoryAxis",
151+
"type": "Dimension",
152+
"values": [
153+
"{dimensions/weekLabel}"
154+
]
155+
}
156+
]
157+
}

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
"data": {
2+
"json": {
3+
"item": [
4+
{
5+
"start": "2020-09-18T09:00",
6+
"end": "2020-09-18T10:00",
7+
"title": "Payment reminder",
8+
"icon": "sap-icon://desktop-mobile",
9+
"type": "Type06",
10+
"url": "http://sap.com"
11+
},
12+
{
13+
"start": "2020-09-18T17:00",
14+
"end": "2020-09-18T17:30",
15+
"title": "Private appointment",
16+
"icon": "sap-icon://desktop-mobile",
17+
"type": "Type07"
18+
}
19+
],
20+
"specialDate": [
21+
{
22+
"start": "2020-09-13",
23+
"end": "2020-09-14",
24+
"type": "Type08"
25+
},
26+
{
27+
"start": "2020-09-24",
28+
"end": "2020-09-24",
29+
"type": "Type13"
30+
}
31+
],
32+
"legendItem": [
33+
{
34+
"category": "calendar",
35+
"text": "Team building",
36+
"type": "Type08"
37+
},
38+
{
39+
"category": "calendar",
40+
"text": "Public holiday",
41+
"type": "Type13"
42+
}
43+
]
44+
}
45+
},
46+
"header": {
47+
"title": "{i18n>title}",
48+
"subtitle": "{i18n>subtitle}"
49+
},
50+
"content": {
51+
"item": {
52+
"template": {
53+
"startDate": "{start}",
54+
"endDate": "{end}",
55+
"title": "{title}",
56+
"text": "{text}",
57+
"icon": {
58+
"src": "{icon}",
59+
"visible": true
60+
},
61+
"type": "{type}",
62+
"actions": [
63+
{
64+
"type": "Navigation",
65+
"enabled": "{= ${url}}",
66+
"parameters": {
67+
"url": "{url}"
68+
}
69+
}
70+
]
71+
},
72+
"path": "/item"
73+
},
74+
"specialDate": {
75+
"template": {
76+
"startDate": "{start}",
77+
"endDate": "{end}",
78+
"type": "{type}"
79+
},
80+
"path": "/specialDate"
81+
},
82+
"legendItem": {
83+
"template": {
84+
"category": "{category}",
85+
"text": "{text}",
86+
"type": "{type}"
87+
},
88+
"path": "/legendItem"
89+
}
90+
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
sap.ui.define([
2+
"sap/ui/integration/Designtime",
3+
],
4+
function (
5+
Designtime
6+
) {
7+
"use strict";
8+
9+
return function () {
10+
return new Designtime({
11+
form: {
12+
items: {
13+
groupheader1: {
14+
label: "General Settings",
15+
type: "group",
16+
},
17+
separator1: {
18+
type: "separator",
19+
},
20+
title: {
21+
manifestpath: "/sap.card/header/title",
22+
type: "string",
23+
translatable: true,
24+
label: "Card Title",
25+
cols: 1,
26+
allowDynamicValues: true,
27+
},
28+
subtitle: {
29+
manifestpath: "/sap.card/header/subtitle",
30+
type: "string",
31+
translatable: true,
32+
label: "Card Subtitle",
33+
cols: 1,
34+
allowDynamicValues: true,
35+
},
36+
},
37+
},
38+
preview: {
39+
modes: "None",
40+
},
41+
});
42+
};
43+
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
title=Sample Integration Card
2+
subtitle=Subtitle

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"data": {
2+
"json": {
3+
"items": [
4+
{
5+
"title": "Item 1",
6+
"description": "Description for Item 1"
7+
},
8+
{
9+
"title": "Item 2",
10+
"description": "Description for Item 2"
11+
}
12+
]
13+
}
14+
},
15+
"header": {
16+
"title": "{i18n>title}",
17+
"subtitle": "{i18n>subtitle}"
18+
},
19+
"content": {
20+
"data": {
21+
"path": "/items"
22+
},
23+
"item": {
24+
"title": "{title}",
25+
"description": "{description}"
26+
}
27+
}

0 commit comments

Comments
 (0)