|
2 | 2 |
|
3 | 3 | > *This document outlines the fundamental rules and best practices an AI agent must follow when developing or modifying Integration Cards. Adherence to these guidelines is critical for creating modern, maintainable, and performant UI Integration Cards.* |
4 | 4 | ## 1. Coding Guidelines |
5 | | -- **ALWAYS** attempt to make declarative Integration Card, such as "Calendar", "List", "Table", "Timeline", "Object" or "Analytical". |
6 | | - - in rare cases, you can also create Integration Card Extension. |
| 5 | +- **ALWAYS** strive to create declarative Integration Card, such as "Calendar", "List", "Table", "Timeline", "Object" or "Analytical". |
| 6 | + - create an Integration Card Extension only in exceptional cases. |
7 | 7 | - **ALWAYS** create links using the `actions` property. |
8 | 8 | - **ALWAYS** refer to parameters using correct syntax - `{parameters>/parameterKey/value}`. |
9 | 9 | - **ALWAYS** perform validation of the integration card as described in [2. Validation](#2-validation). |
10 | 10 | - **ALWAYS** show a preview of the generated card following the [4. Preview Instructions](#4-preview-instructions). |
11 | 11 | - **ALWAYS** generate new declarative integration cards using the `create_integration_card` tool. |
12 | 12 |
|
13 | 13 | ### 1.1 Data |
14 | | -- **NEVER** modify the given data under any circumstances |
15 | | -- **ALWAYS** place service URL directly in the card manifest when provided |
16 | | -- **ALWAYS** use destinations by their name when provided. Configure the destination in the `sap.card/configuration/destinations/` and reuse it with binding syntax like `{{destinations.destinationName}}`. |
17 | | -- **NEVER** replace destination name with its URL |
| 14 | +- **NEVER** modify the provided data under any circumstances. |
| 15 | +- **ALWAYS** include the service URL directly in the card manifest when one is supplied. |
| 16 | +- **ALWAYS** reference destinations by name when available. Configure the destination in the `sap.card/configuration/destinations/` and reuse it with binding syntax like `{{destinations.destinationName}}`. |
| 17 | +- **NEVER** replace destination name with its URL. |
18 | 18 | - **ALWAYS** place data configuration in: `"sap.card"/data/` |
19 | 19 | - **NEVER** place data configuration in: |
20 | 20 | - `"sap.card"/content/data/` |
|
29 | 29 | - `"sap.card"/header/data/path` (Header-specific path. It overrides the primary data path) |
30 | 30 |
|
31 | 31 | #### 1.1.1 Data Errors Detection |
32 | | -- Symptom: "No data to display" message appears |
| 32 | +- Symptom: "No data to display" message appears. |
33 | 33 | - Cause: Incorrect data configuration or data path in the content incorrectly overrides the primary data path. |
34 | | -- Solution: Verify all rules in [1.1 Data](#11-data) are properly followed |
| 34 | +- Solution: Verify all rules in [1.1 Data](#11-data) are properly followed. |
35 | 35 |
|
36 | 36 | ### 1.2 Internationalization |
37 | | -- **ALWAYS** bind properties that are not bound to the data to the `i18n` model |
| 37 | +- **ALWAYS** bind properties that are not bound to the data to the `i18n` model. |
38 | 38 |
|
39 | 39 | ### 1.3 Analytical Cards |
40 | 40 | - **ALWAYS** follow [6. Analytical Cards Coding Guidelines](#6-analytical-cards-coding-guidelines) when developing Analytical cards. |
41 | 41 |
|
42 | 42 | ## 2. Validation |
43 | 43 | - **ALWAYS** ensure that `manifest.json` file is valid JSON. |
44 | 44 | - **ALWAYS** ensure that in `manifest.json` file the property `sap.app/type` is set to `"card"`. |
45 | | -- **ALWAYS** avoid deprecated properties in `manifest.json` and other places. |
46 | | -- **NEVER** treat Integration Cards project as UI5 project, except for cards of type "Component". |
| 45 | +- **ALWAYS** avoid using deprecated properties in `manifest.json` and elsewhere. |
| 46 | +- **NEVER** treat Integration Cards' project as UI5 project, except for cards of type "Component". |
47 | 47 |
|
48 | 48 | ## 3. Card Explorer |
49 | | -- Contains detailed description for every property in the Integration Cards Schema, integration of cards in hosting environments, examples, configuration editor documentation and examples, and many more broader topics and best practices, |
50 | | -- can be found at https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html |
| 49 | +- The Card Explorer provides detailed documentation for the Integration Cards schema, including descriptions of every property, guidance for integrating cards into hosting environments, configuration editor documentation with examples, and broader best practices. It is available at: https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html |
51 | 50 |
|
52 | 51 | ## 4. Preview Instructions |
53 | | -- **ALWAYS** search the existing card folder for preview instructions or scripts and use them, if available. |
| 52 | +- **ALWAYS** check the card folder for an existing preview file and any accompanying instructions or scripts, and reuse them if available. |
54 | 53 | * for example, in NodeJS-based projects, search the `package.json` file for `start` or similar script. If such is available, use it |
55 | 54 | * 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. |
| 55 | +- If preview instructions are not available, you have to create an HTML page that contains a `ui-integration` card element which references the card manifest. Then serve the HTML page using `http` server. |
57 | 56 |
|
58 | 57 | ## 5. Configuration Editor |
59 | | -- When there is Configuration Editor, always try to make most of the integration card fields editable. |
| 58 | +- When a Configuration Editor is available, make as many Integration Card fields editable as possible. |
60 | 59 |
|
61 | 60 | ## 6. Analytical Cards Coding Guidelines |
62 | 61 | - **ALWAYS** set `sap.card/content/chartType` property. |
63 | | -- **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. |
64 | | -- **ALWAYS** use `sap.card/content/chartProperties` to adjust labels, colors, the legend, and other thing of the chart. |
| 62 | +- **ALWAYS** adjust `sap.card/content/measures`, `sap.card/content/dimensions` and `sap.card/content/feeds` to match the `sap.card/content/chartType` property and data structure. This is critical for proper data display. |
| 63 | +- **ALWAYS** use `sap.card/content/chartProperties` to adjust labels, colors, the legend, and other chart aspects. |
65 | 64 | - **ALWAYS** define each feed with its type (Dimension or Measure), its unique identifier (uid), and the associated values using defined measures and dimensions. Example: |
66 | 65 | ```json |
67 | 66 | "feeds": [ |
|
81 | 80 | } |
82 | 81 | ] |
83 | 82 | ``` |
84 | | -- **ALWAYS** ensure that the uid in feeds accurately matches the required UID for your chosen chartType (e.g., color, size, dataFrame). |
| 83 | +- **ALWAYS** ensure the `uid` in `feeds` exactly matches the UID required for the selected chartType (e.g., color, size, dataFrame). |
85 | 84 |
|
86 | 85 | ### 6.1 Comprehensive List of All Chart Types, UIDs and Examples |
87 | 86 |
|
|
0 commit comments