Ui5 Best Practices Integration Cards
Configure SAP UI5 Analytical Integration Cards with correct chart feeds, measure/dimension bindings, and JSON card manifests.
Overview
ui5-best-practices-integration-cards is an agent skill for the Build phase that documents SAP UI5 Analytical Integration Card chart types and the feed UIDs required for valid measure and dimension binding.
Install
npx skills add https://github.com/ui5/plugins-coding-agents --skill ui5-best-practices-integration-cardsWhat is this skill?
- Comprehensive chart-type catalog for Analytical Integration Cards with required feed UIDs per visualization
- Documents donut/pie bindings (`size`, `color`, `dataFrame`) with copy-ready JSON snippets
- Documents heatmap bindings (`categoryAxis`, `categoryAxis2`, `color`) for two-dimensional categories
- Shows measures/dimensions objects wired through `feeds` to chart-specific UIDs
- Prevents agent hallucination on invalid feed names when generating card descriptors
- Chart-type catalog with per-type required feed UIDs (e.g. donut/pie and heatmap documented)
Adoption & trust: 1 installs on skills.sh; 15 GitHub stars; trending (+100% hot-view momentum).
What problem does it solve?
Your agent-generated Integration Card JSON uses wrong feed UIDs or chart bindings, so analytical cards fail validation or render blank in Fiori.
Who is it for?
Developers embedding charts inside UI5 Integration Cards on dashboards, worklists, or SAP extension projects.
Skip if: Greenfield React/Vue SPAs with no UI5 Integration Card stack, or teams only needing generic Chart.js snippets outside SAP UI5.
When should I use this skill?
Implementing or reviewing SAP UI5 Analytical Integration Cards and chart feed bindings in card JSON.
What do I get? / Deliverables
You produce card descriptor fragments with chart-correct `feeds`, measures, and dimensions aligned to UI5 Analytical Card expectations.
- Valid Integration Card JSON fragments
- Feed UID mapping per chart type
- Measure/dimension binding patterns
Recommended Skills
Journey fit
Build → frontend is the primary shelf because the skill is a chart-type and feed UID reference for UI5 Integration Card JSON—not DevOps, testing, or GTM work. Subphase frontend matches Analytical Cards on dashboards and Fiori-style embeddable analytics widgets agents implement in OpenUI5/SAPUI5 apps.
How it compares
Reference skill for SAP Integration Card feed contracts—not a general-purpose charting library cheat sheet.
Common Questions / FAQ
Who is ui5-best-practices-integration-cards for?
Frontend and extension developers using UI5/plugins-coding-agents who need authoritative feed UID mappings while pair-programming card JSON with an AI agent.
When should I use ui5-best-practices-integration-cards?
During build/frontend when adding or refactoring Analytical Integration Cards—especially donut, pie, heatmap, and other catalogued chart types in card manifests.
Is ui5-best-practices-integration-cards safe to install?
It is documentation-style guidance without runtime side effects; still review the Security Audits panel on this Prism page before installing any skill from the registry.
SKILL.md
READMESKILL.md - Ui5 Best Practices Integration Cards
# Analytical Cards - Chart Types Reference Comprehensive list of all supported chart types for Analytical Integration Cards, with their required UIDs and example configurations. For each chart type, the `feeds` array must use the listed UIDs to bind the corresponding measures and dimensions. 1. donut/pie * UIDs: size, color, dataFrame * Example: ```json { "measures": [ { "name": "Revenue", "value": "{revenueDataField}" } ], "dimensions": [ { "name": "Product Category", "value": "{productCategoryField}" } ], "feeds": [ { "type": "Measure", "uid": "size", "values": ["Revenue"] }, { "type": "Dimension", "uid": "color", "values": ["Product Category"] } ] } ``` 2. heatmap * UIDs: categoryAxis, categoryAxis2, color * Example: ```json { "measures": [ { "name": "Temperature", "value": "{temperatureField}" } ], "dimensions": [ { "name": "Location", "value": "{locationField}" }, { "name": "Product", "value": "{productField}" } ], "feeds": [ { "type": "Dimension", "uid": "categoryAxis", "values": ["Location"] }, { "type": "Dimension", "uid": "categoryAxis2", "values": ["Product"] }, { "type": "Measure", "uid": "color", "values": ["Temperature"] } ] } ``` 3. treemap * UIDs: title, color, weight * Example: ```json { "measures": [ { "name": "Profit", "value": "{profitField}" }, { "name": "Budget", "value": "{budgetField}" } ], "dimensions": [ { "name": "Department", "value": "{departmentField}" } ], "feeds": [ { "type": "Dimension", "uid": "title", "values": ["Department"] }, { "type": "Measure", "uid": "color", "values": ["Profit"] }, { "type": "Measure", "uid": "weight", "values": ["Budget"] } ] } ``` 4. bar * UIDs: dataFrame, categoryAxis, color, valueAxis * Example: ```json { "measures": [ { "name": "Sales", "value": "{salesField}" } ], "dimensions": [ { "name": "Month", "value": "{monthField}" } ], "feeds": [ { "type": "Dimension", "uid": "categoryAxis", "values": ["Month"] }, { "type": "Measure", "uid": "valueAxis", "values": ["Sales"] } ] } ``` 5. dual_bar * UIDs: dataFrame, categoryAxis, color, valueAxis, valueAxis2 * Example: ```json { "measures": [ { "name": "Revenue", "value": "{revenueField}" }, { "name": "Expenses", "value": "{expensesField}" } ], "dimensions": [ { "name": "Quarter",