skills.rest
SAP
SAPOFFICIAL
Explore all skills by this author →
Website𝕏@SAPOpenSourceGitHub

component-guidance-layout

Guide SAP Fiori UI layout selection and component best practices.

232|70|Updated May 16, 2019
Search Tags:#best practices#layout#components#UI design#SAP Fiori#Fiori guidelines
One-click install
npx skills add https://github.com/SAP/fundamental-styles --skill component-guidance-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-guidance-layout
Source: https://github.com/SAP/fundamental-styles/tree/main/skills/component-guidance-layout
Command: npx skills add https://github.com/SAP/fundamental-styles --skill component-guidance-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill unit provides a comprehensive guide to choosing the right SAP Fiori layout structures and best practices for UI development.

Core Features & Use Cases

  • Component Guidance: In-depth guidance on the usage of components like Card, Panel, Dynamic Page, and more.
  • Best Practices: Offers detailed best practices for component usage, design patterns, and accessibility considerations.
  • Use Case: When a developer needs to decide on the layout for a new SAP Fiori app, this skill unit provides essential guidelines to ensure the UI is intuitive and effective.

Quick Start

Run the component-guidance-layout skill to review layout guidelines for the Card component in SAP Fiori apps.

Frequently Asked Questions about component-guidance-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the SAP Fiori layout guidelines for UI components?▼

SAP Fiori layout guidelines define best practices for choosing and implementing UI structures like Card, Panel, and Dynamic Page to ensure application design patterns are intuitive, effective, and accessible.

How do I choose the right layout structure for a SAP Fiori app?▼

To choose the right SAP Fiori layout structure, follow component guidance that evaluates design patterns, accessibility, and specific use cases. This ensures the selected structure effectively matches your application requirements.

When should I use a Dynamic Page versus a Panel in SAP Fiori?▼

Use Dynamic Page versus Panel in SAP Fiori by consulting component best practices. Dynamic Page handles flexible content areas, while Panel groups related content, ensuring your UI layout remains structured and intuitive.

Does SAP Fiori layout guidance include accessibility best practices?▼

Yes, SAP Fiori layout guidance includes accessibility best practices. It provides detailed considerations for component usage and design patterns to ensure your application UI is accessible and effective for all users.

What is the best way to implement a Card component in SAP Fiori?▼

The best way to implement a Card component in SAP Fiori is to run the component-guidance-layout skill. It reviews layout guidelines and offers detailed best practices to ensure your UI component usage is correct and effective.

Related Skills

Explore More Software Engineering Skills→
SAPSAP
232

component-guidance-forms

Guide Fiori form control selection for SAP data entry forms.

Official
Intermediate
Yanick-mjYanick-mj

mb-fe-dev

Implement React frontend components with atomic design and design tokens.

Community
Advanced
SAPSAP
232

component-guidance-actions

Guide Fiori action component selection and UI design best practices.

Official
Intermediate
DayronDLRDayronDLR
3

sap-fiori-tools

Generate and configure SAP Fiori applications using SAP Fiori tools extensions.

Community
Advanced