sap-fiori-tree-table
Configure hierarchical tree table to SAP Fiori elements application for displaying parent-child recursive hierarchies. Supports CAP and ABAP RAP (OData V4).
- Installs
- 244
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/sap/open-ux-tools --skill sap-fiori-tree-table- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads sap-fiori-tree-table automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
SAP Fiori Tree Table with Recursive Hierarchy
Purpose
Configure hierarchical tree table to display parent-child relationships in a recursive structure (organizational hierarchies, category trees, nested data).
Environment Requirements
CAP Projects:
- ✅ VS Code or SAP Business Application Studio (BAS) - Both environments supported
- ✅ Fiori MCP Server - Required for Fiori app generation and modification (VS Code only)
- ✅ CDS MCP Server - Required for CDS model queries
ABAP RAP Projects:
- ✅ VS Code only - ABAP Development Tools extension is VS Code-specific
- ✅ Fiori MCP Server - Required for Fiori app generation and modification
- ✅ ABAP Development Tools for VS Code extension - Required for backend development (includes ADT MCP server for RAP operations)
MANDATORY: Gather Required Inputs First
STOP and ASK the user for ALL of these inputs if ANY are missing from the prompt:
For ABAP RAP Projects:
- Package name - Where to create or find backend hierarchy objects ($TMP for local, or specific package like Z_MAINT)
- Transport Required: Depends on package type (No for local packages like $TMP, Yes for transportable packages)
- Entity name - The entity to make hierarchical (e.g., "Equipment", "Category", "FunctionalLocation")
For CAP Projects:
- Entity name - The entity to make hierarchical (e.g., "Travel", "Category", "ProductCategory")
DO NOT proceed with implementation until all inputs are confirmed.
CAP Implementation
📖 Complete CAP Implementation Guide
Quick Summary:
- 6-step process: Check entity → Add association → Add @hierarchy → Configure manifest → Create data → Test
- Supports UUID, String, and Integer keys (single key only)
- Requires @sap/cds 9.6.0+ and OData V4
- Use CDS MCP to search model before editing
ABAP RAP Implementation
📖 Complete RAP Implementation Guide
Quick Summary:
- 4-step process: Check existing hierarchy → Implement backend → Configure manifest → Test
- Decision required: Read-only (List Report only) vs. Editable (with Object Page)
- For detailed backend implementation:
- Read-Only Treeviews Guide
- Editable Treeviews Guide
Quick Troubleshooting
CAP Common Issues
- "@hierarchy not supported" → Use managed association (no
oncondition) - "table has no column" → Use
parent_ID(with underscore) in CSV - "TreeTable not rendering" → Check
type: "TreeTable"andhierarchyQualifierin manifest
ABAP RAP Common Issues
- "Element must not be search enabled" → Remove
@Searchannotations from hierarchy projection view - "Primary keys do not match" → Child table needs composite key (child UUID + parent UUID)
📖 Full error reference in implementation guides
Key Differences
CAP:
- Managed association in entity
@hierarchyannotation on service- CSV data with
parent_IDcolumn - For testing, refer to the Application Preview Guidelines section in the
sap-fiori-app-developmentskill
ABAP RAP:
- CDS view with
@OData.hierarchy.recursiveHierarchy - Qualifier in metadata
- Test data in database tables
- For testing, refer to the Application Preview Guidelines section in the
sap-fiori-app-developmentskill
FAQ
What does the sap-fiori-tree-table skill do?
Configure hierarchical tree table to SAP Fiori elements application for displaying parent-child recursive hierarchies. Supports CAP and ABAP RAP (OData V4).
How do I install sap-fiori-tree-table?
Run npx skills add https://github.com/sap/open-ux-tools --skill sap-fiori-tree-table in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sap-fiori-tree-table/ (personal) or .claude/skills/sap-fiori-tree-table/ (project).
Which AI agents can use sap-fiori-tree-table?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is sap-fiori-tree-table safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains sap-fiori-tree-table?
It is published by sap in sap/open-ux-tools. It has 244 recorded installs.
More from sap/open-ux-tools
sap-fiori-add-visual-filter
sap/open-ux-tools
Add visual filters (chart-based) to SAP Fiori Elements filter bar or value help using CAP or ABAP RAP. Use when asked to add chart filters, bar chart selectors, or visual filter bars to a Fiori Elements application.
sap-fiori-app-development
sap/open-ux-tools
Guidelines for SAP Fiori app development for CAP and standalone projects. Use when creating or modifying SAP Fiori Elements applications, adding a List Report, Object Page, or Worklist, or connecting a Fiori app to a CAP service or OData endpoint.
sap-fiori-analytical-chart
sap/open-ux-tools
Add analytical chart (chart + table hybrid) to SAP Fiori Elements List Report using aggregated data. Supports CAP and ABAP RAP (OData V4). Use when asked to add a chart section, aggregated data visualization, or Analytical List Page chart to a List Report.
sap-fiori-create-cli
sap/open-ux-tools
Invokes the @sap-ux/create CLI — generate, add, convert, remove, update, change, list, get commands for SAP Fiori projects. Use when asked to run sap-ux, invoke create CLI, add config to a project, generate adaptation-project, or use any sap-ux/create subcommand. Full options for each command group are in the linked references.
sap-fiori-eslint-plugin
sap/open-ux-tools
Configure, migrate, or run ESLint with @sap-ux/eslint-plugin-fiori-tools in SAP Fiori projects (standalone or CAP). Use when ESLint is missing and the user wants to add it or add code quality checks; when an existing .eslintrc or eslint@8 config needs upgrading to ESLint 9 flat config; when the user wants to run linting, fix lint errors, or ESLint is broken or not working; or when the user wants to see the application issues or UX consistency issues for a specific app — e.g. "show application issue(s) for my project ", "show application issues for app X", "UX consistency issues", "issues consistent with Page Map", "same issues as Application Information".
sap-fiori-opa5-test-development
sap/open-ux-tools
Use this skill when writing, fixing, extending, or reviewing OPA5 integration tests for SAP Fiori Elements applications - whether the app uses OData V4 (sap.fe.test library) or OData V2 (fioriElementsTestLibrary). Triggers on any request involving OPA5 journeys, page objects, JourneyRunner setup, test structure, mock data, or debugging test failures in a SAP Fiori Elements project generated by SAP Fiori tools. Use even when the user says "write integration tests" or "add an OPA journey" without specifying the library, as long as the project context is SAP Fiori Elements. Not applicable to freestyle UI5 apps.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.